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 1emwith 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>
.
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.
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 notexplicitly 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 doesexplicitly matter.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem