Form elements
Inputs
Error: Contact form not found.
Buttons
Typography
H1 Title
H2 Title
H3 Title
H4 Title
H5 Title
H6 title
Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales mi quis est pulvinar fermentum. Nunc id eros at eros egestas condimentum. Aliquam fringilla, magna id pulvinar posuere, leo nibh sagittis nisl, quis sagittis tellus mauris vitae felis. Aliquam ipsum dui, porttitor sit amet dapibus ut, dapibus et felis.
Integer semper tortor eget venenatis consequat. Etiam et tincidunt neque. Aenean bibendum, ligula eget dapibus luctus, diam nisl molestie elit, ut placerat eros elit a ligula. Nullam eget ipsum vitae nisi finibus pellentesque. Donec metus quam, malesuada quis massa vitae, aliquet porttitor nibh. Donec tristique auctor dictum. Quisque sed cursus est. Maecenas dapibus dolor ac bibendum venenatis. Nullam porta consequat diam, eu feugiat est.
- List
- Lorem
- Ipsum
- Dolor
- Ordered
- List
- Longer items:
- Integer semper tortor eget venenatis consequat. Etiam et tincidunt neque. Aenean bibendum, ligula eget dapibus luctus, diam nisl molestie elit, ut placerat eros elit a ligula. Nullam eget ipsum vitae nisi finibus pellentesque.
Table | Example | Lorem |
Ipsum | Dolor | Sit |
Amet | Integer | Semper |
Spacing
These are the available spacing sizes, for both properties (margin and padding) and all 4 dimensions (t, r, b, l), including sides (x and y), using the format [property]-[dimension]-[size]
8 | 16 | 24 | 32 | 40 |
48 | 56 | 64 | 72 | 80 |
Grid
The grid is available in 2, 3 and 4 spaces, using the class grid
along with a modifier class grid--[columns]
. A modifier for collapsed columns is also available, in the format grid--[columns]-collapse
Simple grid, just one column
Two columns
Two columns
Two columns, collapsed
Two columns, collapsed
Three columns
Three columns
Three columns
Three columns, collapsed
Three columns, collapsed
Three columns, collapsed
Four columns
Four columns
Four columns
Four columns
Four columns, collapsed
Four columns, collapsed
Four columns, collapsed
Four columns, collapsed
Cards
A card element is available for paneled content. It has four different border-radius properties to choose from, and no padding – padding can be added freely using the modifier classes.
No radius (.bond-card
)
Small radius (.bond-card.bond-card--rd-sm
)
Medium radius (.bond-card.bond-card--rd-md
)
Large radius (.bond-card.bond-card--rd-lg
)