Catalog
A catalog of Assembly variations for reference and debugging purposes.
Typography
Styled with prose
Styled with classes
Aenean Elit Parturient Malesuada Euismod
Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla.
Sollicitudin Inceptos Ullamcorper Lorem
- Nullam quis risus eget urna mollis ornare vel eu leo.
- Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
- Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit.
Sit Nullam Elit
Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.Cras mattis consectetur purus sit amet fermentum.
Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Sit Nullam Elit
Sit Nullam Elit
Aenean Elit Parturient Malesuada Euismod
Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla.
Sollicitudin Inceptos Ullamcorper Lorem
Nullam quis risus eget urna mollis ornare vel eu leo.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit.
Sit Nullam Elit
Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Cras mattis consectetur purus sit amet fermentum.
Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Sit Nullam Elit
Sit Nullam Elit
Grid
Standard controlled grid
w-full
w-11/12
w-1/12
w-5/6
w-1/6
w-3/4
w-1/4
w-2/3
w-1/3
w-7/12
w-5/12
w-1/2
w-1/2
w-1/3
w-1/3
w-1/3
w-1/4
w-1/4
w-1/2
w-1/6
w-1/6
w-2/3
w-1/12
w-1/6
w-3/4
Grid with gutters
w-full
w-11/12
w-1/12
w-5/6
w-1/6
w-3/4
w-1/4
w-2/3
w-1/3
w-7/12
w-5/12
w-1/2
w-1/2
w-1/3
w-1/3
w-1/3
w-1/4
w-1/4
w-1/2
w-1/6
w-1/6
w-2/3
w-1/12
w-1/6
w-3/4
Grid with left offset
w-full
w-11/12
w-5/6
w-3/4
w-2/3
w-7/12
w-1/2
w-1/3
w-1/3
w-1/4
w-1/2
w-1/6
w-2/3
w-1/12
w-3/4
Grid with right offset
w-full
w-11/12
w-5/6
w-3/4
w-2/3
w-7/12
w-1/2
w-1/3
w-1/3
w-1/4
w-1/2
w-1/6
w-2/3
w-1/12
w-3/4
Grids only on large screens
w-1/2-ml
w-1/4-ml
w-1/4-ml
Flexbox
Standard flex children
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Set-width flex children
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
One set-width flex child, the other with long text
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
One set-width flex child, the other with short text
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Duis mollis.
One set-width flex child and a growing child with long text
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
One set-width flex child and a growing child with short text
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Duis mollis.
Bleeds
Right bleed
Left bleed
Right bleed at xl
Right bleed until xl
Tables
Unstyled
| Column 1 | Column 1 |
|---|---|
| item | item |
| item | item |
Classed
| Column 1 | Column 1 |
|---|---|
| item | item |
| item | item |
| Row 1 | item | item |
|---|---|---|
| Row 2 | item | item |
| Row 3 | item | item |
| Column 1 | Column 1 |
|---|---|
| item | item |
| item | item |
| Row 1 | item | item |
|---|---|---|
| Row 2 | item | item |
| Row 3 | item | item |
Inside prose
| Column 1 | Column 1 |
|---|---|
| item | item |
| item | item |
| Row 1 | item | item |
|---|---|---|
| Row 2 | item | item |
| Row 3 | item | item |
| Column 1 | Column 1 |
|---|---|
| item | item |
| item | item |
| Row 1 | item | item |
|---|---|---|
| Row 2 | item | item |
| Row 3 | item | item |
Lists
unstyled
Unordered
- Unordered list item
- Unordered list item
- Ordered child
- Ordered child
- Unordered list item
- Unordered list item
- Unordered child
- Unordered child
- Unordered list item
Ordered
- Ordered list item
- Ordered list item
- Ordered child
- Ordered child
- Ordered list item
- Ordered list item
- Unordered child
- Unordered child
- Unordered child
- Unordered child
- Ordered list item
txt-ol/ul
- Unordered list item
- Unordered list item
- Ordered child
- Ordered child
- Unordered list item
- Unordered list item
- Unordered child
- Unordered child
- Unordered list item
Ordered (with classes)
- Ordered list item
- Ordered list item
- Ordered child
- Ordered child
- Ordered list item
- Ordered list item
- Unordered child
- Unordered child
- Unordered child
- Unordered child
- Ordered list item
Prose
Unordered
- Unordered list item
- Unordered list item
- Ordered child
- Ordered child
- Unordered list item
- Unordered list item
- Unordered child
- Unordered child
- Unordered list item
Ordered
- Ordered list item
- Ordered list item
- Ordered child
- Ordered child
- Ordered list item
- Ordered list item
- Unordered child
- Unordered child
- Unordered child
- Unordered child
- Ordered list item
Links
Standard
Underline on hover
Active
Click me!
Click me!
Active
Click me!
Click me!
Active
Click me!
Click me!
Active
Click me!
Click me!
Active
Click me!
Click me!
Active
Click me!
Click me!
Active
Click me!
Click me!
Active
Click me!
Click me!
Active
Click me!
Click me!
Active
Click me!
Click me!
Active
Click me!
Click me!
Active
Click me!
Click me!
Active
Click me!
Click me!
Active
Click me!
Click me!
Active
Click me!
Click me!
Active
Click me!
Click me!
Active
Click me!
Click me!
Active
Buttons
Button pills
Text inputs
Border colors
Disabled
Readonly
Additional input types
Textareas
Border colors
Disabled
Readonly
Selects
Ranges
Color variations
Disabled
Small
Toggles
Color and active text color variations
Disabled
Small
Light variations
Disabled and light