• Super User
    Super User updated an article Typography.

    Typography

    posted in Club Features on 3rd Jun, 2016

     

    Heading Text

    h1. Heading Secondary text

    h2. Heading Secondary text

    h3. Heading Secondary text

    h4. Heading Secondary text

    h5. Heading Secondary text
    h6. Heading Secondary text

    TIPS: Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

    Example body text

    This is a lead paragraph.
    Make a paragraph stand out by adding .lead.

    Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

    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.

    The following snippet of text is rendered as bold text.

    The following snippet of text is rendered as italicized text.

    An abbreviation of the word attribute is attr.

    Address

    Company Name
    795 Folsom Ave, Suite 600
    San Francisco, CA 94107
    P: (123) 456-7890
    Full Name
    P: (123) 456-7890
    first.last@example.com

    Emphasis classes

    This is a .mute paragraph.

    This is a .text-primary paragraph.

    This is a .text-warning paragraph.

    This is a .text-danger paragraph.

    This is a .text-success paragraph.

    This is a .text-info paragraph.

    Alignment classes

    This is a left aligned text .text-left

    This is a center aligned text .text-center

    This is a right aligned text .text-right

    This is a justify aligned text which is often used in Book Design, Magazine or special Typo Pages. Create a justify aligned text with .text-justify class.

     

    This is a <blockquote> in a <.well>.

    Quote's author in Source Title

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

    Quote's author in Source Title

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

    Quote's author in Source Title

     

     

    Brand Colors

    #ff5a00
    Brand Primary
    #4275f4
    Brand Secondary
    #f0ad4e
    Brand Warning
    #d9534f
    Brand Danger
    #5bc0de
    Brand Info
    #5cb85c
    Brand Success

    Grayscale Levels

    #222222
    Gray Darker
    #333333
    Gray Dark
    #555555
    Gray
    #999999
    Gray Light
    #eeeeee
    Gray Lighter
    #f6f6f6
    Gray Lightest

     

     

    Tabs

    In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.

    GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).

    In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.

    GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).

     

    Inputs

    Sample Basic Form

    Legend
    A longer block of help text that breaks onto a new line and may extend beyond one line.

     

    Jumbotron

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    Call to Action

    Primary Jumbotron

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    Call to Action

    Masthead

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    Call to Action

    Primary Masthead

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    Call to Action

     

    Alerts and Notifications

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

    Labels

    Default Primary Success Info Warning Danger

     

    List groups

    • 14 Cras justo odio
    • 2 Dapibus ac facilisis in
    • Morbi leo risus
    • 1 Morbi leo risus
    • 2 Dapibus ac facilisis in

    List group item heading

    Donec id elit non mi porta gravida at eget metus risus varius blandit.

    List group item heading

    Donec id elit non mi porta gravida at eget metus.

    List group item heading

    Donec id elit non mi porta gravida at eget metus.

    Panels

    Panel heading

    Panel content

    Panel primary

    Panel content

    Panel success

    Panel content

    Panel warning

    Panel content

    Panel danger

    Panel content

    Panel info

    Panel content

    Wells

    Look, I'm in a small well!
    Look, I'm in a well!
    Look, I'm in a large well!