Korporat Typography

Bootstrap has always given us a nice set of typographic styles. We have tweaked the css slightly, and what you see here is how the various elements have been styled for the Korporat Template. We've also added typographic baseline. Most of the text elements line up to the baseline to the pixel. As time goes on, I'll add in more elements such as buttons and form elements to follow the baseline. Wanna have a look? Well, switch it on!

Headings

Heading One - h1

Duis autem vel eum magna aliquam erat volutpat iriure dolor in dolore magna aliquam erat volutpat magna aliquam erat volutpat.

Heading Two - h2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.

Heading Three - h3

Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Heading Four - h4

Amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.

Heading Five - h5

Consectetuer elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.

Heading Six - h6

Sed diam nonummy nibh euismod magna aliquam erat volutpat.

Lead Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Small Text

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Text Styles

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Blockquotes

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

Someone famousSource Title

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

Someone famousSource Title

Definition Lists

Standard Definition List

Definition list title
Definition list data
Definition list title
Definition list data
Definition list title
Definition list data

Horizontal Definition 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.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Lists

Ordered list

  1. List item
  2. List item
  3. List item
    1. List item level 2
    2. List item level 2
      1. List item level 3
      2. List item level 3

Unordered list

  • List item 01
  • List item 02
  • List item 03
    • List item level 2
    • List item level 2
      • List item level 3
      • List item level 3

Address

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
This email address is being protected from spambots. You need JavaScript enabled to view it.

Other markup code

hyperlink
abbreviation
offset text typically styled in bold
cited title of a work
code fragment
deleted text
defining instance
emphatic stress
offset text typically styled in italic
inserted text
user input
marked (highlighted) text

superscript subscript
variable or placeholder text

Table Options

Default Style

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Striped Table

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Bordered Table

#First NameLast NameUsername
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter

Hover Table

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Optional row classes

#ProductPayment TakenStatus
1TB - Monthly01/04/2012Approved
2TB - Monthly02/04/2012Declined
3TB - Monthly03/04/2012Pending
4TB - Monthly04/04/2012Call in to confirm

Buttons

Buttonclass=""Description
btnStandard gray button with gradient
btn btn-primaryProvides extra visual weight and identifies the primary action in a set of buttons
btn btn-infoUsed as an alternative to the default styles
btn btn-successIndicates a successful or positive action
btn btn-warningIndicates caution should be taken with this action
btn btn-dangerIndicates a dangerous or potentially negative action
btn btn-inverseAlternate dark gray button, not tied to a semantic action or use
btn btn-linkDeemphasize a button by making it look like a link while maintaining button behavior

Button Sizes

 

 

 

 

Alerts

Warning! Best check yo self, you're not looking too good.
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.