Style Guide
STYLE GUIDE
Humane Type in the Digital Age
January 25, 2016 · By Matej Latin .dateline
Thoughts on typography p.sc
An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts. p.attention-grabber; s/b lead
Account | Due Date | Amount | Period |
---|---|---|---|
Visa - 3412 | 04/01/2016 | $1,190 | 03/01/2016 - 03/31/2016 |
Visa - 3412 | 04/01/2016 | $1,190 | 03/01/2016 - 03/31/2016 |
Visa - 3412 | 04/01/2016 | $1,190 | 03/01/2016 - 03/31/2016 |
The typography of this industrial age was no longer handcrafted. Mass production and profit became more important. Quantity mattered more than the quality. The books and printed works in general lost a part of its humanity. The typefaces were not produced by craftsmen anymore. It was the machines printing and tying the books together now. The craftsmen had to let go of their craft and became a cog in the process. An extension of the industrial machine.
But the victory of the industrialism didn’t mean that the craftsmen were completely extinct. The two worlds continued to coexist independently. Each recognising the good in the other — the power of industrialism and the humanity of craftsmanship. This was the second transition that would strip typography of a part of its humanity. We have to go 500 years back in time to meet the first one.
The first transition .h2
A similar conflict emerged after the invention of the first printing press in Europe. Johannes Gutenberg invented movable type and used it to produce different compositions. His workshop could print up to 240 impressions per hour. Until then, the books were being copied by hand. All the books were handwritten and decorated with hand drawn ornaments and figures. A process of copying a book was long but each book, even a copy, was a work of art.
Epcot Center
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
The first printed books were, at first, perceived as inferior to the handwritten ones. They were smaller and cheaper to produce. Movable type provided the printers with flexibility that allowed them to print books in languages other than Latin. Gill describes the transition to industrialism as something that people needed and wanted. Something similar happened after the first printed books emerged. People wanted books in a language they understood and they wanted books they could take with them. They were hungry for knowledge and printed books satisfied this hunger.
But, through this transition, the book lost a large part of its humanity. The machine took over most of the process but craftsmanship was still a part of it. The typefaces were cut manually by the first punch cutters. The paper was made by hand. The illustrations and ornaments were still being hand drawn. These were the remains of the craftsmanship that went almost extinct in the times of Eric Gill.
The digital age
The first transition took away a large part of humanity from written communication. Industrialisation, the second transition described by Eric Gill, took away most of what was left. But it’s the third transition that stripped it naked. Typefaces are faceless these days. They’re just fonts on our computers. Hardly anyone knows their stories. Hardly anyone cares. Flicking through thousands of typefaces and finding the “right one” is a matter of minutes.
In the new computer age the proliferation of typefaces and type manipulations represents a new level of visual pollution threatening our culture. Out of thousands of typefaces, all we need are a few basic ones, and trash the rest.
Typography is not about typefaces. It’s not about what looks best, it’s about what feels right. What communicates the message best. Typography, in its essence, is about the message. “Typographical design should perform optically what the speaker creates through voice and gesture of his thoughts.”, as El Lissitzky, a famous Russian typographer, put it.
Loss of humanity through transitions .h2
Each transition took away a part of humanity from written language. Handwritten books being the most humane form and the digital typefaces being the least. Overuse of Helvetica is a good example. Messages are being told in a typeface just because it’s a safe option. It’s always there. Everyone knows it but yet, nobody knows it. Stop someone on the street and ask him what Helvetica is? Ask a designer the same question. Ask him where it came from, when, why and who designed it. Most of them will fail to answer these questions. Most of them used it in their precious projects but they still don’t spot it in the street.
Knowledge of the quality of a typeface is of the greatest importance for the functional, aesthetic and psychological effect. .figure
Typefaces don’t look handmade these days. And that’s all right. They don’t have to. Industrialism took that away from them and we’re fine with it. We’ve traded that part of humanity for a process that produces more books that are easier to read. That can’t be bad. And it isn’t.
Humane typography will often be comparatively rough and even uncouth; but while a certain uncouthness does not seriously matter in humane works, uncouthness has no excuse whatever in the productions of the machine. .blockquote
We’ve come close to “perfection” in the last five centuries. The letters are crisp and without rough edges. We print our compositions with high–precision printers on a high quality, machine made paper.
This is a h1 tag
This is a h2 tag
This is a h3 tag
This is a h4 tag
This is a h5 tag
This is a h6 tag
We lost a part of ourselves because of this chase after perfection. We forgot about the craftsmanship along the way. And the worst part is that we don’t care. The transition to the digital age made that clear. We choose typefaces like clueless zombies. There’s no meaning in our work. Type sizes, leading, margins… It’s all just a few clicks or lines of code. The message isn’t important anymore. There’s no more “why” behind the “what”.
Chasing perfection .h2
Human beings aren’t perfect. Perfection is something that will always elude us. There will always be a small part of humanity in everything we do. No matter how small that part, we should make sure that it transcends the limits of the medium. We have to think about the message first. What typeface should we use and why? Does the typeface match the message and what we want to communicate with it? What will be the leading and why? Will there be more typefaces in our design? On what ground will they be combined? What makes our design unique and why? This is the part of humanity that is left in typography. It might be the last part. Are we really going to give it up?
This is the primary heading and there should only be one of these per page
A small paragraph to emphasis and show important bits.
- This is a list item
- So is this - there could be more. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic voluptatem placeat incidunt, assumenda saepe iste laboriosam ipsa itaque eius tempore, quam suscipit perferendis, reiciendis delectus blanditiis earum enim, consequatur facere!
-
Make sure to style list items to:
- Not forgetting child list items
- Not forgetting child list items
- Not forgetting child list items
- Not forgetting child list items
- A couple more
- top level list items
Don't forget Ordered lists:
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-
Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
A sub heading which is not as important as the first, but is quite imporant overall .h2
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Rank | Movie | Downloads | Grosses |
---|---|---|---|
torrentfreak.com | |||
1 | Fast Five | 9,260,000 | $626,137,675 |
2 | The Hangover II | 8,840,000 | $581,464,305 |
3 | Thor | 8,330,000 | $449,326,618 |
4 | Source Code | 7,910,000 | $123,278,618 |
5 | I Am Number Four | 7,670,000 | $144,500,437 |
6 | Sucker Punch | 7,200,000 | $89,792,502 |
7 | 127 Hours | 6,910,000 | $60,738,797 |
8 | Rango | 6,480,000 | $245,155,348 |
9 | The King’s Speech | 6,250,000 | $414,211,549 |
10 | Harry Potter and the Deathly Hallows Part 2 | 6,030,000 | $1,328,111,219 |
A sub heading which is not as important as the second, but should be used with consideration. .h3
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
This is a properly formatted blockquote, btw. Measuring programming progress by lines of code is like measuring aircraft building progress by weight. .blockquote
A sub heading which is not as important as the second, but should be used with consideration .h4
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. 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.”
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
A sub heading which is not as important as the second, but should be used with consideration .h5
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- Definition list
- Consectetur adipisicing 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.
- Lorem ipsum dolor sit amet
-
Consectetur adipisicing 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.
- Spurious
-
/ˈsp(y)o͝orēəs/
- (of a line of reasoning) apparently but not actually valid. "this spurious reasoning results in nonsense"
- (of offspring) illegitimate.
This heading plays a relatively small bit part role, if you use it at all .h6
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Address: Example address 224, SwedenPreformated: it's spring and the goat-footed balloonMan whistles far and wee
I am the a tag example
I am the abbr tag example
I am the cite tag example
I am the code tag
example
I am the em tag example
I am the small tag example
I am the strong tag example
I am the sub tag example
I am the sup tag example
- Unordered list 01
- Unordered list 02
-
Unordered list 03
- Unordered list inside list level 2
-
Unordered list inside list level 2
- Unordered list inside list level 3
- Unordered list inside list level 3
- Ordered list 01
- Ordered list 02
-
Ordered list 03
- Ordered list inside list level 2
-
Ordered list inside list level 2
- Ordered list inside list level 3
- Ordered list inside list level 3
- Description list title 01
- Description list description 01
- Description list title 02
- Description list description 02
- Description list description 03
Default h1 heading
{ "cookies": {}, "request_url": { "href": "https://default.trialsite.co/style-guide", "origin": "https://default.trialsite.co", "protocol": "https", "hostname": "default.trialsite.co", "path": "/style-guide", "params": {}, "originalParams": {} }, "request_data": { "ip": "3.144.4.54", "is_mobile": 0, "user_agent": "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)", "referrer": "" }, "currentmember": "", "is_logged": false, "device_type": "Desktop", "timezone": { "label": "(UTC-06:00) Central Time (Regina)", "offset": -6.0 }, "system_recaptcha_sitekey": "6Ld5QIoUAAAAAKznGOlK7z6mgqJ8ajRUc3CK5M17" }
Lorem ipsum lead copy dolor sit amet, consectetur adipiscing elit. Phasellus lobortis est nec augue fringilla, maximus tristique erat molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquet ex leo, at pellentesque odio blandit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce vestibulum mollis elit, sit amet bibendum augue sollicitudin ac. Aenean vitae risus dictum ante maximus pharetra vitae vitae enim. Sed feugiat mi facilisis enim condimentum consectetur. Cras vestibulum scelerisque nisi, vitae vestibulum enim placerat id.
Lorem ipsum regular size dolor sit amet, consectetur adipiscing elit. Phasellus lobortis est nec augue fringilla, maximus tristique erat molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquet ex leo, at pellentesque odio blandit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce vestibulum mollis elit, sit amet bibendum augue sollicitudin ac. Aenean vitae risus dictum ante maximus pharetra vitae vitae enim. Sed feugiat mi facilisis enim condimentum consectetur. Cras vestibulum scelerisque nisi, vitae vestibulum enim placerat id. Borrowed from https://bootswatch.com/default/
This is h2 heading
THis is within div .readable
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis est nec augue fringilla, maximus tristique erat molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquet ex leo, at pellentesque odio blandit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce vestibulum mollis elit, sit amet bibendum augue sollicitudin ac. Aenean vitae risus dictum ante maximus pharetra vitae vitae enim. Sed feugiat mi facilisis enim condimentum consectetur. Cras vestibulum scelerisque nisi, vitae vestibulum enim placerat id.
h3 heading here
Donec commodo eleifend nisi, et efficitur sem volutpat ac. Aliquam eu orci quis nibh auctor laoreet quis nec quam. Donec sed vestibulum libero, quis rutrum erat. Maecenas at pharetra velit. Morbi dignissim risus vel lobortis scelerisque. Suspendisse orci ipsum, aliquet eget dignissim ut, eleifend consequat sem. Duis consectetur blandit metus. Vivamus id dapibus elit, congue lobortis sem. Curabitur viverra arcu ut malesuada semper. Integer massa augue, aliquam ac malesuada sit amet, imperdiet eu diam. Duis nec purus et lectus tincidunt vulputate.
Heading 4 goes here
Ut eleifend urna pellentesque, accumsan lacus imperdiet, sodales dui. Integer pellentesque justo sit amet pretium imperdiet. Suspendisse semper velit id velit accumsan tempor. Cras metus elit, lobortis at risus non, porttitor pulvinar lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lorem velit, efficitur sit amet nisl in, interdum congue velit. Maecenas quis dictum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent purus dolor, aliquet sed elit id, efficitur blandit libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id libero quis erat consectetur tristique non ac enim. Fusce ac purus libero. Nunc ultricies augue metus, a sagittis quam cursus vitae. Aenean mattis dapibus orci, non sagittis augue blandit sit amet.
Size five is this one
Vivamus condimentum auctor lacinia. In nec nisi in arcu mollis cursus sed eu nunc. Maecenas viverra sapien non bibendum accumsan. Aliquam semper, est ut molestie iaculis, risus nisl facilisis nisi, ac cursus lectus arcu sit amet nisl. Mauris tempus sapien eget purus hendrerit ornare. Fusce hendrerit nisi et massa convallis, et fermentum ligula suscipit. Sed bibendum diam ligula, in laoreet turpis dictum eget. Quisque cursus dapibus leo a rutrum.
This is last h6
Suspendisse in porttitor nunc. Sed elementum justo eu risus mattis tempor. Nunc fringilla malesuada leo, id rutrum nisi faucibus eget. Ut gravida odio in neque fringilla, vel laoreet elit ornare. Cras pulvinar eu elit at molestie. Aenean finibus ex ac ultrices rhoncus. Nam hendrerit, nisl nec sollicitudin lobortis, massa magna varius arcu, vel feugiat quam mauris a mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas ac placerat magna.
Display 1
Display 2
Display 3
Display 4
Inline text elements
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
Abbreviations
attr
HTML
Lists
Normal
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
-
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Unstyled
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
-
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
List inline
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Description List
- Description lists
- A description list is perfect for defining terms.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Truncated term is truncated
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Nesting
-
- Nested definition list
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Navbars
Colours
Text
regular text
.text-black
.text-primary
.text-secondary
.text-tertiary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-white
.text-medium-gray
.text-dark-gray
.text-black
.text-body
.text-muted
.text-black-50
.text-white-50
Links
Background Colours
Buttons
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading with muted text
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Example body text
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
This line of text is meant to be treated as fine print.
The following is rendered as bold text.
The following is rendered as italicized text.
An abbreviation of the word attribute is attr.
Emphasis classes
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Tables
Basic
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Table Dark
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Table Head Dark
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Table Head LIGHT
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Striped Dark
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Striped Light
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Bordered Dark
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Bordered Light
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Borderless Dark
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Borderless Light
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Hover Dark
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Hover Light
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Small Dark
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Small Light
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Caption
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Type | Column heading | Column heading | Column heading |
---|---|---|---|
Active | Column content | Column content | Column content |
Default | Column content | Column content | Column content |
Primary | Column content | Column content | Column content |
Secondary | Column content | Column content | Column content |
Success | Column content | Column content | Column content |
Danger | Column content | Column content | Column content |
Warning | Column content | Column content | Column content |
Info | Column content | Column content | Column content |
Light | Column content | Column content | Column content |
Dark | Column content | Column content | Column content |
Forms
Navs
Tabs
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.
Pills
Indicators
Alerts
Warning!
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Badges
Progress
Basic
Contextual alternatives
Multiple bars
Striped
Animated
Containers
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
List groups
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Cards
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card header
Special title treatment
Support card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkDialogs
Modals
Popovers
Tooltips
Figures
Embed
Media Object
Top-aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Media List
-
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notes
- TBD
Last Updated: January 01, 1