UI Seed v0.3.1-beta

Sandbox

Testing UI Seed, a front-end framework.

Headings

This is an h1 heading

This is an h2 heading Label success

This is an h3 heading

This is an h4 heading

This is an h5 heading
This is an h6 heading
This is an alt heading
This is a deco heading

Lead

This is a lead paragraph. Morbi eget mattis ipsum. Donec massa nibh, bibendum at sit amet ipsum.

Inline text elements

Highlight. Deleted. Innacurate or irrelevant.

Added. Underlined. Small text.

Bold. Italicized.

The abbr tag is used to represent an abbreviation.

Blockquotes

As my fellow HTML5 Doctor, Oli Studholme has showed, people seldom quote exactly – so sacrosanctity of the quoted text isn’t a useful ideal – and in print etc, citations almost always appear as part of the quotation – it’s highly conventional.

As my fellow HTML5 Doctor, Oli Studholme has showed, people seldom quote exactly – so sacrosanctity of the quoted text isn’t a useful ideal – and in print etc, citations almost always appear as part of the quotation – it’s highly conventional.

Dropcap

The dropcap is the capitalized first letter of a paragraph. It’s not for every occasion, but when the post/page starts with a paragraph that spans at least two full lines it should be added as it has a big impact on the look and feel of the post.

Lists

Unordered

  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
  3. Faucibus porta lacus fringilla vel
  4. Aenean sit amet erat nunc

Descriptive regular

Description list term
Description list description.
Euismod lorem ipsum dolor sit amet
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Third.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Yet another term
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Descriptive horizontal

Description list term
Description list description.
Euismod lorem ipsum dolor sit amet
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Third.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Yet another term
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Checklist

  • Check list item 1
  • Check list item 2
  • Check list item 3

Call-to-action list

  • Call-to-Action list item 1
  • Call-to-Action list item 2
  • Call-to-Action list item 3

Footnotes

  1. Footnote list item 1
  2. Footnote list item 2
  3. Footnote list item 3

Table list

Description list term
Description list description.
Euismod lorem ipsum dolor sit amet
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Third.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Yet another term
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Horizontal ruler


Tables

Regular

# Lorem Ipsum Dolor Sit Amet
1 Aliquam erat Volutpat Praesent
2 Aenean Finibus Accumsan
3 Phasellus Consequat Vivamus

Zebra

# Lorem Ipsum Dolor Sit Amet
1 Aliquam erat Volutpat Praesent
2 Aenean Finibus Accumsan
3 Phasellus Consequat Vivamus

Callout

This is a callout. It calls out and all.

Media

Global

Media example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis lectus quis facilisis bibendum. Mauris aliquet orci vitae sapien tempor varius fermentum id ex. Aenean sit amet porta eros, in egestas sapien. Morbi luctus sodales tincidunt. Morbi quis magna vitae ex pellentesque maximus. Sed nunc ipsum, volutpat et cursus non, tempor quis dui. Morbi pretium ornare commodo. Curabitur cursus libero sapien, eleifend imperdiet dui congue at. Duis nulla dolor, elementum vitae orci sed, varius eleifend mauris.

Media example

Sed bibendum turpis sem, nec lacinia tellus pulvinar a. Donec euismod, urna non ullamcorper posuere, mi sapien ornare libero, accumsan ornare massa enim sollicitudin diam. Sed vitae sodales mauris, vitae dictum lectus. Praesent at lectus sit amet eros mattis tincidunt. Integer eu massa sit amet tortor dapibus aliquam. Ut pretium pulvinar risus eu vulputate. Suspendisse potenti. Suspendisse mollis tortor sit amet venenatis condimentum. Nulla dapibus massa tellus, et cursus augue rhoncus in.

Media example

Sed bibendum turpis sem, nec lacinia tellus pulvinar a. Donec euismod, urna non ullamcorper posuere, mi sapien ornare libero, accumsan ornare massa enim sollicitudin diam. Sed vitae sodales mauris, vitae dictum lectus. Praesent at lectus sit amet eros mattis tincidunt. Integer eu massa sit amet tortor dapibus aliquam. Ut pretium pulvinar risus eu vulputate. Suspendisse potenti. Suspendisse mollis tortor sit amet venenatis condimentum. Nulla dapibus massa tellus, et cursus augue rhoncus in.

Figure

Image
Wow, this is a really cool caption!

Buttons

Navs

Toolbar

Toolbar label

Another label

Cards

Drops

This is a title
This is a title

This is a drop inset.

Powered by React

Panels (with scrollable area powered by React)

Modal

Loading

Forms

Fieldset legend 1

This is some help text.

Fieldset legend 2
Select

This is some random information. It uses form note styles.

Live long and prosper.

Fieldset legend 3
Prefix addon Another prefix addon
Suffix addon Suffix addon
Prefix addon

Code

Inline

This contains code rendered inline: <article>.

Preformatted

<p>Lorem ipsum dolor...</p>

User input

This contains instructions: lorem ipsum cd dolor sit ctrl + ,

Alerts

Block

Popover

Labels

Default Success Info Warning Danger
Default Negative Success Negative Info Negative Warning Negative