| Font Family | Variable | Value | Usage |
|---|---|---|---|
| Lato Bold | @header-font | font-family: ‘Lato’, sans-serif | Headings |
| Lato | @body-font | font-family: ‘Lato’, sans-serif | Body |
ExpressUI uses Lato for both headings and body text. It should be specified otherwise when headings and body fonts differ. ExpressUI automatically imports Lato via Google Fonts
Assign margin and padding to headers to make sure they are spaced well against other elements
| Element | Demo | Notes |
|---|---|---|
<p></p> |
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. | Wraps block elements |
<a href="#" title=""></a> |
This is a text link | Always add a descriptive title attribute to links |
<strong></strong> |
I'm very important | Strong is used to indicate strong importance |
<em></em> |
I'm slightly important | Add emphasis |
<i></i> |
icon | For font icons |
<sup></sup> |
Rotate the image by 90º | Slightly elevate text above the normal line |
<small></small> |
Terms and conditions apply | For fine print |
<code></code> |
<html></html> | For inline code |
See list of deprecated tags at https://www.codehelp.co.uk/html/deprecated.html
Status labels can be used to denote the state of an item or page, e.g., when an item has incurred a “cancelled” or “successful” state.
The .ae-status class is required.
| Class | Demo | Usage |
|---|---|---|
.ae-status-success |
Success | Finished, done, successful, correct, |
.ae-status-cancelled or .ae-status-error |
Cancelled | Cancelled, alert |
.ae-status-pending |
Pending | Pending, ongoing, reminder, warning |
.ae-status-deleted |
Deleted | Deleted, removed |
Use badges to indicate the number of items for a specific notification or link.
The .ae-badge class is required.
| Class | Demo |
|---|---|
.ae-badge-success |
1 |
.ae-badge-cancelled or .ae-badge-error |
10 |
.ae-badge-pending |
100 |
.ae-badge-deleted |
1000 |
| Class | Value |
|---|---|
.ae-u-text-left |
text-align: left |
.ae-u-text-center |
text-align: center |
.ae-u-text-right |
text-align: right |
.ae-u-text-justify |
text-align: justify |
.ae-u-float-left |
float: left |
.ae-u-float-right |
float: right |