Basic layout items

Link Example

Paragraph:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae felis sit amet nunc mollis varius. Nunc accumsan augue euismod nibh tempus, id porttitor nibh egestas. Proin pellentesque enim eget velit ornare, nec vehicula tortor aliquet. Fusce a lectus at nisl gravida convallis non quis dolor. Proin eget enim venenatis, ultricies eros bibendum, egestas lectus. Ut facilisis, turpis a euismod dictum, odio nisl rhoncus diam, sed mollis neque nisi at augue. Donec ultricies metus sed blandit convallis. Sed ornare leo ut velit interdum, et porttitor mauris lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed in hendrerit sapien. Aenean ultricies lacus ac est egestas, at porta neque varius.

Div:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae felis sit amet nunc mollis varius. Nunc accumsan augue euismod nibh tempus, id porttitor nibh egestas. Proin pellentesque enim eget velit ornare, nec vehicula tortor aliquet. Fusce a lectus at nisl gravida convallis non quis dolor. Proin eget enim venenatis, ultricies eros bibendum, egestas lectus. Ut facilisis, turpis a euismod dictum, odio nisl rhoncus diam, sed mollis neque nisi at augue. Donec ultricies metus sed blandit convallis. Sed ornare leo ut velit interdum, et porttitor mauris lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed in hendrerit sapien. Aenean ultricies lacus ac est egestas, at porta neque varius.
Headers:

This is an H1

This is an H2

This is an H3

This is an H4

This is an H5
This is an H6
Basic span example

This is a Code example.

To switch directories, type cd followed by the name of the directory. To edit settings, press ctrl + ,

<p>Sample text here...</p>
y = mx + b

This text is meant to be treated as sample output from a computer program.

This text is highlighted based on the call to action color.


Abbreviation

Small Balloon Left


Medium Balloon Right


Large Balloon Up


Extra Large Balloon Down


Default Balloon


Extra small text


Small text


Large text


Extra large text


Case

LOWER CASE


upper case


capitalize case


Alignment

Left aligned div

Right aligned div

Center aligned div
Left aligned text
Right aligned text
Center aligned text
Justified aligned text
No wrap text

Border

Border left

Border right

Border top

Border bottom

Bordered

Depth/Box Shadow

Depth 1
Depth 2
Depth 3
Depth 4
Depth 5

Progress Bars

Progress Bar With Value



Meter With Value



Progress Bar Without Value

Meter Without Value




Image Shapes

Responsive Images


Rounded

Circle

Thumbnail

Figure surrounding an image

This caption is placed after the image.

Spinner


Icons

Clarity uses Font Awesome as its icon/glyph set. Below are a few examples of the icons offered. In order to view more options, visit the Ionicons website.

Expand icon
Email
Person
Github

Contextual Backgrounds/Items

Background colors

Primary Links look like this
Active Links look like this
Info Links look like this
Warning Links look like this
Error Links look like this
Success Links look like this

Labels

Default Primary Active Info Warning Error Success

Badges

Some info with a 'badge' 25
Some info with a 'badge' 25
Some info with a 'badge' 25
Some info with a 'badge' 25
Some info with a 'badge' 25
Some info with a 'badge' 25
Some info with a 'badge' 25

Labels with Badges

Default 25 Primary 25 Active 25 Info 25 Warning 25 Error 25 Success 25

Alerts

×Default
Primary
Active
Info
Warning
Error
Success

Panels

This is an example panel
This is an example panel with a table
Header 1 Header 2 Header 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Footer 1 Footer 2 Footer 3
×This is an example of a closable panel
This is an example panel
This is an example footer
This is an example panel with a list grouping
×This is an example header
This is an example panel
This is an example footer
×This is an example header
This is an example of a primary panel
This is an example footer
×This is an example header
This is an example of a active panel
This is an example footer
×This is an example header
This is an example of a info panel
This is an example footer
×This is an example header
This is an example of a warning panel
This is an example footer
×This is an example header
This is an example of an error panel
This is an example footer
×This is an example header
This is an example of a success panel
This is an example footer
This is an example header
This is an example panel with a close button

Tables

Default Table

Example caption
Header 1 Header 2 Header 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Footer 1 Footer 2 Footer 3

No Border Table

Header 1 Header 2 Header 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Footer 1 Footer 2 Footer 3

Horizontal Table

Header 1 Header 2 Header 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Footer 1 Footer 2 Footer 3

Vertical Table

Header 1 Header 2 Header 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Footer 1 Footer 2 Footer 3

Hoverable Table

Example caption
Header 1 Header 2 Header 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Footer 1 Footer 2 Footer 3

Bordered Table

Example caption
Header 1 Header 2 Header 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Footer 1 Footer 2 Footer 3

Condensed Table

Example caption
Header 1 Header 2 Header 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Footer 1 Footer 2 Footer 3

Row/Cell Examples Table

Example caption
Header 1 Header 2 Header 3 Header 4 Header 5
Primary Item 1 Item 2 Item 3 Item 4
Active Item 1 Item 2 Item 3 Item 4
Success Item 1 Item 2 Item 3 Item 4
Info Item 1 Item 2 Item 3 Item 4
Warning Item 1 Item 2 Item 3 Item 4
Error Item 1 Item 2 Item 3 Item 4
Active Success Info Warning Error
Footer 1 Footer 2 Footer 3 Footer 4 Footer 5

Block Quotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Reversed Block Quotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Descriptions

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Horizontal Descriptions

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Pagination

Paged

Chevron

Dotted

Lists

Unordered list

Unstyled unordered list

Grouped list


Inline unordered list

Breadcrumb list

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Checklist

Arrow

Step list

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae felis sit amet nunc mollis varius. Nunc accumsan augue euismod nibh tempus, id porttitor nibh egestas. Proin pellentesque enim eget velit ornare, nec vehicula tortor aliquet. Fusce a lectus at nisl gravida convallis non quis dolor. Proin eget enim venenatis, ultricies eros bibendum, egestas lectus. Ut facilisis, turpis a euismod dictum, odio nisl rhoncus diam, sed mollis neque nisi at augue. Donec ultricies metus sed blandit convallis. Sed ornare leo ut velit interdum, et porttitor mauris lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed in hendrerit sapien. Aenean ultricies lacus ac est egestas, at porta neque varius.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae felis sit amet nunc mollis varius. Nunc accumsan augue euismod nibh tempus, id porttitor nibh egestas. Proin pellentesque enim eget velit ornare, nec vehicula tortor aliquet. Fusce a lectus at nisl gravida convallis non quis dolor. Proin eget enim venenatis, ultricies eros bibendum, egestas lectus. Ut facilisis, turpis a euismod dictum, odio nisl rhoncus diam, sed mollis neque nisi at augue. Donec ultricies metus sed blandit convallis. Sed ornare leo ut velit interdum, et porttitor mauris lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed in hendrerit sapien. Aenean ultricies lacus ac est egestas, at porta neque varius.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae felis sit amet nunc mollis varius. Nunc accumsan augue euismod nibh tempus, id porttitor nibh egestas. Proin pellentesque enim eget velit ornare, nec vehicula tortor aliquet. Fusce a lectus at nisl gravida convallis non quis dolor. Proin eget enim venenatis, ultricies eros bibendum, egestas lectus. Ut facilisis, turpis a euismod dictum, odio nisl rhoncus diam, sed mollis neque nisi at augue. Donec ultricies metus sed blandit convallis. Sed ornare leo ut velit interdum, et porttitor mauris lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed in hendrerit sapien. Aenean ultricies lacus ac est egestas, at porta neque varius.

Menus

Vertical Menu Using Nav Tag

Vertical Menu With Icons

Horizontal Menu

Selected, Active, and Disabled Items

My Header





Pill Menu

Menu With Backgrounds

Forms

Legend

Input item examples:

Button examples:





Aligned Form

Legend

Stacked Form

Legend

Input Group


Form Validation


Flex Wrapping Behavior

Wrap

1
2
3

No Wrap

1
2
3

Flex Direction

Row

1
2
3

Column

1
2
3

Reverse Row

1
2
3

Reverse Column

1
2
3

Flex Justify

Start

1
2
3

End

1
2
3

Center

1
2
3

Space Between

1
2
3

Space Around

1
2
3

Flex Align Items

Start

1
2
3

End

1
2
3

Center

1
2
3

Baseline

1
2
3

Stretch

1
2
3

Flex Align Individual Items

Start

1
2
3

End

1
2
3

Center

1
2
3

Baseline

1
2
3

Stretch

1
2
3

Flex Align Content

Start

1
2
3

End

1
2
3

Center

1
2
3

Space Between

1
2
3

Space Around

1
2
3

Stretch

1
2
3

Flex Item Sizes

All sizes are relative to other items

1
2
3
4
5
6
7
8
9
10

Hidden/Display on Each Device

Shown on desktop
Shown on tablet landscape
Shown on tablet portrait
Shown on mobile landscape
Shown on mobile portrait

Vue Components

Modal

Header text
Body text would go here
Footer text here

Alert

You successfully clicked the button. Yay or something.

Content Loader

Simple Editor

Grid

Tabs

{{result.title}}

{{result.info}}

Vertical Tabs

{{result.title}}

{{result.info}}

Form Validation

The following errors were found

Form Generator

DANGER! DANGER WILL ROBINSON!
Model

            
Schema

            

            
Result

            
{{ result }}