Front

Collection of front end components

Screens

Top

Typography

System font regular

ABCDEFGHIJKLMNOPQRSTUVYXYZ
abcdefghijklmnopqrstuvwhyz
1234567890

System font bold

ABCDEFGHIJKLMNOPQRSTUVYXYZ
abcdefghijklmnopqrstuvwhyz
1234567890

Headings

h1. The quick brown fox jumps over the lazy dog

h2. The quick brown fox jumps over the lazy dog

h3. The quick brown fox jumps over the lazy dog

h4. The quick brown fox jumps over the lazy dog

h5. The quick brown fox jumps over the lazy dog
h6. The quick brown fox jumps over the lazy dog

Body text

Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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.

Blockquotes

Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Unordered lists

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Cras in mi at felis aliquet congue.

Ordered lists

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Cras in mi at felis aliquet congue.
Top

Colors

.bg-black
.text-black

.bg-white
.text-white

$brand-primary
.bg-primary
.text-primary

$brand-success
.bg-success
.text-success

$brand-danger
.bg-danger
.text-danger

Top

Buttons

Function

Different button styles and colors are used as tools to clarify which kind of action can user expect.

Black Primary Success Danger Link Outline black Outline primary Outline success Outline danger

Size

Xs Sm Default Lg

Tags

Link
Top

Badges

Function

Black Primary Success Danger

Style

Standard Pill
Top

Icons

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
Top

List group

Function

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Top

Alerts
Top

Inputs

Size

Input groups

States

Example help text that remains unchanged.
Example help text that remains unchanged.
Example help text that remains unchanged.
Top

Spinner

Centered

inline

Spinner description...
Top

Dropdown

Action Another action Something else here
Top

Collapse

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Top

Fade

Toggle fade

Front

Collection of front end components

Toggle fade
Top

Animate

Toggle animate

Front

Collection of front end components

Toggle animate

in: slideInLeft slideInRight slideInUp slideInDown fadeIn
out: slideOutLeft slideOutRight slideOutUp slideOutDown fadeOut
UI: tada shake
Top

Body overflow

Toggle body overflow
Top

Tooltips
Top

Tabs

1...
2...
3...
4...
Top

Popovers
Top
flickity.metafizzy.co

Front

Collection of front end components

Front

Collection of front end components
Top

Type scale

Font size

.u-f-headline .u-lh-solid Title

.u-f-subheadline .u-lh-title Title

.u-f1 .u-lh-title Title

.u-f2 .u-lh-copy Title

.u-f3 .u-lh-copy Title

.u-f4 .u-lh-copy Title

.u-f5 .u-lh-copy Title

.u-f6 .u-lh-copy Title
Top

Font weight

.u-normal

.u-b

.u-fw1

.u-fw2

.u-fw3

.u-fw4

.u-fw5

.u-fw6

.u-fw7

.u-fw8

.u-fw9
Top

Text transform

Capitalize

Lowercase

Uppercase

None
Top