base
#base
Date
<p class="date">1 January 2016</p>

1 January 2016

#base.date
Figure
<figure>
  <img src="http://placehold.it/350x150">
  <figcaption>Caption</figcaption>
</figure>
Caption
#base.figure
Heading 1
<h1 class="[modifier class]">Heading One</h1>
<p class="h1 [modifier class]">Heading One</p>

Heading One

Heading One

.h--lighter : Lighter weight

Heading One

Heading One

.h--lightest : Lightest weight

Heading One

Heading One

#base.headings.heading-1
Heading 2
<h2 class="[modifier class]">Heading Two</h2>
<p class="h2 [modifier class]">Heading Two</p>

Heading Two

Heading Two

.h--lighter : Lighter weight

Heading Two

Heading Two

.h--lightest : Lightest weight

Heading Two

Heading Two

#base.headings.heading-2
Heading 3
<h3 class="[modifier class]">Heading Three</h3>
<p class="h3 [modifier class]">Heading Three</p>

Heading Three

Heading Three

.h--lighter : Lighter weight

Heading Three

Heading Three

.h--lightest : Lightest weight

Heading Three

Heading Three

#base.headings.heading-3
Heading 4
<h4 class="[modifier class]">Heading Four</h4>
<p class="h4 [modifier class]">Heading Four</p>

Heading Four

Heading Four

.h--lighter : Lighter weight

Heading Four

Heading Four

.h--lightest : Lightest weight

Heading Four

Heading Four

#base.headings.heading-4
Heading 5
<h5 class="[modifier class]">Heading Five</h5>
<p class="h5 [modifier class]">Heading Five</p>
Heading Five

Heading Five

.h--lighter : Lighter weight

Heading Five

Heading Five

.h--lightest : Lightest weight

Heading Five

Heading Five

#base.headings.heading-5
Heading 6
<h5 class="[modifier class]">Heading Six</h5>
<p class="h6 [modifier class]">Heading Six</p>
Heading Six

Heading Six

.h--lighter : Lighter weight

Heading Six

Heading Six

.h--lightest : Lightest weight

Heading Six

Heading Six

#base.headings.heading-6
Horizontal rule
<hr/>

#base.horizontal-rule
Definition Lists
<dl>
  <dt>List item</dt>
  <dd>List item</dd>
  <dt>List item</dt>
  <dd>List item</dd>
</dl>
List item
List item
List item
List item
#base.lists.defintion
Limited List
<ul data-snyk-limit-list="3">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Limits the number of items in a list, based on the value of data-snyk-limit-list

  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
#base.lists.limited
Ordered Lists
<ol>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>
  1. List item
  2. List item
  3. List item
  4. List item
#base.lists.ordered
Styled list
<ul class="[modifier class]">
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.</li>
  <li>Cras ornare tristique elit.</li>
  <li>Fusce lobortis lorem at ipsum semper sagittis.</li>
</ul>
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.

.list--styled : Styled

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.

.list--l : Large

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.

.list--m : Medium

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.

.list--s : Small

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.

.list--ticked : Ticked

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.

.list--dashed : Dashed

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.

.list--crossed : Crossed

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.

.list--underlined : Underlined

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.

.list--centered : Centered

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.

.list--numbered : Numbered (use with an ol tag)

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.

.list--inline : displayed horizontally

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.

.list--comma : Adds commas after each item

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.
#base.lists.styled
Multiple list styles
<ul class="list--underlined [modifier class]">
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.</li>
  <li>Cras ornare tristique elit.</li>
  <li>Fusce lobortis lorem at ipsum semper sagittis.</li>
</ul>
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.

.list--styled : Styled

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.

.list--ticked : Ticked

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.

.list--dashed : Dashed

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.

.list--crossed : Crossed

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.

.list--multiple : Underlined without bottom

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.
#base.lists.underlinedmultiple
Unordered Lists
<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
  • List item
  • List item
  • List item
  • List item
#base.lists.unordered
Table
<table class="[modifier class]">
  <thead>
    <tr>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>
Heading Heading Heading
Data Data Data
Data Data Data

.table-unstyled : Remove lines

Heading Heading Heading
Data Data Data
Data Data Data
#base.table
Abbreviation
<abbr title="British Broadcasting Corporation">BBC</abbr>
BBC
#base.text.abbr
Blockquote
<blockquote>
<p>“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.”</p>
<cite>— Mark Terry, <strong>HolidayExtras</strong></cite>
</blockquote>

“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.”

— Mark Terry, HolidayExtras
#base.text.blockquote
Byline
<p class="byline">Byline</p>
#base.text.byline
Caption
<p class="caption">Caption</p>

Caption

#base.text.caption
Disabled
<p class="text-disabled">Disabled text</p>

Disabled text

#base.text.disabled
Emphasis
<em>Emphasised text</em>
Emphasised text
#base.text.em
Feature
<div class="feature">
<h2>Find</h2>
<ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.</li>
  <li>Cras ornare tristique elit.</li>
  <li>Fusce lobortis lorem at ipsum semper sagittis.</li>
</ul>
</div>

Find

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in.
  • Cras ornare tristique elit.
  • Fusce lobortis lorem at ipsum semper sagittis.
#base.text.feature
Footnote
<p class="caption">Footnote</p>

Footnote

#base.text.footnote
Keyboard
<kbd>Keyboard command</kbd>
Keyboard command
#base.text.kbd
Lede
<p class="lede">Lede</p>

Lede

#base.text.lede
Marked
<mark>Marked text</mark>
Marked text
#base.text.mark
Paragraph
<p>Once you’re vulnerability free, you can put a badge on your README showing your package has no known security holes. This will show your users you care about security, and tell them that they should care too.</p>
<p>If there are no vulnerabilities, this is indicated by a green badge.</p>

Once you’re vulnerability free, you can put a badge on your README showing your package has no known security holes. This will show your users you care about security, and tell them that they should care too.

If there are no vulnerabilities, this is indicated by a green badge.

#base.text.paragraph
Pre
<pre>Pre</pre>
Pre
#base.text.pre
Strong
<strong>Strong text</strong>
Strong text
#base.text.strong
Subhead
<h4 class="subhead">Subhead</h4>

Subhead

#base.text.subhead
Container title
<p class="container-title">Container title</p>

Container title

#base.text.title-container
Secondary title
<p class="secondary-title">Secondary title</p>

Secondary title

#base.text.title-secondary
Section title
<p class="tiered-title">Section title</p>

Section title

#base.text.title-section
Tiered title
<p class="tiered-title">Tiered title</p>

Tiered title

#base.text.title-tiered