roobie/docs/components/emphasis.md

A collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web & mobile applications with 100s of pre-built CSS classes at your fingertips.

# Emphasis
Emphasize a block of content.

## Basic
<div class="col">
    <span class="emphasis">Base</span>
    <span class="emphasis emphasis-primary">Primary</span>
    <span class="emphasis emphasis-secondary">Seconday</span>
    <span class="emphasis emphasis-success">Success</span>
    <span class="emphasis emphasis-warning">Warning</span>
    <span class="emphasis emphasis-danger">Danger</span>
    <span class="emphasis emphasis-info">Info</span>
</div>

```html
<div class="col">
    <span class="emphasis">Base</span>
    <span class="emphasis emphasis-primary">Primary</span>
    <span class="emphasis emphasis-secondary">Seconday</span>
    <span class="emphasis emphasis-success">Success</span>
    <span class="emphasis emphasis-warning">Warning</span>
    <span class="emphasis emphasis-danger">Danger</span>
    <span class="emphasis emphasis-info">Info</span>
</div>
```

## Content
<div class="col">
    <span class="emphasis emphasis-success">
        <h3 class="success">Success</h3>
        <p>We have successfully completed your request.</p>
    </span>
    <span class="emphasis emphasis-warning">
        <h3 class="warning">Warning</h3>
        <p>There are too many users online.</p>
    </span>
    <span class="emphasis emphasis-danger">
        <h3 class="danger">Danger</h3>
        <p>The system temperature is very hot.</p>
    </span>
    <span class="emphasis emphasis-info">
        <h3 class="info">Info</h3>
        <p>You have 3.3M followers.</p>
    </span>
</div>

```html
<div class="col">
    <span class="emphasis emphasis-success">
        <h3 class="success">Success</h3>
        <p>We have successfully completed your request.</p>
    </span>
    <span class="emphasis emphasis-warning">
        <h3 class="warning">Warning</h3>
        <p>There are too many users online.</p>
    </span>
    <span class="emphasis emphasis-danger">
        <h3 class="danger">Danger</h3>
        <p>The system temperature is very hot.</p>
    </span>
    <span class="emphasis emphasis-info">
        <h3 class="info">Info</h3>
        <p>You have 3.3M followers.</p>
    </span>
</div>
```

## Build Your Own
<div class="col col-spacer1">
    <span class="bg2 br3 pad padl4 bdrl5 bdr-indigo">
        <h3 class="indigo">Indigo</h3>
        <p>Easily customize your own using utilities.</p>
    </span>
    <span class="bg2 br1 pad3 bdrl3 bdr-blue2">
        <h3 class="blue2">Violet</h3>
        <p>Easily customize your own using utilities.</p>
    </span>
</div>

```html
<div class="col col-spacer1">
    <span class="bg2 br3 pad padl4 bdrl5 bdr-indigo">
        <h3 class="indigo">Indigo</h3>
        <p>Easily customize your own using utilities.</p>
    </span>
    <span class="bg2 br1 pad3 bdrl3 bdr-blue2">
        <h3 class="blue2">Violet</h3>
        <p>Easily customize your own using utilities.</p>
    </span>
</div>
```