Styleguide
Typography
Paragraph
Lorem ipsum Nostrud Duis minim Ut id incididunt deserunt consequat id irure nostrud voluptate aliquip Ut eu aliqua eu sed anim aute laborum est officia consectetur irure aliquip ex veniam laboris cillum Duis occaecat fugiat adipisicing ex in dolore ullamco ad ullamco velit nisi irure ad tempor minim fugiat fugiat aute Excepteur in id culpa id velit proident commodo enim cillum Ut quis dolor cillum enim ullamco est in eu laboris Ut Excepteur nisi aliquip occaecat deserunt incididunt eiusmod aute Excepteur Excepteur non ut ut fugiat nostrud laboris dolore Excepteur id qui eiusmod esse mollit fugiat eiusmod dolore quis quis aliquip reprehenderit sint commodo dolore proident officia Duis eiusmod esse cupidatat id consequat aliqua Excepteur dolore tempor consequat laboris dolore sit aliqua eu sed dolore laboris ad tempor et in incididunt dolore dolor irure anim adipisicing cillum dolor in laborum laboris veniam voluptate Ut irure ad dolor irure in ex sint dolor deserunt ut adipisicing est pariatur Excepteur dolore ullamco pariatur in non Excepteur mollit consequat laborum ullamco reprehenderit ea id ut anim ex consectetur occaecat.
Inline text elements
This line rendered as bold text.
This line rendered as italicized text.
This line of text is meant to be treated as fine print.
Lists
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Aenean sit amet erat nunc
- Eget porttitor lorem
- Consectetur adipiscing elit
- Nulla volutpat aliquam velit
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Eget porttitor lorem
Buttons
General Styles
Additional Options
Icons
- icon-arrow-large
- icon-arrow-large-filled-l
- icon-arrow-large-filled-r
- icon-checkmark
- icon-chevron-d
- icon-chevron-l
- icon-chevron-r
- icon-chevron-u
- icon-close
- icon-download
- icon-external
- icon-filter
- icon-language
- icon-search
Tables
This section also has a dark background theme applied.
| # | First Name | Last Name | Username |
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Forms
Marketo
Marketo markup would look something like:
See the commented out code below this in the inspector or source code. Twig didn't want to render it as markup, without going further down the rabbit hole.
Basic Form
For projects not using Marketo, here are some basic field types.
Grid Column Examples
Single Columns
1 Column - 12col / 100%
1 Column - 11col / 91.66%
1 Column - 10col / 83.33%
1 Column - 9col / 75%
1 Column - 8col / 66.66%
1 Column - 7col / 58.33%
1 Column - 6col / 50%
1 Column - 5col / 41.66%
1 Column - 4col / 33.33%
1 Column - 3col / 25%
1 Column - 2col / 16.66%
1 Column - 1col / 8.33%
Multi Columns
Not showing all column variations, but follow a similar pattern as below to create multi-column layouts.
6col / 50%
6col / 50%
3col / 25%
9col / 75%
Columns Offsets
Not showing all column variations, but follow a similar pattern as below to create multi-column layouts.