This is just some sample paragraph text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Sample Table
Table header | Table header |
---|---|
Table cell 1 | Table cell 1 |
Table cell 2 | Table cell 2 |
Table cell 3 | Table cell 3 |
Callout Styles
This is a Callout
Heading Style One
Heading Style Two
Heading Style Three
Heading Style Four
Heading Style Five
Heading Style Six
You can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something — your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life.Steve Jobs
Icon List Styles
- Check List
- Check List
- Check List
- Check List
- Cross List
- Cross List
- Cross List
- Cross List
- Star List
- Star List
- Star List
- Star List
- Warn List
- Warn List
- Warn List
- Warn List
- Info List
- Info List
- Info List
- Info List
- Arrow List
- Arrow List
- Arrow List
- Arrow List
- Plus List
- Plus List
- Plus List
- Plus List
- Minus List
- Minus List
- Minus List
- Minus List
- li.star
- li.cross or li.no
- li.info
- li.warn
- li.arrow
- li.check or li.yes
- li.plus
- li.minus
Wrapping two headings in the subheading class allows you to stack two headings while removing the default margins and combining into a single heading. The subheading
class enables you to produce the example below.
This is a subheading
Followed by another Heading
Source:
<div class="subheading"> <h3 class="dim90">This is a subheading</h3> <h4>Followed by another Heading</h4> </div>
Utility Classes
For fine-tuning your typography (and other block-level elements) you can also utilize the following CSS classes:
// Helper Typography Classes .brand // primary theme color .brand-alt // secondary theme color .brand-accent // tertiary theme color .italic // italic typeface .normal // normal font variant .bolder // boldest font variant .lighter // lightest font variant .serif // serif typeface .caps // all caps .tight // -1px letter kerning .tighter // -2px letter kerning .loose // 2px letter kerning .looser // 3px letter kerning .smalltext // small text .largetext // larger text .dim10 -.dim90 // shades of grey (10% - 90%) ul.square // square bullet list ul.circle // circle bullet list ul.disc // disc bullet list ul.check // check icon list ul.captionlist // captioned list // Typography and Block Level Helper Classes .remove-top // remove top margin/padding .remove-bottom // remove bottom margin/padding .pull-right // float an element right (requires clearing) .pull-left // float an element right (requires clearing) .margin5* // add margin *(5,10,20,30,40) .marginv5* // add vertical margin *(5,10,20,30,40) .pad5* // add padding *(5,10,20,30,40) .padv5* // add vertical padding *(5,10,20,30,40) .nopad // remove padding (and margin)