Typography
Headings
h1 Heading
h2 Heading
h3 Heading
h4 Heading
h5 Heading
Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum metus sem, ut tincidunt arcu convallis ut. Etiam lacinia sem vestibulum sapien feugiat laoreet. Duis id sodales lacus. Nulla euismod mollis luctus. Pellentesque vel ligula euismod, aliquam turpis mattis, faucibus sem. Integer et rutrum lacus. Proin pulvinar ac odio sed interdum. Etiam iaculis dolor massa, sed commodo lectus malesuada non. Morbi vehicula ante facilisis dignissim sodales.
For
highlighting a run of text due to its relevance in another context. Wrap the element in <mark>
For emphasizing a snippet of text with a heavier font-weight. Use the class
.u-text-bold
or wrap the element in <strong>
Ordered List <ol>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
Un-Ordered List <ul>
- Life isn’t about getting and having...
- Strive not to be a success...
- Whatever the mind of man can...
Buttons
Default buttons
Just icon buttons
Icon and label buttons
Small buttons
Big buttons
Dropdown buttons
Popup buttons
Ut tempor consectetur et aute adipisicing commodo.
Ut tempor consectetur et aute adipisicing commodo.
Ut tempor consectetur et aute adipisicing commodo.
Ut tempor consectetur et aute adipisicing commodo.
Ut tempor consectetur et aute adipisicing commodo.
Ut tempor consectetur et aute adipisicing commodo.
Popup big buttons
Ut tempor consectetur et aute adipisicing commodo.
Ut tempor consectetur et aute adipisicing commodo.
Ut tempor consectetur et aute adipisicing commodo.
Ut tempor consectetur et aute adipisicing commodo.
Ut tempor consectetur et aute adipisicing commodo.
Ut tempor consectetur et aute adipisicing commodo.
Ut tempor consectetur et aute adipisicing commodo.
Header buttons
Inputs
Single-line inputs
Multi-line inputs
Radio inputs
Checkbox inputs
Toggle inputs
Button toggle inputs
Date-time picker
Daterange picker
Select inputs
Color picker
Image picker
Charts
Datagrids
Simple datagrids
Cell formats
Custom cells
{{user.birth | formatDate : 'ddd DD MMM, YYYY'}}
Custom rows
{{i+1}}. {{user?.name}}
{{user?.birth | formatDate : 'ddd DD MMM, YYYY'}}