Typography

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1. Bootstrap heading

 Semibold 1.500em

h2. Bootstrap heading

 Semibold 1.375em

h3. Bootstrap heading

 Semibold 1.125em

h4. Bootstrap heading

 Semibold 1.000em
h5. Bootstrap heading
 Semibold 0.875em
h6. Bootstrap heading
 Semibold 0.750em

Headings

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

h1. Bootstrap heading

 Semibold 1.500em

h2. Bootstrap heading

 Semibold 1.188em

h3. Bootstrap heading

 Semibold 1.063em

h4. Bootstrap heading

 Semibold 0.875em
h5. Bootstrap heading
 Semibold 0.813em
h6. Bootstrap heading
 Semibold 0.750em

Body copy

NeuBoard's gloabl default font-size is 1em with a line-height of 1.428. This is applied to the <body> and all paragraphs are set to 0.875em.

For ease of use the font sizes are set as variables in the LESS and SASS as px and converted to em.

@6px:0.375em;
@7px:0.438em;
@8px:0.500em;
@9px:0.563em;
@10px:0.625em;
@11px:0.688em;
@12px:0.750em;
@13px:0.813em;
@14px:0.875em;
@15px:0.938em;
@16px:1.000em;
@17px:1.063em;
@18px:1.125em;
@19px:1.188em;
@20px:1.250em;
@21px:1.313em;
@22px:1.375em;
@23px:1.438em;
@24px:1.500em;

Addresses

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.

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

Blockquotes

Style and content changes for simple variations on a standard <blockquote>.

Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.

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

Someone famous in Source Title

Alignment classes

Easily realign text to components with text alignment classes.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

Lead body copy

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Lists

Unordered

A list of items in which the order does not explicitly matter.

  • 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

Ordered

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem