Typography 2.0

Headings and Paragraphs 2.1

Default styling

Heading level 1

Heading level 2

Heading level 3

Heading level 4

This a common paragraph. Lesser divided saw yielding stars wherein. Void fly forth you'll bring. Divide creeping. Subdue third female shall them she'd she'd isn't fourth.

This a common paragraph. Lesser divided saw yielding stars wherein. Void fly forth you'll bring. Divide creeping. Subdue third female shall them she'd she'd isn't fourth.

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<p>This a common paragraph. Lesser divided saw yielding stars wherein. Void fly forth you'll bring. Divide creeping. Subdue third female shall them she'd she'd isn't fourth.</p>
<p>This a common paragraph. Lesser divided saw yielding stars wherein. Void fly forth you'll bring. Divide creeping. Subdue third female shall them she'd she'd isn't fourth.</p>

Emphasis 2.2

Basic Emphasis 2.2.1

Default styling

Emphasize in bold
Emphasize in cursive
Small text
Normal link
HTML
<strong>Emphasize in bold</strong><br />
<em>Emphasize in cursive</em><br />
<small>Small text</small><br />
<a href="#">Normal link</a><br />
<abbr title="HyperText Markup Language">HTML</abbr>

Emphasis Classes 2.2.2

Default styling

Success

Warning

Danger or error

Muted

<p class="text-success">Success</p>
<p class="text-warning">Warning</p>
<p class="text-danger">Danger or error</p>
<p class="text-muted">Muted</p>

Lists 2.3

Default Lists 2.3.1

Default styling

  • One
  • Two
    • Two Point One
    • Two Point Three
  • Three
  • Four
  1. One
  2. Two
  3. Three
    1. Three.One
    2. Three.Two
  4. Four
<ul>
    <li>One</li>
    <li>Two
        <ul>
            <li>Two Point One</li>
            <li>Two Point Three</li>
        </ul>
    </li>
    <li>Three</li>
    <li>Four</li>
</ul>
<ol>
    <li>One</li>
    <li>Two</li>
    <li>Three
        <ol>
            <li>Three.One</li>
            <li>Three.Two</li>
        </ol>
    </li>
    <li>Four</li>
</ol>

Unstyled Lists 2.3.2

Please note that this modification only affects one level.

Default styling

  • One
  • Two
  • Three
  • Four
<ul class="list-unstyled">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

Inline Lists 2.3.3

Please note that this modification only affects one level.

Default styling

Inline list

  • One
  • Two
  • Three
<h3>Inline list</h3>
    <ul class="list-inline">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>

Definition Lists 2.3.4

Default styling

Defintion title
Definition text
Defintion title
Definition text
<dl>
    <dt>Defintion title</dt>
    <dd>Definition text</dd>
    <dt>Defintion title</dt>
    <dd>Definition text</dd>
</dl>

Text Utilities 2.4

Default styling

Text left

Text center

Text right

Justified text.

This text will never wrap to a new line.

This text will always wrap to a new line (it is default behavior but sometimes - if you want to override 'nowrap' behavior - it may be useful).

<p class="text-left">Text left</p>
<p class="text-center">Text center</p>
<p class="text-right">Text right</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">This text will never wrap to a new line.</p>
<p class="text-wrap">This text will always wrap to a new line (it is default behavior but sometimes - if you want to override 'nowrap' behavior - it may be useful).</p>

Icon Set 2.5

You can download all icons in single file.

Default styling

<ul class="iconset">
    <li>
        <span class="icon icon--user-king" aria-hidden="true"></span>
        <p><a href="dist/images/icons/user-king.svg" download>user-king</a></p>
    </li>
    <li>
        <span class="icon icon--support-chat" aria-hidden="true"></span>
        <p><a href="dist/images/icons/support-chat.svg" download>support-chat</a></p>
    </li>
    <li>
        <span class="icon icon--support-chat-bold" aria-hidden="true"></span>
        <p><a href="dist/images/icons/support-chat-bold.svg" download>support-chat-bold</a></p>
    </li>
    <li>
        <span class="icon icon--specialization" aria-hidden="true"></span>
        <p><a href="dist/images/icons/specialization.svg" download>specialization</a></p>
    </li>
    <li>
        <span class="icon icon--intranet" aria-hidden="true"></span>
        <p><a href="dist/images/icons/intranet.svg" download>intranet</a></p>
    </li>
    <li>
        <span class="icon icon--custom-categories" aria-hidden="true"></span>
        <p><a href="dist/images/icons/custom-categories.svg" download>custom-categories</a></p>
    </li>
    <li>
        <span class="icon icon--off" aria-hidden="true"></span>
        <p><a href="dist/images/icons/off.svg" download>off</a></p>
    </li>
    <li>
        <span class="icon icon--online-help" aria-hidden="true"></span>
        <p><a href="dist/images/icons/online-help.svg" download>online-help</a></p>
    </li>
    <li>
        <span class="icon icon--stop" aria-hidden="true"></span>
        <p><a href="dist/images/icons/stop.svg" download>stop</a></p>
    </li>
    <li>
        <span class="icon icon--stop-reason" aria-hidden="true"></span>
        <p><a href="dist/images/icons/stop-reason.svg" download>stop-reason</a></p>
    </li>
    <li>
        <span class="icon icon--export-people" aria-hidden="true"></span>
        <p><a href="dist/images/icons/export-people.svg" download>export-people</a></p>
    </li>
    <li>
        <span class="icon icon--import" aria-hidden="true"></span>
        <p><a href="dist/images/icons/import.svg" download>import</a></p>
    </li>
    <li>
        <span class="icon icon--signature" aria-hidden="true"></span>
        <p><a href="dist/images/icons/signature.svg" download>signature</a></p>
    </li>
    <li>
        <span class="icon icon--company-profile" aria-hidden="true"></span>
        <p><a href="dist/images/icons/company-profile.svg" download>company-profile</a></p>
    </li>
    <li>
        <span class="icon icon--header" aria-hidden="true"></span>
        <p><a href="dist/images/icons/header.svg" download>header</a></p>
    </li>
    <li>
        <span class="icon icon--footer" aria-hidden="true"></span>
        <p><a href="dist/images/icons/footer.svg" download>footer</a></p>
    </li>
    <li>
        <span class="icon icon--image-upload" aria-hidden="true"></span>
        <p><a href="dist/images/icons/image-upload.svg" download>image-upload</a></p>
    </li>
    <li>
        <span class="icon icon--agency" aria-hidden="true"></span>
        <p><a href="dist/images/icons/agency.svg" download>agency</a></p>
    </li>
    <li>
        <span class="icon icon--questionnare" aria-hidden="true"></span>
        <p><a href="dist/images/icons/questionnare.svg" download>questionnare</a></p>
    </li>
    <li>
        <span class="icon icon--export" aria-hidden="true"></span>
        <p><a href="dist/images/icons/export.svg" download>export</a></p>
    </li>
    <li>
        <span class="icon icon--help-bold" aria-hidden="true"></span>
        <p><a href="dist/images/icons/help-bold.svg" download>help-bold</a></p>
    </li>
    <li>
        <span class="icon icon--mobile-phone" aria-hidden="true"></span>
        <p><a href="dist/images/icons/mobile-phone.svg" download>mobile-phone</a></p>
    </li>
    <li>
        <span class="icon icon--search-file" aria-hidden="true"></span>
        <p><a href="dist/images/icons/search-file.svg" download>search-file</a></p>
    </li>
    <li>
        <span class="icon icon--sections" aria-hidden="true"></span>
        <p><a href="dist/images/icons/sections.svg" download>sections</a></p>
    </li>
    <li>
        <span class="icon icon--pages" aria-hidden="true"></span>
        <p><a href="dist/images/icons/pages.svg" download>pages</a></p>
    </li>
    <li>
        <span class="icon icon--folder" aria-hidden="true"></span>
        <p><a href="dist/images/icons/folder.svg" download>folder</a></p>
    </li>
    <li>
        <span class="icon icon--folder-search" aria-hidden="true"></span>
        <p><a href="dist/images/icons/folder-search.svg" download>folder-search</a></p>
    </li>
    <li>
        <span class="icon icon--arrow-left" aria-hidden="true"></span>
        <p><a href="dist/images/icons/arrow-left.svg" download>arrow-left</a></p>
    </li>
    <li>
        <span class="icon icon--arrow-right" aria-hidden="true"></span>
        <p><a href="dist/images/icons/arrow-right.svg" download>arrow-right</a></p>
    </li>
    <li>
        <span class="icon icon--arrow-up" aria-hidden="true"></span>
        <p><a href="dist/images/icons/arrow-up.svg" download>arrow-up</a></p>
    </li>
    <li>
        <span class="icon icon--arrow-down" aria-hidden="true"></span>
        <p><a href="dist/images/icons/arrow-down.svg" download>arrow-down</a></p>
    </li>
    <li>
        <span class="icon icon--candidate" aria-hidden="true"></span>
        <p><a href="dist/images/icons/candidate.svg" download>candidate</a></p>
    </li>
    <li>
        <span class="icon icon--candidate-signal" aria-hidden="true"></span>
        <p><a href="dist/images/icons/candidate-signal.svg" download>candidate-signal</a></p>
    </li>
    <li>
        <span class="icon icon--candidates" aria-hidden="true"></span>
        <p><a href="dist/images/icons/candidates.svg" download>candidates</a></p>
    </li>
    <li>
        <span class="icon icon--candidates-credit" aria-hidden="true"></span>
        <p><a href="dist/images/icons/candidates-credit.svg" download>candidates-credit</a></p>
    </li>
    <li>
        <span class="icon icon--people" aria-hidden="true"></span>
        <p><a href="dist/images/icons/people.svg" download>people</a></p>
    </li>
    <li>
        <span class="icon icon--close" aria-hidden="true"></span>
        <p><a href="dist/images/icons/close.svg" download>close</a></p>
    </li>
    <li>
        <span class="icon icon--danger" aria-hidden="true"></span>
        <p><a href="dist/images/icons/danger.svg" download>danger</a></p>
    </li>
    <li>
        <span class="icon icon--warning" aria-hidden="true"></span>
        <p><a href="dist/images/icons/warning.svg" download>warning</a></p>
    </li>
    <li>
        <span class="icon icon--warning-info" aria-hidden="true"></span>
        <p><a href="dist/images/icons/warning-info.svg" download>warning-info</a></p>
    </li>
    <li>
        <span class="icon icon--minus-hexagon" aria-hidden="true"></span>
        <p><a href="dist/images/icons/minus-hexagon.svg" download>minus-hexagon</a></p>
    </li>
    <li>
        <span class="icon icon--help" aria-hidden="true"></span>
        <p><a href="dist/images/icons/help.svg" download>help</a></p>
    </li>
    <li>
        <span class="icon icon--question" aria-hidden="true"></span>
        <p><a href="dist/images/icons/question.svg" download>question</a></p>
    </li>
    <li>
        <span class="icon icon--rescue" aria-hidden="true"></span>
        <p><a href="dist/images/icons/rescue.svg" download>rescue</a></p>
    </li>
    <li>
        <span class="icon icon--info" aria-hidden="true"></span>
        <p><a href="dist/images/icons/info.svg" download>info</a></p>
    </li>
    <li>
        <span class="icon icon--vq-play" aria-hidden="true"></span>
        <p><a href="dist/images/icons/vq-play.svg" download>vq-play</a></p>
    </li>
    <li>
        <span class="icon icon--vq-pause" aria-hidden="true"></span>
        <p><a href="dist/images/icons/vq-pause.svg" download>vq-pause</a></p>
    </li>
    <li>
        <span class="icon icon--vq-disable" aria-hidden="true"></span>
        <p><a href="dist/images/icons/vq-disable.svg" download>vq-disable</a></p>
    </li>
    <li>
        <span class="icon icon--psychometry" aria-hidden="true"></span>
        <p><a href="dist/images/icons/psychometry.svg" download>psychometry</a></p>
    </li>
    <li>
        <span class="icon icon--success" aria-hidden="true"></span>
        <p><a href="dist/images/icons/success.svg" download>success</a></p>
    </li>
    <li>
        <span class="icon icon--trash" aria-hidden="true"></span>
        <p><a href="dist/images/icons/trash.svg" download>trash</a></p>
    </li>
    <li>
        <span class="icon icon--mail" aria-hidden="true"></span>
        <p><a href="dist/images/icons/mail.svg" download>mail</a></p>
    </li>
    <li>
        <span class="icon icon--phone" aria-hidden="true"></span>
        <p><a href="dist/images/icons/phone.svg" download>phone</a></p>
    </li>
    <li>
        <span class="icon icon--home" aria-hidden="true"></span>
        <p><a href="dist/images/icons/home.svg" download>home</a></p>
    </li>
    <li>
        <span class="icon icon--star" aria-hidden="true"></span>
        <p><a href="dist/images/icons/star.svg" download>star</a></p>
    </li>
    <li>
        <span class="icon icon--star-half" aria-hidden="true"></span>
        <p><a href="dist/images/icons/star-half.svg" download>star-half</a></p>
    </li>
    <li>
        <span class="icon icon--star-outline" aria-hidden="true"></span>
        <p><a href="dist/images/icons/star-outline.svg" download>star-outline</a></p>
    </li>
    <li>
        <span class="icon icon--star-half-outline" aria-hidden="true"></span>
        <p><a href="dist/images/icons/star-half-outline.svg" download>star-half-outline</a></p>
    </li>
    <li>
        <span class="icon icon--file-known" aria-hidden="true"></span>
        <p><a href="dist/images/icons/file-known.svg" download>file-known</a></p>
    </li>
    <li>
        <span class="icon icon--file-unknown" aria-hidden="true"></span>
        <p><a href="dist/images/icons/file-unknown.svg" download>file-unknown</a></p>
    </li>
    <li>
        <span class="icon icon--file-word" aria-hidden="true"></span>
        <p><a href="dist/images/icons/file-word.svg" download>file-word</a></p>
    </li>
    <li>
        <span class="icon icon--file-excel" aria-hidden="true"></span>
        <p><a href="dist/images/icons/file-excel.svg" download>file-excel</a></p>
    </li>
    <li>
        <span class="icon icon--file-pdf" aria-hidden="true"></span>
        <p><a href="dist/images/icons/file-pdf.svg" download>file-pdf</a></p>
    </li>
    <li>
        <span class="icon icon--file-ps" aria-hidden="true"></span>
        <p><a href="dist/images/icons/file-ps.svg" download>file-ps</a></p>
    </li>
    <li>
        <span class="icon icon--file-ppt" aria-hidden="true"></span>
        <p><a href="dist/images/icons/file-ppt.svg" download>file-ppt</a></p>
    </li>
    <li>
        <span class="icon icon--file-image" aria-hidden="true"></span>
        <p><a href="dist/images/icons/file-image.svg" download>file-image</a></p>
    </li>
    <li>
        <span class="icon icon--file-archive" aria-hidden="true"></span>
        <p><a href="dist/images/icons/file-archive.svg" download>file-archive</a></p>
    </li>
    <li>
        <span class="icon icon--download" aria-hidden="true"></span>
        <p><a href="dist/images/icons/download.svg" download>download</a></p>
    </li>
    <li>
        <span class="icon icon--thumb-up" aria-hidden="true"></span>
        <p><a href="dist/images/icons/thumb-up.svg" download>thumb-up</a></p>
    </li>
    <li>
        <span class="icon icon--thumb-up-opaque" aria-hidden="true"></span>
        <p><a href="dist/images/icons/thumb-up-opaque.svg" download>thumb-up-opaque</a></p>
    </li>
    <li>
        <span class="icon icon--thumb-down" aria-hidden="true"></span>
        <p><a href="dist/images/icons/thumb-down.svg" download>thumb-down</a></p>
    </li>
    <li>
        <span class="icon icon--thumb-down-opaque" aria-hidden="true"></span>
        <p><a href="dist/images/icons/thumb-down-opaque.svg" download>thumb-down-opaque</a></p>
    </li>
    <li>
        <span class="icon icon--plus" aria-hidden="true"></span>
        <p><a href="dist/images/icons/plus.svg" download>plus</a></p>
    </li>
    <li>
        <span class="icon icon--minus" aria-hidden="true"></span>
        <p><a href="dist/images/icons/minus.svg" download>minus</a></p>
    </li>
    <li>
        <span class="icon icon--edit" aria-hidden="true"></span>
        <p><a href="dist/images/icons/edit.svg" download>edit</a></p>
    </li>
    <li>
        <span class="icon icon--menu" aria-hidden="true"></span>
        <p><a href="dist/images/icons/menu.svg" download>menu</a></p>
    </li>
    <li>
        <span class="icon icon--logout" aria-hidden="true"></span>
        <p><a href="dist/images/icons/logout.svg" download>logout</a></p>
    </li>
    <li>
        <span class="icon icon--lm-waiting" aria-hidden="true"></span>
        <p><a href="dist/images/icons/lm-waiting.svg" download>lm-waiting</a></p>
    </li>
    <li>
        <span class="icon icon--magnifier" aria-hidden="true"></span>
        <p><a href="dist/images/icons/magnifier.svg" download>magnifier</a></p>
    </li>
    <li>
        <span class="icon icon--dots" aria-hidden="true"></span>
        <p><a href="dist/images/icons/dots.svg" download>dots</a></p>
    </li>
    <li>
        <span class="icon icon--percent-circle" aria-hidden="true"></span>
        <p><a href="dist/images/icons/percent-circle.svg" download>percent-circle</a></p>
    </li>
    <li>
        <span class="icon icon--bubble-ok" aria-hidden="true"></span>
        <p><a href="dist/images/icons/bubble-ok.svg" download>bubble-ok</a></p>
    </li>
    <li>
        <span class="icon icon--bubble-help" aria-hidden="true"></span>
        <p><a href="dist/images/icons/bubble-help.svg" download>bubble-help</a></p>
    </li>
    <li>
        <span class="icon icon--chat" aria-hidden="true"></span>
        <p><a href="dist/images/icons/chat.svg" download>chat</a></p>
    </li>
    <li>
        <span class="icon icon--plus-circle" aria-hidden="true"></span>
        <p><a href="dist/images/icons/plus-circle.svg" download>plus-circle</a></p>
    </li>
    <li>
        <span class="icon icon--candidate-ok" aria-hidden="true"></span>
        <p><a href="dist/images/icons/candidate-ok.svg" download>candidate-ok</a></p>
    </li>
    <li>
        <span class="icon icon--cart-full" aria-hidden="true"></span>
        <p><a href="dist/images/icons/cart-full.svg" download>cart-full</a></p>
    </li>
    <li>
        <span class="icon icon--calendar" aria-hidden="true"></span>
        <p><a href="dist/images/icons/calendar.svg" download>calendar</a></p>
    </li>
    <li>
        <span class="icon icon--attachment" aria-hidden="true"></span>
        <p><a href="dist/images/icons/attachment.svg" download>attachment</a></p>
    </li>
    <li>
        <span class="icon icon--candidate-search" aria-hidden="true"></span>
        <p><a href="dist/images/icons/candidate-search.svg" download>candidate-search</a></p>
    </li>
    <li>
        <span class="icon icon--candidate-glasses" aria-hidden="true"></span>
        <p><a href="dist/images/icons/candidate-glasses.svg" download>candidate-glasses</a></p>
    </li>
    <li>
        <span class="icon icon--cart-outline" aria-hidden="true"></span>
        <p><a href="dist/images/icons/cart-outline.svg" download>cart-outline</a></p>
    </li>
    <li>
        <span class="icon icon--candidates-outline" aria-hidden="true"></span>
        <p><a href="dist/images/icons/candidates-outline.svg" download>candidates-outline</a></p>
    </li>
    <li>
        <span class="icon icon--candidate-ok-outline" aria-hidden="true"></span>
        <p><a href="dist/images/icons/candidate-ok-outline.svg" download>candidate-ok-outline</a></p>
    </li>
    <li>
        <span class="icon icon--settings" aria-hidden="true"></span>
        <p><a href="dist/images/icons/settings.svg" download>settings</a></p>
    </li>
    <li>
        <span class="icon icon--graph" aria-hidden="true"></span>
        <p><a href="dist/images/icons/graph.svg" download>graph</a></p>
    </li>
    <li>
        <span class="icon icon--tick" aria-hidden="true"></span>
        <p><a href="dist/images/icons/tick.svg" download>tick</a></p>
    </li>
    <li>
        <span class="icon icon--double-tick" aria-hidden="true"></span>
        <p><a href="dist/images/icons/double-tick.svg" download>double-tick</a></p>
    </li>
    <li>
        <span class="icon icon--eye" aria-hidden="true"></span>
        <p><a href="dist/images/icons/eye.svg" download>eye</a></p>
    </li>
    <li>
        <span class="icon icon--link" aria-hidden="true"></span>
        <p><a href="dist/images/icons/link.svg" download>link</a></p>
    </li>
    <li>
        <span class="icon icon--face-happy" aria-hidden="true"></span>
        <p><a href="dist/images/icons/face-happy.svg" download>face-happy</a></p>
    </li>
    <li>
        <span class="icon icon--face-neutral" aria-hidden="true"></span>
        <p><a href="dist/images/icons/face-neutral.svg" download>face-neutral</a></p>
    </li>
    <li>
        <span class="icon icon--face-sad" aria-hidden="true"></span>
        <p><a href="dist/images/icons/face-sad.svg" download>face-sad</a></p>
    </li>
    <li>
        <span class="icon icon--print" aria-hidden="true"></span>
        <p><a href="dist/images/icons/print.svg" download>print</a></p>
    </li>
    <li>
        <span class="icon icon--clock" aria-hidden="true"></span>
        <p><a href="dist/images/icons/clock.svg" download>clock</a></p>
    </li>
    <li>
        <span class="icon icon--flash" aria-hidden="true"></span>
        <p><a href="dist/images/icons/flash.svg" download>flash</a></p>
    </li>
    <li>
        <span class="icon icon--flash-bold" aria-hidden="true"></span>
        <p><a href="dist/images/icons/flash-bold.svg" download>flash-bold</a></p>
    </li>
    <li>
        <span class="icon icon--flash-bubble" aria-hidden="true"></span>
        <p><a href="dist/images/icons/flash-bubble.svg" download>flash-bubble</a></p>
    </li>
    <li>
        <span class="icon icon--bulb" aria-hidden="true"></span>
        <p><a href="dist/images/icons/bulb.svg" download>bulb</a></p>
    </li>
    <li>
        <span class="icon icon--linkedin" aria-hidden="true"></span>
        <p><a href="dist/images/icons/linkedin.svg" download>linkedin</a></p>
    </li>
    <li>
        <span class="icon icon--document" aria-hidden="true"></span>
        <p><a href="dist/images/icons/document.svg" download>document</a></p>
    </li>
    <li>
        <span class="icon icon--documents" aria-hidden="true"></span>
        <p><a href="dist/images/icons/documents.svg" download>documents</a></p>
    </li>
    <li>
        <span class="icon icon--document-list" aria-hidden="true"></span>
        <p><a href="dist/images/icons/document-list.svg" download>document-list</a></p>
    </li>
    <li>
        <span class="icon icon--document-star" aria-hidden="true"></span>
        <p><a href="dist/images/icons/document-star.svg" download>document-star</a></p>
    </li>
    <li>
        <span class="icon icon--document-save" aria-hidden="true"></span>
        <p><a href="dist/images/icons/document-save.svg" download>document-save</a></p>
    </li>
    <li>
        <span class="icon icon--checklist-ok" aria-hidden="true"></span>
        <p><a href="dist/images/icons/checklist-ok.svg" download>checklist-ok</a></p>
    </li>
    <li>
        <span class="icon icon--share" aria-hidden="true"></span>
        <p><a href="dist/images/icons/share.svg" download>share</a></p>
    </li>
    <li>
        <span class="icon icon--recycle" aria-hidden="true"></span>
        <p><a href="dist/images/icons/recycle.svg" download>recycle</a></p>
    </li>
    <li>
        <span class="icon icon--notification" aria-hidden="true"></span>
        <p><a href="dist/images/icons/notification.svg" download>notification</a></p>
    </li>
    <li>
        <span class="icon icon--language" aria-hidden="true"></span>
        <p><a href="dist/images/icons/language.svg" download>language</a></p>
    </li>
    <li>
        <span class="icon icon--jobote" aria-hidden="true"></span>
        <p><a href="dist/images/icons/jobote.svg" download>jobote</a></p>
    </li>
    <li>
        <span class="icon icon--credit" aria-hidden="true"></span>
        <p><a href="dist/images/icons/credit.svg" download>credit</a></p>
    </li>
    <li>
        <span class="icon icon--echo" aria-hidden="true"></span>
        <p><a href="dist/images/icons/echo.svg" download>echo</a></p>
    </li>
    <li>
        <span class="icon icon--preselection" aria-hidden="true"></span>
        <p><a href="dist/images/icons/preselection.svg" download>preselection</a></p>
    </li>
    <li>
        <span class="icon icon--key" aria-hidden="true"></span>
        <p><a href="dist/images/icons/key.svg" download>key</a></p>
    </li>
    <li>
        <span class="icon icon--connection" aria-hidden="true"></span>
        <p><a href="dist/images/icons/connection.svg" download>connection</a></p>
    </li>
    <li>
        <span class="icon icon--label" aria-hidden="true"></span>
        <p><a href="dist/images/icons/label.svg" download>label</a></p>
    </li>
    <li>
        <span class="icon icon--label-free" aria-hidden="true"></span>
        <p><a href="dist/images/icons/label-free.svg" download>label-free</a></p>
    </li>
    <li>
        <span class="icon icon--building" aria-hidden="true"></span>
        <p><a href="dist/images/icons/building.svg" download>building</a></p>
    </li>
    <li>
        <span class="icon icon--building-star" aria-hidden="true"></span>
        <p><a href="dist/images/icons/building-star.svg" download>building-star</a></p>
    </li>
    <li>
        <span class="icon icon--15-mins" aria-hidden="true"></span>
        <p><a href="dist/images/icons/15-mins.svg" download>15-mins</a></p>
    </li>
    <li>
        <span class="icon icon--3-hours" aria-hidden="true"></span>
        <p><a href="dist/images/icons/3-hours.svg" download>3-hours</a></p>
    </li>
    <li>
        <span class="icon icon--1-day" aria-hidden="true"></span>
        <p><a href="dist/images/icons/1-day.svg" download>1-day</a></p>
    </li>
    <li>
        <span class="icon icon--2-days" aria-hidden="true"></span>
        <p><a href="dist/images/icons/2-days.svg" download>2-days</a></p>
    </li>
    <li>
        <span class="icon icon--30-days" aria-hidden="true"></span>
        <p><a href="dist/images/icons/30-days.svg" download>30-days</a></p>
    </li>
    <li>
        <span class="icon icon--corporation" aria-hidden="true"></span>
        <p><a href="dist/images/icons/corporation.svg" download>corporation</a></p>
    </li>
    <li>
        <span class="icon icon--pin" aria-hidden="true"></span>
        <p><a href="dist/images/icons/pin.svg" download>pin</a></p>
    </li>
    <li>
        <span class="icon icon--pin-plus" aria-hidden="true"></span>
        <p><a href="dist/images/icons/pin-plus.svg" download>pin-plus</a></p>
    </li>
    <li>
        <span class="icon icon--boss" aria-hidden="true"></span>
        <p><a href="dist/images/icons/boss.svg" download>boss</a></p>
    </li>
    <li>
        <span class="icon icon--lock" aria-hidden="true"></span>
        <p><a href="dist/images/icons/lock.svg" download>lock</a></p>
    </li>
    <li>
        <span class="icon icon--gift" aria-hidden="true"></span>
        <p><a href="dist/images/icons/gift.svg" download>gift</a></p>
    </li>
    <li>
        <span class="icon icon--box-closed" aria-hidden="true"></span>
        <p><a href="dist/images/icons/box-closed.svg" download>box-closed</a></p>
    </li>
    <li>
        <span class="icon icon--box-open" aria-hidden="true"></span>
        <p><a href="dist/images/icons/box-open.svg" download>box-open</a></p>
    </li>
    <li>
        <span class="icon icon--briefcase-clock" aria-hidden="true"></span>
        <p><a href="dist/images/icons/briefcase-clock.svg" download>briefcase-clock</a></p>
    </li>
</ul>

Icon Size 2.5.1

Default styling

.icon--normal

Normal icon (default font size)

.icon--medium

Medium icon

.icon--large

Large icon

.icon--xlarge

Extra large icon

<span class="icon icon--candidate {$modifiers}" aria-hidden="true"></span>

Icon Alignment 2.5.2

You can use .icon--left or .icon--right to create space between text and icon and .icon--middle for vertical alignment.

Default styling

John Doe

John Doe

Vijay Kumar

<p><span class="icon icon--candidate icon--left" aria-hidden="true"></span> John Doe</p>
<p>John Doe <span class="icon icon--candidate icon--right" aria-hidden="true"></span></p>
<p><span class="icon icon--candidate icon--left icon--large icon--middle" aria-hidden="true"></span> Vijay Kumar</p>