-
<div class="n-row n-row--border">
+
+
+
<div class="n-row n-row--border">
<div>...</div>
</div>
-
-
-
-
-
Grid with all borders
-
-
-
-
-
-
-
-
-
Right
-
Right
+
+
+
+
Grid with all borders
+
+
+
+
+
+
-
-
-
-
-
<div class="n-row n-row--border-all">
+
+
+
+
<div class="n-row n-row--border-all">
<div>...</div>
</div>
+
-
-
-
-
Right to left layout
-
-
-
-
-
-
Bottom-aligned 1/2 wide column
+
+
+
Right to left layout
-
-
Right-aligned 1/2 wide column.
-
+
+
+
+
+
Bottom-aligned 1/2 wide column
-
-
-
-
Top part of a vertical row in a normal column.
-
Bottom part of a vertical row.
+
+
Right-aligned 1/2 wide column.
+
+
-
-
-
+
+
+
Top part of a vertical row in a normal column.
+
Bottom part of a vertical row.
+
+
+
+
+
ThisLineIsTooLongAndMustBeClippedByTheContainerEvenThoughOverflowXandYDontWorkAsExpected
+
1/5
1/5
-
ThisLineIsTooLongAndMustBeClippedByTheContainerEvenThoughOverflowXandYDontWorkAsExpected
-
1/5
-
1/5
-
-
-
-
-
<div dir="rtl">
+
+
+
+
<div dir="rtl">
...
</div>
+
+
+
+
+
+
-
-
Options
-
+
+
Navigation
-
-
-
-
-
-
-
Navigation
-
-
-
Standard
-
-
-
-
-
-
<nav class="n-nav">
+
+
Standard
+
+
+
+
+
+
<nav class="n-nav">
<ul>
<li> <a href="#buttons">Buttons</a> </li>
</ul>
</nav>
+
-
-
-
Big
-
-
-
-
<nav class="n-nav n-big-text">
+
+
Big
+
+
+
+
<nav class="n-nav n-big-text">
<ul>
<li> <a aria-current="page" href="#grid">Grid</a> </li>
<li> <a href="#carousel">Carousel</a> </li>
<li> <a href="#forms">Form</a> </li>
</ul>
</nav>
+
-
-
-
Vertical
-
-
-
-
<nav class="n-nav n-nav--vertical">
+
+
Vertical
+
+
+
+
<nav class="n-nav n-nav--vertical">
<ul>
<li> <a aria-current="page" href="#grid">Grid</a> </li>
<li> <a href="#carousel">Carousel</a> </li>
<li> <a href="#forms">Form</a> </li>
</ul>
</nav>
+
-
-
-
Vertical wide
-
-
-
-
<nav class="n-nav n-nav--vertical n-nav--vertical">
+
+
Vertical wide
+
+
+
+
<nav class="n-nav n-nav--vertical n-nav--vertical">
<ul>
<li> <a aria-current="page" href="#grid">Grid</a> </li>
<li> <a href="#carousel">Carousel</a> </li>
<li> <a href="#forms">Form</a> </li>
</ul>
</nav>
+
-
-
-
Scroll
-
-
-
-
<nav class="n-nav n-nav--scroll">
+
+
Scroll
+
+
+
+
<nav class="n-nav n-nav--scroll">
<ul>
<li> <a href="#buttons">Buttons</a> </li>
</ul>
</nav>
+
-
-
-
Drop
-
-
Drop (right-to-left)
-
+
-
-
-
<nav class="n-nav n-nav--drop">
- <ul>
- <li>
- <input type="checkbox">
- <ul>
- <li>
- <input type="checkbox">
- <ul>
- <li>
- <a href="asd">First item's second level item 1 third level item 1</a>
- </li>
- </ul>
- <a>First item's second level item 1</a>
- </li>
- </ul>
- <a>First item</a>
- </li>
- </ul>
-</nav>
-
-
-
-
-
Rich select
-
-
-
-
<div class="n-select">
- <div class="n-select__options">
+ Drop (right-to-left)
+
+
+
+
<nav class="n-nav n-nav--drop">
+ <ul>
+ <li>
+ <input type="checkbox">
+ <ul>
+ <li>
+ <input type="checkbox">
+ <ul>
+ <li>
+ <a href="asd">First item's second level item 1 third level item 1</a>
+ </li>
+ </ul>
+ <a>First item's second level item 1</a>
+ </li>
+ </ul>
+ <a>First item</a>
+ </li>
+ </ul>
+</nav>
+
+
+
+
+
Rich select
+
+
+
+
<div class="n-select">
+ <div class="n-select__options">
<button>Go to page...</button>
<a href="#home">Home</a>
<a href="#form">Forms</a>
</div>
</div>
+
-
-
-
-
-
-
Typography
-
For niui typography features like baseline alignment, wrap the below elements inside an .n-type container.
-
-
-
Headlines
-
Headline 1
-
Headline 2
-
Headline 3
-
Headline 4
-
Headline 5
-
Headline 6
-
Headlines use padding instead of margin, to take up vertical space divisible by page line height.
-
Quote
-
The sky above the port was the color of television, tuned to a dead channel.
-
-
<q>
+
+
+
+
+
Typography
+
For niui typography features like baseline alignment, wrap the below elements inside an .n-type container.
+
+
+
Headlines
+
Headline 1
+
Headline 2
+
Headline 3
+
Headline 4
+
Headline 5
+
Headline 6
+
Headlines use padding instead of margin, to take up vertical space divisible by page line height.
+
Quote
+
The sky above the port was the color of television, tuned to a dead channel.
+
-
-
-
Drop cap
-
Call me Ishmael. Some years ago - never mind how long precisely - having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.
-
-
<p class="n-drop-cap">
+
+
Drop cap
+
Call me Ishmael. Some years ago - never mind how long precisely - having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.
+
+
<p class="n-drop-cap">
...
</p>
+
+
Links
+
Here is a first link.
+
Paragraph
+
Text elements are baseline-aligned with height divisible by the default line height. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Links
- Here is a first link.
- Paragraph
- Text elements are baseline-aligned with height divisible by the default line height. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
-
-
Height compensation according to line height
-
-
-
-
-
<span class="n-adjust-height">
+
+
Height compensation according to line height
+
+
+
+
+
<span class="n-adjust-height">
...
</span>
+
+
To avoid shifting on page load, add niui-preload.min.js in <head>.
- To avoid shifting on page load, add niui-preload.min.js in <head>.
-
-
-
-
-
-
Aspect ratio container
-
As the image is loading, the layout is already solid and the page doesn't jump after the download.
-
-
-
-
-
-
<picture class="n-aspect" style="--width: 1600; --height: 681;">
+
+
+
+
+
+
+
![Lido beach](images/DSC00470.jpg)
+
+
Fixed background
+
+
<div class="n-fixed-bg">
+ <picture class="n-fixed-bg__backdrop"><img></picture>
+ ...
+ </div>
+
+
+
The background image takes up the full browser window and is visible only through the
+ .n-fixed-bg section.
+
+
+
+
+
+
+
+
+
+
+
Aspect ratio container
+
As the image is loading, the layout is already solid and the page doesn't jump after the download.
+
+
+
+
+
+
<picture class="n-aspect" style="--width: 1600; --height: 681;">
<img src="images/lido.jpg" alt="Lido" width="1600" height="681">
</picture>
+
+
Options
+
+ - If the element has inline style --ratio, the --width/--height combination is ignored.
+
+ - The container can be a div and the content doesn't need to be an image.
+
-
Options
-
- - If the element has inline style --ratio, the --width/--height combination is ignored.
-
- - The container can be a div and the content doesn't need to be an image.
-
-
-
-
-
-
-
-
Standard
-
-
-
-
One
+
+
+
+
+
+
Standard
+
+
-
-
Two
+
+
+
+
+
-
-
-
-
-
-
-
-
-
<div class="n-carousel">
+
+
<div class="n-carousel">
<div class="n-carousel__content">
<div>Slide 1</div>
<div>Slide 2</div>
</div>
</div>
+
-
-
-
Index
+
+
Index
-
-
-
-
One
+
+
-
-
Two
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
<div class="n-carousel">
+
+
<div class="n-carousel">
<div class="n-carousel__content">
<div>Slide 1</div>
<div>Slide 2</div>
@@ -1224,32 +1248,32 @@ Index
<button><span>2</span></button>
</div>
</div>
+
-
-
-
Vertical
-
-
-
-
One
+
+
Vertical
+
+
-
-
Two
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
<div class="n-carousel n-carousel--vertical">
+
+
<div class="n-carousel n-carousel--vertical">
<div class="n-carousel__content">
<div>Slide 1</div>
<div>Slide 2</div>
@@ -1259,32 +1283,32 @@ Vertical
<button><span>2</span></button>
</div>
</div>
+
-
-
-
Vertical with controls on the right
-
-
-
-
One
+
+
Vertical with controls on the right
+
+
-
-
Two
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
<div class="n-carousel n-carousel--vertical n-carousel--index-end">
+
+
<div class="n-carousel n-carousel--vertical n-carousel--index-end">
<div class="n-carousel__content">
<div>Slide 1</div>
<div>Slide 2</div>
@@ -1294,32 +1318,32 @@ Vertical with controls on the right
<button><span>2</span></button>
</div>
</div>
+
-
-
-
Controls outside of content
-
-
-
-
One
+
+
Controls outside of content
+
+
-
-
Two
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
<div class="n-carousel n-carousel--controls-outside">
+
+
<div class="n-carousel n-carousel--controls-outside">
<div class="n-carousel__content">
<div>Slide 1</div>
<div>Slide 2</div>
@@ -1329,32 +1353,32 @@ Controls outside of content
<button><span>2</span></button>
</div>
</div>
+
-
-
-
Peeking at neighboring slides
-
-
-
-
One
+
+
Peeking at neighboring slides
+
+
-
-
Two
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
<div class="n-carousel n-carousel--peek">
+
+
<div class="n-carousel n-carousel--peek">
<div class="n-carousel__content">
<div>Slide 1</div>
<div>Slide 2</div>
@@ -1364,9 +1388,9 @@ Peeking at neighboring slides
<button><span>2</span></button>
</div>
</div>
+
-
-
-
-
Auto height
-
-
-
-
One
+
+
Auto height
+
+
-
-
Two
+
+
+
+
+
-
-
-
-
-
-
-
-
-
<div class="n-carousel n-carousel--auto-height">
+
+
<div class="n-carousel n-carousel--auto-height">
<div class="n-carousel__content">
<div>Slide 1</div>
<div>Slide 2</div>
</div>
</div>
+
-
-
-
Carousel with detached nav
-
-
-
Carousel here...
-
-
-
-
-
Two
+
+
Carousel with detached nav
+
+
-
-
<div class="n-carousel" id="detached-carousel">
+
+
<div class="n-carousel" id="detached-carousel">
<div class="n-carousel__content">
<div>Slide 1</div>
<div>Slide 2</div>
@@ -1450,117 +1474,117 @@ Carousel here...
<button><span>1</span></button>
<button><span>2</span></button>
</div>
-
-
-
-
-
...detached nav here
-
-
-
-
-
-
-
-
+
+
+
+
...detached nav here
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
Tabs at the bottom
-
-
- -
-
Tab 1
- Content of Tab 1
+
+
Options
+
-
-
-
-
-
-
-
<div class="n-carousel n-carousel--tabs n-carousel--controls-outside">
- <div class="n-carousel__content">
- <div> Tab 1 </div>
- <div> Tab 2 </div>
- </div>
- <div class="n-carousel__index">
+
+
+
+
+
+
+
Tabs at the bottom
+
+
+ -
+
Tab 1
+ Content of Tab 1
+
+ -
+
Tab 2
+ The content of Tab 2
+ New line
+ New line
+
+ -
+
Three
+
+
+
+
+
+
+
+
+
+
<div class="n-carousel n-carousel--tabs n-carousel--controls-outside">
+ <div class="n-carousel__content">
+ <div> Tab 1 </div>
+ <div> Tab 2 </div>
+ </div>
+ <div class="n-carousel__index">
<button><span>Tab 1</span></button>
<button><span>Tab 2</span></button>
</div>
</div>
-
-
-
-
Tabs on top with auto height
-
-
- -
-
Tab 1
- Content of Tab 1
-
- -
-
Tab 2
- The content of Tab 2
- New line
- New line
-
- -
-
Three
-
-
-
-
-
-
-
-
<div class="n-carousel n-carousel--tabs n-carousel--auto-height n-carousel--index-start n-carousel--controls-outside">
+
+
Tabs on top with auto height
+
+
+ -
+
Tab 1
+ Content of Tab 1
+
+ -
+
Tab 2
+ The content of Tab 2
+ New line
+ New line
+
+ -
+
Three
+
+
+
+
+
+
+
+
+
+
<div class="n-carousel n-carousel--tabs n-carousel--auto-height n-carousel--index-start n-carousel--controls-outside">
<div class="n-carousel__content">
<div> Tab 1 </div>
<div> Tab 2 </div>
@@ -1570,34 +1594,34 @@ Tab 2
<button><span>Tab 2</span></button>
</div>
</div>
-
-
-
-
Vertical tabs
-
-
- -
-
Tab 1
- Content of Tab 1
-
- -
-
Tab 2
- The content of Tab 2
- New line
- New line
-
- -
-
Three
-
-
-
-
-
-
-
-
<div class="n-carousel n-carousel--tabs n-carousel--vertical n-carousel--controls-outside">
+
+
Vertical tabs
+
+
+ -
+
Tab 1
+ Content of Tab 1
+
+ -
+
Tab 2
+ The content of Tab 2
+ New line
+ New line
+
+ -
+
Three
+
+
+
+
+
+
+
+
+
+
<div class="n-carousel n-carousel--tabs n-carousel--vertical n-carousel--controls-outside">
<div class="n-carousel__content">
<div> Tab 1 </div>
<div> Tab 2 </div>
@@ -1607,34 +1631,34 @@ Tab 2
<button><span>Tab 2</span></button>
</div>
</div>
-
-
-
-
Vertical tabs on the right
-
-
- -
-
Tab 1
- Content of Tab 1
-
- -
-
Tab 2
- The content of Tab 2
- New line
- New line
-
- -
-
Three
-
-
-
-
-
-
-
-
<div class="n-carousel n-carousel--tabs n-carousel--vertical n-carousel--index-end n-carousel--controls-outside">
+
+
Vertical tabs on the right
+
+
+ -
+
Tab 1
+ Content of Tab 1
+
+ -
+
Tab 2
+ The content of Tab 2
+ New line
+ New line
+
+ -
+
Three
+
+
+
+
+
+
+
+
+
+
<div class="n-carousel n-carousel--tabs n-carousel--vertical n-carousel--index-end n-carousel--controls-outside">
<div class="n-carousel__content">
<div> Tab 1 </div>
<div> Tab 2 </div>
@@ -1644,29 +1668,29 @@ Tab 2
<button><span>Tab 2</span></button>
</div>
</div>
+
-
-
-
Tabs at the bottom with detached nav
-
-
- -
-
Tab 1
- Content of Tab 1
-
- -
-
Tab 2
- The content of Tab 2
- New line
- New line
-
- -
-
Three
-
-
-
-
-
<div class="n-carousel n-carousel--tabs" id="detached-tabs">
+
+
Tabs at the bottom with detached nav
+
+
+ -
+
Tab 1
+ Content of Tab 1
+
+ -
+
Tab 2
+ The content of Tab 2
+ New line
+ New line
+
+ -
+
Three
+
+
+
+
+
<div class="n-carousel n-carousel--tabs" id="detached-tabs">
<div class="n-carousel__content">
<div> Tab 1 </div>
<div> Tab 2 </div>
@@ -1676,85 +1700,85 @@ Tab 2
<button><span>Tab 1</span></button>
<button><span>Tab 2</span></button>
</div>
+
+
+
+
+
+
-
-
-
-
+
+
Options
+
+ - This component inherits the carousel
+
-
-
Options
-
- - This component inherits the carousel
-
-
-
-
-
-
-
-
-
-
Inline
-
-
- -
-
-
-
-
- First Taipei photo
-
-
- -
-
-
-
-
- First Taipei photo
-
-
- -
-
-
-
-
- First Taipei photo
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
Inline
+
+
+ -
+
+
+
+
+ First Taipei photo
+
+
+ -
+
+
+
+
+ First Taipei photo
+
+
+ -
+
+
+
+
+ First Taipei photo
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
-
-
-
-
<div class="n-carousel n-carousel--lightbox n-carousel--inline n-carousel--thumbnails">
+
+
<div class="n-carousel n-carousel--lightbox n-carousel--inline n-carousel--thumbnails">
<ul class="n-carousel__content">
<li>
<figure>
@@ -1771,9 +1795,9 @@ Inline
...
</div>
</div>
+
-
-
-
-
Inline vertical
-
-
- -
-
-
-
-
- First photo from Japan
-
-
- -
-
-
-
-
- Second photo from Japan
-
-
- -
-
-
-
-
- Third photo from Japan
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
Inline vertical
+
+
+ -
+
+
+
+
+ First photo from Japan
+
+
+ -
+
+
+
+
+ Second photo from Japan
+
+
+ -
+
+
+
+
+ Third photo from Japan
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
<div class="n-carousel n-carousel--lightbox n-carousel--inline n-carousel--thumbnails n-carousel--vertical">
+
+
<div class="n-carousel n-carousel--lightbox n-carousel--inline n-carousel--thumbnails n-carousel--vertical">
<ul class="n-carousel__content">
<li>
<figure>
@@ -1861,59 +1885,59 @@ Inline vertical
...
</div>
</div>
-
-
-
-
1.67:1
-
-
-
- -
-
-
-
-
- First photo from Rīga
-
-
- -
-
-
-
-
- Second photo from Rīga
-
-
- -
-
-
-
-
- Third photo from Rīga
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
1.67:1
+
+
+
+ -
+
+
+
+
+ First photo from Rīga
+
+
+ -
+
+
+
+
+ Second photo from Rīga
+
+
+ -
+
+
+
+
+ Third photo from Rīga
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
-
-
-
-
<div class="n-carousel n-carousel--lightbox n-carousel--aspect n-carousel--thumbnails" style="--ratio: 1">
+
+
<div class="n-carousel n-carousel--lightbox n-carousel--aspect n-carousel--thumbnails" style="--ratio: 1">
<ul class="n-carousel__content">
<li>
<figure>
@@ -1948,64 +1972,64 @@ 1.67:1
...
</div>
</div>
+
-
-
-
1.67:1 vertical
-
-
- -
-
-
-
-
- First photo from Paris
-
-
- -
-
-
-
-
- Square
-
-
- -
-
-
-
-
- Second photo from Paris
-
-
- -
-
-
-
-
- Third photo from Paris
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
1.67:1 vertical
+
+
+ -
+
+
+
+
+ First photo from Paris
+
+
+ -
+
+
+
+
+ Square
+
+
+ -
+
+
+
+
+ Second photo from Paris
+
+
+ -
+
+
+
+
+ Third photo from Paris
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
<div class="n-carousel n-carousel--lightbox n-carousel--aspect n-carousel--thumbnails n-carousel--vertical" style="--ratio: 1.67">
+
+
<div class="n-carousel n-carousel--lightbox n-carousel--aspect n-carousel--thumbnails n-carousel--vertical" style="--ratio: 1.67">
<ul class="n-carousel__content">
<li>
<figure>
@@ -2043,39 +2067,39 @@ 1.67:1 vertical
...
</div>
</div>
+
-
-
-
Detached nav
-
-
- -
-
-
-
-
- First photo from Corsica
-
-
- -
-
-
-
-
- Second photo from Corsica
-
-
- -
-
-
-
-
- Third photo from Corsica
-
-
-
-
-
-
-
<div class="n-carousel n-carousel--lightbox" id="carousel-detached">
+
+
<div class="n-carousel n-carousel--lightbox" id="carousel-detached">
<ul class="n-carousel__content">
<li>
<figure>
@@ -2106,67 +2130,67 @@ Detached nav
<div class="n-carousel__next" data-for="carousel-detached">
<button><span>Next</span></button>
</div>
-
-
-
-
-
-
-
-
-
-
-
Peeking at neighboring slides
-
-
- -
-
-
-
-
- First photo from San Francisco
-
-
- -
-
-
-
-
- Second photo from San Francisco
-
-
- -
-
-
-
-
- Third photo from San Francisco
-
-
-
-
+
+
-
+
-
-
-
-
+
+
+
+
Peeking at neighboring slides
+
+
+ -
+
+
+
+
+ First photo from San Francisco
+
+
+ -
+
+
+
+
+ Second photo from San Francisco
+
+
+ -
+
+
+
+
+ Third photo from San Francisco
+
+
+
+
+
+
+
+
+
+
+
-
-
-
<div class="n-carousel n-carousel--lightbox n-carousel--peek n-carousel--thumbnails">
+
+
<div class="n-carousel n-carousel--lightbox n-carousel--peek n-carousel--thumbnails">
<ul class="n-carousel__content">
<li>
<figure>
@@ -2183,21 +2207,21 @@ Peeking at neighboring slides
...
</div>
</div>
+
-
-
-
Auto height
-
-
- -
-
-
-
-
- First Toronto photo
-
-
-
- -
-
-
-
-
- Second Toronto photo
-
-
- -
-
-
-
-
- Third Toronto photo
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
+
+
+ Second Toronto photo
+
+
+
-
+
+
+
+
+ Third Toronto photo
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
<div class="n-carousel n-carousel--lightbox n-carousel--auto-height n-carousel--thumbnails">
+
+
<div class="n-carousel n-carousel--lightbox n-carousel--auto-height n-carousel--thumbnails">
<ul class="n-carousel__content">
<li>
<figure>
@@ -2304,65 +2328,65 @@ Auto height
...
</div>
</div>
-
-
-
-
Auto height – vertical
-
-
- -
-
-
-
-
- First New York photo
-
-
- -
-
-
-
-
- Second New York photo
-
-
- -
-
-
-
-
- Third New York photo
-
-
- -
-
-
-
-
- Fourth New York photo
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
Auto height – vertical
+
+
+ -
+
+
+
+
+ First New York photo
+
+
+ -
+
+
+
+
+ Second New York photo
+
+
+ -
+
+
+
+
+ Third New York photo
+
+
+ -
+
+
+
+
+ Fourth New York photo
+
+
+
+
+
+
+
+
+
+
+
-
-
-
<div class="n-carousel n-carousel--lightbox n-carousel--auto-height n-carousel--thumbnails n-carousel--vertical">
+
+
<div class="n-carousel n-carousel--lightbox n-carousel--auto-height n-carousel--thumbnails n-carousel--vertical">
<ul class="n-carousel__content">
<li>
<figure>
@@ -2379,146 +2403,146 @@ Auto height – vertical
...
</div>
</div>
+
-
-
-
-
Options
-
- - This component inherits the carousel
-
-
-
-
-
-
-
-
Tables
-
-
-
Default
-
-
-
- TheTableWillBeScrollableOnNarrowScreensBecauseOfWideCell |
- One Time |
- Second Long col |
- Three |
- Four |
-
-
-
- B |
- 3 |
- ✔︎ |
- ✔︎ |
- ✔︎ |
-
-
- Row Two with Long Headline to Test Table on Narrow Screens |
- 1 |
- ✔︎ |
- ✔︎ |
- ✔︎ |
-
-
- A |
- 2 |
- ✔︎ |
- ✔︎ |
- ✔︎ |
-
-
-
-
<table class="n-table">
- <thead>
- <tr>
- <td>Head</td>
- ...
- </tr>
- </thead>
- <tr>
- <td>First</td>
- ...
- </tr>
- ...
-</table>
+
+
+
Options
+
+ - This component inherits the carousel
+
-
-
Wide
-
-
+
+
+
+
+
Tables
+
+
+
Default
+
- First |
- Second |
- Third |
+ TheTableWillBeScrollableOnNarrowScreensBecauseOfWideCell |
+ One Time |
+ Second Long col |
+ Three |
+ Four |
+ B |
+ 3 |
+ ✔︎ |
+ ✔︎ |
+ ✔︎ |
+
+
+ Row Two with Long Headline to Test Table on Narrow Screens |
+ 1 |
✔︎ |
✔︎ |
✔︎ |
+ A |
+ 2 |
✔︎ |
✔︎ |
✔︎ |
-
-
-
<div class="n-table--wide">
- <table class="n-table">
+
+
<table class="n-table">
+ <thead>
<tr>
- <td>First</td>
+ <td>Head</td>
...
</tr>
+ </thead>
+ <tr>
+ <td>First</td>
...
- </table>
-</div>
-
-
-
-
Sortable
-
-
+ </tr>
+ ...
+</table>
+
+
+
+
Wide
+
+
+
<div class="n-table--wide">
+ <table class="n-table">
+ <tr>
+ <td>First</td>
+ ...
+ </tr>
+ ...
+ </table>
+</div>
+
+
+
+
Sortable
+
+
+
+ |
+ |
+ |
+
+
+
+ Bee |
+ 3 |
+ 7 |
+
+
+ Candy |
+ 1 |
+ 6 |
+
+
+ Asteroid |
+ 4 |
+ 9 |
+
+
+ Emily |
+ 0 |
+ 8 |
+
- |
- |
- |
+ Due |
+ 2 |
+ 5 |
-
-
- Bee |
- 3 |
- 7 |
-
-
- Candy |
- 1 |
- 6 |
-
-
- Asteroid |
- 4 |
- 9 |
-
-
- Emily |
- 0 |
- 8 |
-
-
- Due |
- 2 |
- 5 |
-
-
-
-
<table class="n-table">
+
+
+
<table class="n-table">
<thead>
<tr>
<td><button class="n-table__sort">Head</button></td>
@@ -2531,90 +2555,90 @@ Sortable
</tr>
...
</table>
+
-
-
-
-
-
-
+
+
+
+
+
-
+
-
-
+
+
-
+
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-
+
-
+
-
-
<div class="n-accordion">
+
+
<div class="n-accordion">
<input type="checkbox">
<h2 class="n-accordion__label"> <button> Accordion </button></h2>
<div class="n-accordion__content">
...
</div>
</div>
-
-
-
-
-
-
-
-
-
-
-
<div class="n-accordion">
+
+
+
+
+
+
+
+
+
+
<div class="n-accordion">
<input type="checkbox" checked="true">
<h2 class="n-accordion__label" aria-expanded="true"> <button> Accordion </button></h2>
<div class="n-accordion__content">
...
</div>
</div>
+
-
-
-
-
-
-
-
-
Content 1
-
Link fourth.
+
+
-
-
-
-
-
Content 2
-
Link fifth.
+
-
-
-
-
<div role="group">
+
+
<div role="group">
<div class="n-accordion">
...
</div>
@@ -2623,33 +2647,33 @@ Accordion
</div>
...
</div>
+
-
-
-
-
-
-
-
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-
Link seventh.
+
+
+
+
+
+
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
Link seventh.
+
-
-
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-
Link eighth.
+
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
Link eighth.
+
-
-
-
<div class="n-accordion">
+
+
<div class="n-accordion">
<input type="checkbox">
<h2 class="n-accordion__label">
<button>Title</button>
@@ -2660,141 +2684,141 @@ Accordion
</div>
</div>
</div>
-
-
-
-
Popin
-
-
-
-
<div class="n-accordion__popin" role="group">
+
+
Popin
+
+
+
+
<div class="n-accordion__popin" role="group">
<div class="n-accordion">
...
</div>
...
</div>
+
-
-
-
Mobile accordion
-
+
+
Mobile accordion
+
-
-
+
+
-
+
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-
+
-
+
-
-
<div class="n-accordion">
+
+
<div class="n-accordion">
<input type="checkbox">
<h2 class="n-accordion__label"> <button> Accordion </button></h2>
<div class="n-accordion__content">
...
</div>
</div>
+
-
-
-