Tearsheet

Typography

Paragraph

Standard paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere auctor vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. In id facilisis arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas et tristique leo, at sollicitudin ligula. Proin eget vehicula ligula, vel fringilla turpis.

Morbi venenatis odio arcu, quis maximus enim fermentum vitae. Pellentesque gravida laoreet dapibus. Praesent et interdum turpis, vitae congue metus.

Font Stack

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

Headers

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6
Blockquote

Standard <blockquote>. Use for Notes. In id facilisis arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas et tristique leo, at sollicitudin ligula. Proin eget vehicula ligula.

Lists

Unordered base

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five

Ordered base

  1. Item One
  2. Item Two
  3. Item Three
  4. Item Four
  5. Item Five

List group base

  • Cras justo odio
  • Dapibus ac facil
  • Morbi leo risus

Unordered or ordered list with spacing between items

Style: p + ul, p + ol { margin-top: -1.1rem; } is still in effect but the ul has an added class of “space-li” <ul class="space-li">

  • Item One .space-li li:first-child { margin: 2rem 0 1rem; }
  • Item Two and subsequent .space-li li { margin: 1rem 0; }
  • Item Three
  • Item Four
  • Item Five

Here’s another paragraph of text, preceding an ordered list with a class of “space-li” <ol class="space-li">

  1. Item One .space-li li:first-child { margin: 2rem 0 1rem; }
  2. Item Two and subsequent .space-li li { margin: 1rem 0; }
  3. Item Three
  4. Item Four
  5. Item Five

Complex Ordered

  1. Nest <ol> tags
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in accumsan felis, ut consequat sapien. Phasellus cursus eros semper felis imperdiet mollis
    1. Quisque non massa ullamcorper, pulvinar nisl nec
    2. Nunc elementum eros nec molestie sollicitudin:
      1. Nulla eget tempus dui
      2. Morbi dignissim, sapien id tincidunt rhoncus, erat libero dignissim ligula, vel auctor tellus dolor ac lacus. Fusce vel felis non massa tristique malesuada at ut orci auctor augue nulla, nec aliquam ante gravida vitae
      3. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
callouts

! IMPORTANT <blockquote><span class="flag-red">! IMPORTANT</span> ... </blockquote> Fusce vel felis non massa tristique malesuada at ut orci.

! TIP <blockquote><strong>! TIP</strong> ... </blockquote> Fusce vel felis non massa tristique malesuada at ut orci.

NOTE: <blockquote><strong>NOTE:</strong> ... </blockquote> Fusce vel felis non massa tristique malesuada at ut orci.

This is highlighted text <span class="highlight">This is highlighted text</span>

Code Display

inline

For inline code, use the <code> tag

code block

For code blocks, use the <pre> tag. Remove all unnecessary leading spaces/tabs and convert all < to &lt; and all > to &gt;

Sample: Pre

<div class="col-md-4">
  <h4>List group base</h4>
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">This is a long line to demonstrate horizontal scrolling of the containing box. Lorem ipsum dolor</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Tables

More in the Bootstrap 4 documentation

Responsive

Table heading Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell

Reflow

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell

Text Links

Example of the default text link style

Colors

$primary-color
$secondary-color
$tertiary-color
$text-color
$alert-color
$background-color
$background-color-xlight
$background-color-xdark
$highlight-color

Images

Formats

RASTER: Continuous tone images should generally be jpg format, standard Photoshop compression level 60 recommended. PNG (Portable Network Graphics) format may be occasionally appropriate in specific circumstances and is used by some legacy elements.

A width of about 1200 pixels is ideal. Smaller images will look pixelated and larger ones are overkill.

VECTOR: All non-continuous tone images should be SVG (Scalable Vector Graphics) format. SVG requirements:

  • Convert all fonts to outlines before saving SVGs for Production. An additional Illustrator file with editable fonts may need to be saved by artwork creators for future updates of diagrams. SVGs with editable fonts may not display properly across all devices and platforms.
  • In general, fit artboard to artwork bounds before saving SVG. This allows all padding/margin to be applied via CSS and reduces complexity of maintenance and upgrades. Illustrator (or other vector art creation software) artboards can exceed artwork size where cropping is required.
  • Simplify SVGs where possible: no stray points, line things up, delete unnecessary elements. Contact the DoITT UX Group for assistance if needed.
  • Save SVGs from Illustrator using the SVG 1.1 default settings. We might switch to compressed SVG in the future but we’re not recommending it at this time.

Bootstrap 4 Documentation

For components not outlined here, refer to the Bootstrap 4 general documentation