Style Guide

STYLE GUIDE

Humane Type in the Digital Age

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

Statement Summary
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.

Image of a person
The 42–Line Bible, printed by Gutenberg.

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.

—Massimo Vignelli

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

—Josef Mueller–Brockmann

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

—Eric Gill

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.

Image of a person
Type through 5 centuries.

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:

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. Aliquam tincidunt mauris eu risus.
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  4. 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.

Most Downloaded Movies on BitTorrent, 2011 .table
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, Sweden
Preformated:
      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
  1. Ordered list 01
  2. Ordered list 02
  3. Ordered list 03
    1. Ordered list inside list level 2
    2. Ordered list inside list level 2
      1. Ordered list inside list level 3
      2. 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.

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

Background Colours

.bg-primary
.bg-secondary
.bg-tertiary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-medium-gray
.bg-dark-gray
.bg-dark
.bg-black
.bg-white
.bg-transparent

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.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Basic

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table Dark

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table Head Dark

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table Head LIGHT

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped Dark

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped Light

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered Dark

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered Light

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Borderless Dark

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Borderless Light

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hover Dark

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hover Light

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Small Dark

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Small Light

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Caption

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
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
Legend
We'll never share your email with anyone else.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
Radio buttons
Checkboxes
Success! You've done it.
Sorry, that username's taken. Try another?
$
.00
Custom forms
Upload

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.

Pagination

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.

Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.

Badges

Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark

Basic

Contextual alternatives

Multiple bars

Striped

Animated

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.

Learn more

List groups

Cards

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

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
Card image

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 link

Modals

Popovers

Tooltips

Last Updated: January 01, 1