A New Perspective: Image container with aspect ratio of 2.35:1

Lido

Lightbox Image Gallery

Full screen

Vertical

Video Is Looking Good

Turn the Tables

Short title One Time Second Long col Three Four
Row One
Row Two with Long Headline to Test Table on Narrow Screens
TheTableWillBeScrollableOnNarrowScreensBecauseOfWideCell One Time Second Long col Three Four
B 3
Row Two with Long Headline to Test Table on Narrow Screens 1
A 2

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Row on: Wrapping Grid

Use a grid with arbitrary cell elements inside .row.
Use vertical alignment in cells, it's finally easy and dependable.



Embed any kind of element into any container-type element: Cell, List, Slider, Accordion.
Vertical row as tall as the parent row with equal-height full-width children
The grid is simpler and doesn't insist on the infamous 12 cols. Just add a div to a .row. Width classes, like .col23, are optional.
This text has a tooltip. Here is the tooltip
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ThisLineIsTooLongAndMustBeClippedByTheContainerEvenThoughOverflowXandYDontWorkAsExpected
Show external domain content in a modal window. (On PHP enabled host)

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

Buttons

Small button

Big button

Here is an Inline button inside a paragraph.

Grid with borders

Middle
Full width
Top
Center Bottom
Right
Right

Nested Ordered List

  1. How to make a natUIve page
    1. Copy the contents of the dist folder in your site's root folder
    2. Edit index.html there
  2. Did you know?

    An in-house study at Walmart.com came out with the results that saw an up to 2% increase in conversions on the site for every single second of improvement on the load time. The accumulative growth of revenues went up to 1% for every 100 milliseconds of load time improvement.

    1. Supporting IE8+, Chrome, Safari, Firefox, Opera.
    2. Supporting iOS and Android tablets and phones.
      1. No hardcoded dimensions except line height.
        • Unordered one
        • Unordered two
      2. The slider only needs a .slider > div structure and is fully flexible.

Tabs

natUIve guarantees instant loading, because

"The value of 14 KB has been measured empirically by Google and is the threshold for the first package exchanged between a server and client via towers on a cellular connection." – Smashing Magazine

Slider 2 Slide 2

Second Slider 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Slider 2 Very Long Title which Shows the Flexible tabs Dimensions

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.


Tab 1

Content of Tab 1

Tab 2

And the content of Tab 2
new line
new line

Forms in Slider

A very long piece of label text which wraps to another line
Check this
Datalist examples
Please choose:
Check this

Text

Text

Text

Text

Fixed background

takes up the full window and is visible only through the current section.

Masonry in CSS only

Cards

Title

Card content.

Link.

Title

Card content.

Link.
Image

Card content.

Link.

natUIve Showcase

Malleable by Design