| Vapor CSS

Badge

Use to indicate a special feature or status

Style sheet: /scss/components/badge.scss

New Awesome feature Cool badge Even cooler badge
<div>
    <span class="badge">New</span>
    <span class="badge bg-blue">Awesome feature</span>
    <span class="badge bg-medium-blue">Cool badge</span>
    <span class="badge bg-darker-blue">Even cooler badge</span>
</div>
<div class='banner flex center-align bg-orange'>
    <div class="banner-description">
        The release of March 2016 includes significant content update
        <button type="button" class="btn text-orange">Learn More</button>
    </div>

    <svg width="512" height="512" viewBox="0 0 512 512" class="icon fill-pure-white mod-lg">
        <path d="M480.002 96l-64-63.998-160 159.998-160-160-64 63.998L192.004 256l-160 159.998 64 64 160-159.998 159.994 159.994 64-64L320.003 256"></path>
    </svg>
</div>

Blank Slate

Use it to provide information when no dynamic content exists

Style sheet: /scss/components/blankslate.scss

This is a blank slate

Use it to provide information when no dynamic content exists.

This is a blank slate

Use it to provide information when no dynamic content exists.

This is a blank slate

This is a blank slate with mod-small

This is a blank slate with mod-danger

<div class="blankslate m2">
  <h1>This is a blank slate</h1>
  <p>Use it to provide information when no dynamic content exists.</p>
  <button class="btn mod-primary">
    Call to action
  </button>
</div>

<div class="blankslate m2">
  <h1>This is a blank slate</h1>
  <p>Use it to provide information when no dynamic content exists.</p>
</div>

<div class="blankslate m2">
  <h1>This is a blank slate</h1>
</div>

<div class="blankslate m2 mod-small">
  <h1>This is a blank slate with mod-small</h1>
</div>

<div class="blankslate m2 mod-danger">
  <h1>This is a blank slate with mod-danger</h1>
</div>
<nav class="breadcrumb-nav">
    <ul>
        <li class="breadcrumb-title">
            <a class="link" href="#">Pichu</a>
            <span class="breadcrumb-arrow">
                    <svg viewBox="0 0 20 20">
                            <path d="M8.5,15.2l4.3-4.6c0.3-0.4,0.3-0.9,0-1.3L8.4,4.8c-0.3-0.4-0.9-0.4-1.2,0c-0.3,0.4-0.3,0.9,0,1.3l3.7,4
                                l-3.7,3.9c-0.3,0.4-0.3,0.9,0,1.3C7.6,15.6,8.2,15.6,8.5,15.2z"/>
                    </svg>
                </span>
        </li>
        <li class="breadcrumb-title">
            <a class="link" href="#">Pikachu</a>
            <span class="breadcrumb-arrow">
                    <svg viewBox="0 0 20 20">
                        <path d="M8.5,15.2l4.3-4.6c0.3-0.4,0.3-0.9,0-1.3L8.4,4.8c-0.3-0.4-0.9-0.4-1.2,0c-0.3,0.4-0.3,0.9,0,1.3l3.7,4
                                    l-3.7,3.9c-0.3,0.4-0.3,0.9,0,1.3C7.6,15.6,8.2,15.6,8.5,15.2z"/>
                    </svg>
                </span>
        </li>
        <li class="breadcrumb-title">
            <div class="flex flex-center">
                <h1 class="inline bold text-medium-blue mr1 truncate">
                    <span>Raichu</span>
                </h1>
                <span>
                        <svg viewBox="-948 530 22 22" class="fill-orange icon mod-20"><path
                                d="M-937 532c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9"
                                fill="#f7f8f9"></path><path
                                d="M-937 532c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9m0 20c-6.1 0-11-4.9-11-11s4.9-11 11-11 11 4.9 11 11-4.9 11-11 11"></path><path
                                d="M-937 534.7c-2.2 0-4 1.8-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.8-3 5h2c0-2.2 3-2.5 3-5 0-2.3-1.8-4-4-4m-1 12.3h2v-2h-2v2"></path>
                        </svg>
                    </span>
            </div>
        </li>
    </ul>
</nav>

Calendar & Date Picker

Style sheet: /scss/components/calendar.scss

January
2017
Sun Mon Tue Wed Thu Fri Sat
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 1 2 3 4

Date Range

-
January
2017
Sun Mon Tue Wed Thu Fri Sat
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 1 2 3 4

Date Range

-
<div class="date-picker-box flex flex-column">
    <div class="split-layout">
        <div class="calendar column">
            <div class="calendar-header p2">
                <div div class="options-cycle text-medium-blue mod-inline">
                    <button class="options-cycle-button">
                        <span><svg viewBox="0 0 20 20" class="icon fill-medium-blue"><path d="M11.5 4.8L7.2 9.3c-.3.4-.3.9 0 1.3l4.3 4.6c.3.4.9.4 1.2 0 .3-.4.3-.9 0-1.3L9 9.9 12.7 6c.3-.4.3-.9 0-1.3-.3-.3-.9-.3-1.2.1z"></path></svg></span>
                    </button>
                    <span class="options-cycle-option">January</span>
                    <button class="options-cycle-button">
                        <span><svg viewBox="0 0 20 20" class="icon fill-medium-blue"><path d="M8.5 15.2l4.3-4.6c.3-.4.3-.9 0-1.3L8.4 4.8c-.3-.4-.9-.4-1.2 0-.3.4-.3.9 0 1.3l3.7 4L7.2 14c-.3.4-.3.9 0 1.3.4.3 1 .3 1.3-.1z"></path></svg></span>
                    </button>
                </div>
                <div class="options-cycle text-medium-blue mod-inline">
                    <button class="options-cycle-button">
                        <span><svg viewBox="0 0 20 20" class="icon fill-medium-blue"><path d="M11.5 4.8L7.2 9.3c-.3.4-.3.9 0 1.3l4.3 4.6c.3.4.9.4 1.2 0 .3-.4.3-.9 0-1.3L9 9.9 12.7 6c.3-.4.3-.9 0-1.3-.3-.3-.9-.3-1.2.1z"></path></svg></span>
                    </button>
                    <span class="options-cycle-option">2017</span>
                    <button class="options-cycle-button">
                        <span><svg viewBox="0 0 20 20" class="icon fill-medium-blue"><path d="M8.5 15.2l4.3-4.6c.3-.4.3-.9 0-1.3L8.4 4.8c-.3-.4-.9-.4-1.2 0-.3.4-.3.9 0 1.3l3.7 4L7.2 14c-.3.4-.3.9 0 1.3.4.3 1 .3 1.3-.1z"></path></svg></span>
                    </button>
                </div>
            </div>
            <table class="calendar-grid">
                <thead class="mod-no-border-top">
                <tr>
                    <th>Sun</th>
                    <th>Mon</th>
                    <th>Tue</th>
                    <th>Wed</th>
                    <th>Thu</th>
                    <th>Fri</th>
                    <th>Sat</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><span class="other-month-date">29</span></td>
                    <td><span class="other-month-date">30</span></td>
                    <td><span class="other-month-date">31</span></td>
                    <td><span class="selected-date bg-blue lower-limit upper-limit">1<span></span></span></td>
                    <td><span>2</span></td>
                    <td><span>3</span></td>
                    <td><span>4</span></td>
                </tr>
                <tr>
                    <td><span>5</span></td>
                    <td><span>6</span></td>
                    <td><span>7</span></td>
                    <td><span>8</span></td>
                    <td><span>9</span></td>
                    <td><span>10</span></td>
                    <td><span>11</span></td>
                </tr>
                <tr>
                    <td><span>12</span></td>
                    <td><span>13</span></td>
                    <td><span>14</span></td>
                    <td><span>15</span></td>
                    <td><span>16</span></td>
                    <td><span>17</span></td>
                    <td><span>18</span></td>
                </tr>
                <tr>
                    <td><span>19</span></td>
                    <td><span>20</span></td>
                    <td><span>21</span></td>
                    <td><span>22</span></td>
                    <td><span>23</span></td>
                    <td><span>24</span></td>
                    <td><span>25</span></td>
                </tr>
                <tr>
                    <td><span>26</span></td>
                    <td><span>27</span></td>
                    <td><span>28</span></td>
                    <td><span class="other-month-date">1</span></td>
                    <td><span class="other-month-date">2</span></td>
                    <td><span class="other-month-date">3</span></td>
                    <td><span class="other-month-date">4</span></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="date-selection column p2">
            <h3 class="bold text-medium-blue">Date Range</h3>
            <ul class="option-picker flex flex-wrap mt2 mb2">
                <li>
                    <button class="active">Last 10 seconds</button>
                </li>
                <li>
                    <button>Last minute</button>
                </li>
                <li>
                    <button>Last 5 minutes</button>
                </li>
                <li>
                    <button>Last 30 minutes</button>
                </li>
                <li>
                    <button>Last hour</button>
                </li>
                <li>
                    <button>Last day</button>
                </li>
            </ul>
            <div>
                <div class="date-picker flex">
                    <input value="2017-01-30 13:26:57:238"/>
                    <button title="Set to now" class="date-button">
                        <span class="fill-medium-blue"><svg viewbox="0 0 18 18"><path d="M0 1h18v16H0V1m2 4v10h14V5H2m9 6h3v2h-3v-2"/></svg></span>
                    </button>
                </div>
                <span class="date-separator mod-vertical">
                    <span>-</span>
                </span>
                <div class="date-picker flex">
                    <input value="2017-01-30 13:26:57:238"/>
                    <button title="Set to now" class="date-button">
                        <span class="fill-medium-blue"><svg viewbox="0 0 18 18"><path d="M0 1h18v16H0V1m2 4v10h14V5H2m9 6h3v2h-3v-2"/></svg></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <footer class="modal-footer mod-small">
        <button class="btn mod-primary mod-small">Apply</button>
        <button class="btn mod-small">Cancel</button>
    </footer>
</div>

<div class="date-picker-box flex flex-column mt2">
    <div class="split-layout">
        <div class="calendar column">
            <div class="calendar-header p2">
                <div div class="options-cycle text-medium-blue mod-inline">
                    <button class="options-cycle-button">
                        <span><svg viewBox="0 0 20 20" class="icon fill-medium-blue"><path d="M11.5 4.8L7.2 9.3c-.3.4-.3.9 0 1.3l4.3 4.6c.3.4.9.4 1.2 0 .3-.4.3-.9 0-1.3L9 9.9 12.7 6c.3-.4.3-.9 0-1.3-.3-.3-.9-.3-1.2.1z"></path></svg></span>
                    </button>
                    <span class="options-cycle-option">January</span>
                    <button class="options-cycle-button">
                        <span><svg viewBox="0 0 20 20" class="icon fill-medium-blue"><path d="M8.5 15.2l4.3-4.6c.3-.4.3-.9 0-1.3L8.4 4.8c-.3-.4-.9-.4-1.2 0-.3.4-.3.9 0 1.3l3.7 4L7.2 14c-.3.4-.3.9 0 1.3.4.3 1 .3 1.3-.1z"></path></svg></span>
                    </button>
                </div>
                <div class="options-cycle text-medium-blue mod-inline">
                    <button class="options-cycle-button">
                        <span><svg viewBox="0 0 20 20" class="icon fill-medium-blue"><path d="M11.5 4.8L7.2 9.3c-.3.4-.3.9 0 1.3l4.3 4.6c.3.4.9.4 1.2 0 .3-.4.3-.9 0-1.3L9 9.9 12.7 6c.3-.4.3-.9 0-1.3-.3-.3-.9-.3-1.2.1z"></path></svg></span>
                    </button>
                    <span class="options-cycle-option">2017</span>
                    <button class="options-cycle-button">
                        <span><svg viewBox="0 0 20 20" class="icon fill-medium-blue"><path d="M8.5 15.2l4.3-4.6c.3-.4.3-.9 0-1.3L8.4 4.8c-.3-.4-.9-.4-1.2 0-.3.4-.3.9 0 1.3l3.7 4L7.2 14c-.3.4-.3.9 0 1.3.4.3 1 .3 1.3-.1z"></path></svg></span>
                    </button>
                </div>
            </div>
            <table class="calendar-grid">
                <thead class="mod-no-border-top">
                <tr>
                    <th>Sun</th>
                    <th>Mon</th>
                    <th>Tue</th>
                    <th>Wed</th>
                    <th>Thu</th>
                    <th>Fri</th>
                    <th>Sat</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><span class="other-month-date">29</span></td>
                    <td><span class="other-month-date">30</span></td>
                    <td><span class="other-month-date">31</span></td>
                    <td><span class="selected-date bg-blue lower-limit">1</span></td>
                    <td><span class="todays-date selected-date bg-blue upper-limit">2</span></td>
                    <td><span>3</span></td>
                    <td><span>4</span></td>
                </tr>
                <tr>
                    <td><span>5</span></td>
                    <td><span>6</span></td>
                    <td><span>7</span></td>
                    <td><span>8</span></td>
                    <td><span>9</span></td>
                    <td><span>10</span></td>
                    <td><span>11</span></td>
                </tr>
                <tr>
                    <td><span>12</span></td>
                    <td><span>13</span></td>
                    <td><span>14</span></td>
                    <td><span>15</span></td>
                    <td><span>16</span></td>
                    <td><span>17</span></td>
                    <td><span>18</span></td>
                </tr>
                <tr>
                    <td><span>19</span></td>
                    <td><span>20</span></td>
                    <td><span>21</span></td>
                    <td><span>22</span></td>
                    <td><span>23</span></td>
                    <td><span>24</span></td>
                    <td><span>25</span></td>
                </tr>
                <tr>
                    <td><span>26</span></td>
                    <td><span>27</span></td>
                    <td><span>28</span></td>
                    <td><span class="other-month-date">1</span></td>
                    <td><span class="other-month-date">2</span></td>
                    <td><span class="other-month-date">3</span></td>
                    <td><span class="other-month-date">4</span></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="date-selection column p2">
            <h3 class="bold text-medium-blue">Date Range</h3>
            <ul class="option-picker flex flex-wrap mt2 mb2">
                <li>
                    <button class="active">Last 10 seconds</button>
                </li>
                <li>
                    <button>Last minute</button>
                </li>
                <li>
                    <button>Last 5 minutes</button>
                </li>
                <li>
                    <button>Last 30 minutes</button>
                </li>
                <li>
                    <button>Last hour</button>
                </li>
                <li>
                    <button>Last day</button>
                </li>
            </ul>
            <div class="mod-inline flex">
                <div class="date-picker">
                    <input value="Jan 30, 2017" class="border-blue bg-blue date-picked"/>
                </div>
                <span class="date-separator">
                    <span>-</span>
                </span>
                <div class="date-picker">
                    <input value="Jan 30, 2017" class="border-blue picking-date"/>
                </div>
            </div>
            <button type="button" class="clear-selection-button mt2">Clear</button>
        </div>
    </div>
    <footer class="modal-footer mod-small">
        <button class="btn mod-primary mod-small">Apply</button>
        <button class="btn mod-small">Cancel</button>
    </footer>
</div>

<div class="date-picker-dropdown mt2">
    <div class="dropdown-wrapper open">
        <span class="dropdown-toggle btn inline-flex flex-center">
            <span class="dropdown-selected-value"><label>Select date</label></span>
            <span class="dropdown-toggle-arrow"></span>
        </span>
        <div class="dropdown-menu date-picker-box flex flex-column">
            <div class="split-layout">
                <div class="calendar column">
                    <div class="calendar-header p2">
                        <div class="options-cycle text-medium-blue mod-inline">
                            <button class="options-cycle-button previous-option">
                                <span><svg viewBox="0 0 20 20" class="icon fill-dark-blue"><path
                                        d="M11.5 4.8L7.2 9.3c-.3.4-.3.9 0 1.3l4.3 4.6c.3.4.9.4 1.2 0 .3-.4.3-.9 0-1.3L9 9.9 12.7 6c.3-.4.3-.9 0-1.3-.3-.3-.9-.3-1.2.1z"></path></svg></span>
                            </button>
                            <span class="options-cycle-option">February</span>
                            <button class="options-cycle-button next-option">
                                <span><svg viewBox="0 0 20 20" class="icon fill-dark-blue"><path
                                        d="M8.5 15.2l4.3-4.6c.3-.4.3-.9 0-1.3L8.4 4.8c-.3-.4-.9-.4-1.2 0-.3.4-.3.9 0 1.3l3.7 4L7.2 14c-.3.4-.3.9 0 1.3.4.3 1 .3 1.3-.1z"></path></svg></span>
                            </button>
                        </div>
                        <div class="options-cycle text-medium-blue mod-inline">
                            <button class="options-cycle-button previous-option"><span><svg viewBox="0 0 20 20"
                                                                                            class="icon fill-dark-blue"><path
                                    d="M11.5 4.8L7.2 9.3c-.3.4-.3.9 0 1.3l4.3 4.6c.3.4.9.4 1.2 0 .3-.4.3-.9 0-1.3L9 9.9 12.7 6c.3-.4.3-.9 0-1.3-.3-.3-.9-.3-1.2.1z"></path></svg></span>
                            </button>
                            <span class="options-cycle-option">2017</span>
                            <button class="options-cycle-button next-option"><span><svg viewBox="0 0 20 20"
                                                                                        class="icon fill-dark-blue"><path
                                    d="M8.5 15.2l4.3-4.6c.3-.4.3-.9 0-1.3L8.4 4.8c-.3-.4-.9-.4-1.2 0-.3.4-.3.9 0 1.3l3.7 4L7.2 14c-.3.4-.3.9 0 1.3.4.3 1 .3 1.3-.1z"></path></svg></span>
                            </button>
                        </div>
                    </div>
                    <table class="calendar-grid">
                        <thead class="mod-no-border-top">
                        <tr>
                            <th>Sun</th>
                            <th>Mon</th>
                            <th>Tue</th>
                            <th>Wed</th>
                            <th>Thu</th>
                            <th>Fri</th>
                            <th>Sat</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><span class="other-month-date">29
                                </span></td>
                            <td><span class="other-month-date">30
                                </span></td>
                            <td><span class="other-month-date">31
                                </span></td>
                            <td><span>1</span></td>
                            <td><span>2</span></td>
                            <td><span class="todays-date selected-date bg-blue lower-limit upper-limit">3
                                <span></span></span></td>
                            <td><span>4</span></td>
                        </tr>
                        <tr>
                            <td><span>5</span></td>
                            <td><span>6</span></td>
                            <td><span>7</span></td>
                            <td><span>8</span></td>
                            <td><span>9</span></td>
                            <td><span>10</span></td>
                            <td><span>11</span></td>
                        </tr>
                        <tr>
                            <td><span>12</span></td>
                            <td><span>13</span></td>
                            <td><span>14</span></td>
                            <td><span>15</span></td>
                            <td><span>16</span></td>
                            <td><span>17</span></td>
                            <td><span>18</span></td>
                        </tr>
                        <tr>
                            <td><span>19</span></td>
                            <td><span>20</span></td>
                            <td><span>21</span></td>
                            <td><span>22</span></td>
                            <td><span>23</span></td>
                            <td><span>24</span></td>
                            <td><span>25</span></td>
                        </tr>
                        <tr>
                            <td><span>26</span></td>
                            <td><span>27</span></td>
                            <td><span>28</span></td>
                            <td><span class="other-month-date">1
                                </span></td>
                            <td><span class="other-month-date">2
                                </span></td>
                            <td><span class="other-month-date">3
                                </span></td>
                            <td><span class="other-month-date">4
                                </span></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="date-selection column p2">
                    <div><h3 class="bold text-medium-blue">Date range</h3>
                        <ul class="option-picker flex flex-wrap mt2 mb2">
                            <li>
                                <button>Last 10 seconds</button>
                            </li>
                            <li>
                                <button>Last minute</button>
                            </li>
                            <li>
                                <button>Last 5 minutes</button>
                            </li>
                            <li>
                                <button>Last 30 minutes</button>
                            </li>
                            <li>
                                <button>Last hour</button>
                            </li>
                            <li>
                                <button>Last day</button>
                            </li>
                        </ul>
                        <div>
                            <div class="date-picker flex">
                                <input>
                                <span title="" data-original-title="Set to now">
                                    <button class="date-button">
                                        <span class="fill-medium-blue"><svg viewbox="0 0 18 18"><path d="M0 1h18v16H0V1m2 4v10h14V5H2m9 6h3v2h-3v-2"/></svg></span>
                                    </button>
                                </span>
                            </div>
                            <span class="date-separator mod-vertical"><span>-</span></span>
                            <div class="date-picker flex">
                                <input>
                                <span title="" data-original-title="Set to now">
                                    <button class="date-button">
                                        <span class="fill-medium-blue"><svg viewbox="0 0 18 18"><path d="M0 1h18v16H0V1m2 4v10h14V5H2m9 6h3v2h-3v-2"/></svg></span>
                                    </button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <footer class="modal-footer mod-small">
                <button class="btn mod-primary mod-small">Apply</button>
                <button class="btn mod-small">Cancel</button>
            </footer>
        </div>
    </div>
</div>

Collapsible

Simple accordion elements based on Materialize Collapsible.

Style sheet: /scss/components/collapsible.scss

  • Lorem ipsum dolor sit amet.

<ul class="collapsible" data-collapsible="expandable">
    <li>
        <button type="button" class="collapsible-header active btn with-icon">
            Text example
        </button>
        <div class="collapsible-body">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </li>
    <li>
        <button type="button" class="collapsible-header btn with-icon">
            Inputs
        </button>
        <div class="collapsible-body">
            <div class="coveo-form">
                <fieldset class="form-group input-field mod-fixed-width">
                    <input type="text" required/>
                    <label>Input 1</label>
                </fieldset>
                <fieldset class="form-group input-field mod-fixed-width">
                    <input type="text" required/>
                    <label>Input 2</label>
                </fieldset>
            </div>
        </div>
    </li>
</ul>

Content placeholder

Style to use when content is loading

Style sheet: /scss/components/material-card.scss

This can be animated too.
This could be an image placeholder too.
<div class="mb2">
    <div class="content-placeholder inline-block" style="height: 16px;width: 20%;">
    </div>
    <div class="content-placeholder ml1 inline-block" style="height: 16px;width: 50%;">
    </div>
</div>

<div>
    <div class="content-placeholder content-placeholder-animated inline-block" style="height: 16px;width: 50%;">
    </div>
</div>
<div>This can be animated too.</div>


<div>
    <div class="content-placeholder mt2 mb1" style="height: 64px;width: 64px;">
    </div>
    <div>This could be an image placeholder too.</div>
</div>

Corner ribbon

Use to indicate a component special state

Style sheet: /scss/components/corner-ribbon.scss

Top Right
Top Left
Bottom Right
Bottom Left
Ribbon
Ribbon
<div class="ribbon-container bg-white" style="width:200px; height:200px">
    <div class="corner-ribbon top right">Top Right</div>
    <div class="corner-ribbon top left">Top Left</div>
    <div class="corner-ribbon bottom right">Bottom Right</div>
    <div class="corner-ribbon bottom left">Bottom Left</div>
</div>
<div class="ribbon-container bg-white mt2" style="width:200px; height:100px">
    <div class="corner-ribbon top right bold bg-orange text-black">Ribbon</div>
    <div class="corner-ribbon top left bold bg-pure-white text-red mod-border border-red">Ribbon</div>
</div>

Facet

Facet styling

Style sheet: /scss/components/facet.scss

Facet title
Facet title
Facet title
Facet title
Facet with count
<div class="flex">
    <div class="facet-column">
        <div class="facet">
            <div class="facet-header">
                <div class="facet-header-eraser hidden">
                    <span class="icon fill-medium-grey">
                        <svg viewbox="0 0 18 18"><path d="M18 2l-1.8-2-7.1 7.1L2 0 0 2l7.1 7.1L0 16.2 2 18l7.1-6.9 7.1 6.9 1.8-1.8-6.9-7.1z"/></svg>
                    </span>
                </div>
                <div class="facet-header-title text-medium-blue">Facet title</div>
                <div class="facet-header-wait-animation" style="display: none;"></div>
            </div>
            <ul class="facet-values">
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">First facet value</span>
                    </label>
                </li>
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">Second facet value</span>
                    </label>
                </li>
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">Third</span>
                    </label>
                </li>
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">Fourth facet value</span>
                    </label>
                </li>
                <li class="facet-value facet-selectable facet-more">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <span class="facet-more-button" type="button"></span>
                        <span class="label">More</span>
                    </label>
                </li>
            </ul>
            <div class="facet-more-search hidden">
                <div class="facet-search">
                    <div class="coveo-filter-container">
                        <input type="text" class="filter-box" placeholder="Filter">
                        <span class="hide"></span>
                        <span class="filter-icon icon mod-lg fill-medium-grey">
                        <svg viewbox="0 0 18 18"><path d="M9 1.541c4.976 0 7.101 1.333 7.459 1.712l-.032.046c-.629.649-3.201 1.677-7.427 1.677-4.24 0-6.802-1.024-7.413-1.659l-.046-.065C1.903 2.872 4.028 1.541 9 1.541M3.354 5.81c1.591.456 3.582.705 5.646.705s4.056-.249 5.646-.705l-4.484 6.329-.037.051v4.075c-.912.542-1.78.247-2.25-.004v-4.07L3.354 5.81M18 3.258C18 1.432 14.048.001 9 .001c-5.05 0-9 1.43-9 3.257 0 .167.035.337.104.506L.17 3.9c.042.071.132.222.194.297l6.02 8.496v4.158l.216.195c.106.098 1.072.955 2.47.955.882 0 1.679-.303 2.37-.905l.177-.171v-4.232l6.01-8.486c.067-.083.121-.158.157-.22l.047-.075.062-.145A1.3 1.3 0 0 0 18 3.258"/></svg>
                    </span>
                    </div>
                </div>
                <ul class="facet-search-results">
                    <li class="facet-value facet-selectable facet-search-selectable">
                        <label class="coveo-checkbox-label facet-value-label">
                            <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                            <button type="button"></button>
                            <span class="label">2010</span>
                        </label>
                    </li>
                    <li class="facet-value facet-selectable facet-search-selectable">
                        <label class="coveo-checkbox-label facet-value-label">
                            <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                            <button type="button"></button>
                            <span class="label">2009</span>
                        </label>
                    </li>
                    <li class="facet-value facet-selectable facet-search-selectable">
                        <label class="coveo-checkbox-label facet-value-label">
                            <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                            <button type="button"></button>
                            <span class="label">2008</span>
                        </label>
                    </li>
                    <li class="facet-value facet-selectable facet-search-selectable">
                        <label class="coveo-checkbox-label facet-value-label">
                            <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                            <button type="button"></button>
                            <span class="label">2007</span>
                        </label>
                    </li>
                    <li class="facet-value facet-selectable facet-search-selectable">
                        <label class="facet-value-label">
                            <label class="coveo-checkbox-label facet-value-label">
                                <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                                <button type="button"></button>
                                <span class="label">2006</span>
                            </label>
                        </label>
                    </li>
                    <li class="facet-value facet-selectable facet-search-selectable">
                        <label class="coveo-checkbox-label facet-value-label">
                            <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                            <button type="button"></button>
                            <span class="label">2002</span>
                        </label>
                    </li>
                    <li class="facet-value facet-selectable facet-search-selectable">
                        <label class="coveo-checkbox-label facet-value-label">
                            <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                            <button type="button"></button>
                            <span class="label">1996</span>
                        </label>
                    </li>
                </ul>
            </div>
        </div>
        <div class="facet facet-opened">
            <div class="facet-header">
                <div class="facet-header-eraser hidden">
                    <span class="icon fill-medium-grey">
                        <svg viewbox="0 0 18 18"><path d="M18 2l-1.8-2-7.1 7.1L2 0 0 2l7.1 7.1L0 16.2 2 18l7.1-6.9 7.1 6.9 1.8-1.8-6.9-7.1z"/></svg>
                    </span>
                </div>
                <div class="facet-header-title text-medium-blue">Facet title</div>
                <div class="facet-header-wait-animation" style="display: none;"></div>
            </div>
            <ul class="facet-values">
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">First facet value</span>
                    </label>
                </li>
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">Second facet value</span>
                    </label>
                </li>
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">Third facet value</span>
                    </label>
                </li>
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">Fourth facet value</span>
                    </label>
                </li>
                <li class="facet-value facet-selectable facet-more hidden">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <span class="facet-more-button"></span>
                        <span class="label">More</span>
                    </label>
                </li>
            </ul>
            <div class="facet-more-search">
                <div class="facet-search">
                    <div class="coveo-filter-container">
                        <input type="text" class="filter-box" placeholder="Filter">
                        <span class="hide"></span>
                        <span class="filter-icon icon mod-lg fill-medium-grey">
                        <svg viewbox="0 0 18 18"><path d="M9 1.541c4.976 0 7.101 1.333 7.459 1.712l-.032.046c-.629.649-3.201 1.677-7.427 1.677-4.24 0-6.802-1.024-7.413-1.659l-.046-.065C1.903 2.872 4.028 1.541 9 1.541M3.354 5.81c1.591.456 3.582.705 5.646.705s4.056-.249 5.646-.705l-4.484 6.329-.037.051v4.075c-.912.542-1.78.247-2.25-.004v-4.07L3.354 5.81M18 3.258C18 1.432 14.048.001 9 .001c-5.05 0-9 1.43-9 3.257 0 .167.035.337.104.506L.17 3.9c.042.071.132.222.194.297l6.02 8.496v4.158l.216.195c.106.098 1.072.955 2.47.955.882 0 1.679-.303 2.37-.905l.177-.171v-4.232l6.01-8.486c.067-.083.121-.158.157-.22l.047-.075.062-.145A1.3 1.3 0 0 0 18 3.258"/></svg>
                    </span>
                    </div>
                </div>
                <ul class="facet-search-results">
                    <li class="facet-value facet-selectable facet-search-selectable">
                        <label class="coveo-checkbox-label facet-value-label">
                            <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                            <button type="button"></button>
                            <span class="label">2010</span>
                        </label>
                    </li>
                    <li class="facet-value facet-selectable facet-search-selectable">
                        <label class="coveo-checkbox-label facet-value-label">
                            <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                            <button type="button"></button>
                            <span class="label">2009</span>
                        </label>
                    </li>
                    <li class="facet-value facet-selectable facet-search-selectable">
                        <label class="coveo-checkbox-label facet-value-label">
                            <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                            <button type="button"></button>
                            <span class="label">2008</span>
                        </label>
                    </li>
                    <li class="facet-value facet-selectable facet-search-selectable">
                        <label class="coveo-checkbox-label facet-value-label">
                            <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                            <button type="button"></button>
                            <span class="label">2007</span>
                        </label>
                    </li>
                    <li class="facet-value facet-selectable facet-search-selectable">
                        <label class="coveo-checkbox-label facet-value-label">
                            <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                            <button type="button"></button>
                            <span class="label">2006</span>
                        </label>
                    </li>
                    <li class="facet-value facet-selectable facet-search-selectable">
                        <label class="coveo-checkbox-label facet-value-label">
                            <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                            <button type="button"></button>
                            <span class="label">2003</span>
                        </label>
                    </li>
                    <li class="facet-value facet-selectable facet-search-selectable">
                        <label class="coveo-checkbox-label facet-value-label">
                            <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                            <button type="button"></button>
                            <span class="label">2001</span>
                        </label>
                    </li>
                </ul>
            </div>
        </div>
        <div class="facet">
            <div class="facet-header">
                <div class="facet-header-eraser">
                    <span class="icon fill-medium-grey">
                        <svg viewbox="0 0 18 18"><path d="M18 2l-1.8-2-7.1 7.1L2 0 0 2l7.1 7.1L0 16.2 2 18l7.1-6.9 7.1 6.9 1.8-1.8-6.9-7.1z"/></svg>
                    </span>
                </div>
                <div class="facet-header-title text-medium-blue">Facet title</div>
            </div>
            <ul class="facet-values">
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">First facet value</span>
                    </label>
                </li>
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">Second facet value</span>
                    </label>
                </li>
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">Third facet value</span>
                    </label>
                </li>
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">Fourth facet value</span>
                    </label>
                </li>
            </ul>
        </div>
    </div>
    <div class="facet-column">
        <div class="facet">
            <div class="facet-header">
                <div class="facet-header-eraser">
                    <span class="icon fill-medium-grey">
                        <svg viewbox="0 0 18 18"><path d="M18 2l-1.8-2-7.1 7.1L2 0 0 2l7.1 7.1L0 16.2 2 18l7.1-6.9 7.1 6.9 1.8-1.8-6.9-7.1z"/></svg>
                    </span>
                </div>
                <div class="facet-header-title text-medium-blue">Facet title</div>
            </div>
            <ul class="facet-values">
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" checked class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">First facet value</span>
                    </label>
                </li>
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">Second facet value</span>
                    </label>
                </li>
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">Third facet value</span>
                    </label>
                </li>
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">Fourth facet value</span>
                    </label>
                </li>
            </ul>
        </div>
        <div class="facet">
            <div class="facet-header">
                <div class="facet-header-eraser">
                    <span class="icon fill-medium-grey">
                        <svg viewbox="0 0 18 18"><path d="M18 2l-1.8-2-7.1 7.1L2 0 0 2l7.1 7.1L0 16.2 2 18l7.1-6.9 7.1 6.9 1.8-1.8-6.9-7.1z"/></svg>
                    </span>
                </div>
                <div class="facet-header-title text-medium-blue">Facet with count</div>
            </div>
            <ul class="facet-values">
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" checked class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">First facet value</span>
                        <span class="facet-value-count">10</span>
                    </label>
                </li>
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">Second facet value</span>
                        <span class="facet-value-count">3145</span>
                    </label>
                </li>
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">Third facet value</span>
                        <span class="facet-value-count">2</span>
                    </label>
                </li>
                <li class="facet-value facet-selectable">
                    <label class="coveo-checkbox-label facet-value-label">
                        <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                        <button type="button"></button>
                        <span class="label">Longer fourth facet value to see overflow</span>
                        <span class="facet-value-count">94398</span>
                    </label>
                </li>
            </ul>
            <div class="facet-more-search">
                <div class="facet-search">
                    <div class="coveo-filter-container">
                        <input type="text" class="filter-box" placeholder="Filter">
                        <span class="hide"></span>
                        <span class="filter-icon icon mod-lg fill-medium-grey">
                        <svg viewbox="0 0 18 18"><path d="M9 1.541c4.976 0 7.101 1.333 7.459 1.712l-.032.046c-.629.649-3.201 1.677-7.427 1.677-4.24 0-6.802-1.024-7.413-1.659l-.046-.065C1.903 2.872 4.028 1.541 9 1.541M3.354 5.81c1.591.456 3.582.705 5.646.705s4.056-.249 5.646-.705l-4.484 6.329-.037.051v4.075c-.912.542-1.78.247-2.25-.004v-4.07L3.354 5.81M18 3.258C18 1.432 14.048.001 9 .001c-5.05 0-9 1.43-9 3.257 0 .167.035.337.104.506L.17 3.9c.042.071.132.222.194.297l6.02 8.496v4.158l.216.195c.106.098 1.072.955 2.47.955.882 0 1.679-.303 2.37-.905l.177-.171v-4.232l6.01-8.486c.067-.083.121-.158.157-.22l.047-.075.062-.145A1.3 1.3 0 0 0 18 3.258"/></svg>
                    </span>
                    </div>
                </div>
                <ul class="facet-search-results">
                    <li class="facet-value facet-selectable facet-search-selectable">
                        <label class="coveo-checkbox-label facet-value-label">
                            <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                            <button type="button"></button>
                            <span class="label">Search result</span>
                            <span class="facet-value-count">21</span>
                        </label>
                    </li>
                    <li class="facet-value facet-selectable facet-search-selectable">
                        <label class="coveo-checkbox-label facet-value-label">
                            <input type="checkbox" class="coveo-checkbox facet-checkbox-input">
                            <button type="button"></button>
                            <span class="label">Second longer search result</span>
                            <span class="facet-value-count">35743</span>
                        </label>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Card

Utils to apply style on card or container

Style sheet: /scss/components/card.scss

I am a card with a box shadow

I am a card with a box shadow on hover

<div class="mb2 card-content-box-shadow" style="width: 200px; height: 120px">
    <div class="p2">
        <h2>I am a card with a box shadow</h2>
    </div>
</div>

<div class="mb2 card-hover-box-shadow" style="width: 200px; height: 120px">
    <div class="p2">
        <h2>I am a card with a box shadow on hover</h2>
    </div>
</div>

Search Field

An input to use in a search context

Style sheet: /scss/components/material-card.scss

<div class="mb2">
    <div class='search-bar' style="width: 500px">
        <input type='text' class='search-bar-input' placeholder="Search awesome things">
        <div class='search-bar-icon-container'>
            <svg viewbox="0 0 15 15">
                <path d="M2.01 6.03a4.025 4.025 0 0 1 4.02-4.02 4.025 4.025 0 0 1 4.02 4.02 4.025 4.025 0 0 1-4.02 4.02 4.024 4.024 0 0 1-4.02-4.02m12.696 7.256l-3.769-3.768a5.991 5.991 0 0 0 1.12-3.487 6.036 6.036 0 0 0-6.03-6.03 6.036 6.036 0 0 0-6.03 6.03 6.036 6.036 0 0 0 6.03 6.03c1.3 0 2.502-.418 3.487-1.12l3.769 3.769a1.001 1.001 0 0 0 1.42 0 1.005 1.005 0 0 0 0-1.422"
                />
            </svg>
        </div>
    </div>
</div>

<div class="mb2">
    <div class='search-bar search-bar-disabled' style='width: 500px'>
        <input type='text' class='search-bar-input' placeholder="Search bar disabled. You cannot search awesome things yet." disabled>
        <div class='search-bar-icon-container'>
            <svg viewbox="0 0 15 15">
                <path d="M2.01 6.03a4.025 4.025 0 0 1 4.02-4.02 4.025 4.025 0 0 1 4.02 4.02 4.025 4.025 0 0 1-4.02 4.02 4.024 4.024 0 0 1-4.02-4.02m12.696 7.256l-3.769-3.768a5.991 5.991 0 0 0 1.12-3.487 6.036 6.036 0 0 0-6.03-6.03 6.036 6.036 0 0 0-6.03 6.03 6.036 6.036 0 0 0 6.03 6.03c1.3 0 2.502-.418 3.487-1.12l3.769 3.769a1.001 1.001 0 0 0 1.42 0 1.005 1.005 0 0 0 0-1.422"
                />
            </svg>
        </div>
    </div>
</div>

<div>
    <div class='search-bar search-bar-loading' style='width: 500px'>
        <input type='text' class='search-bar-input' placeholder="Currently searching...">
        <div class='search-bar-icon-container'>
            <div class='search-bar-spinner'></div>
        </div>
    </div>
</div>

List Box

Use when displaying a list of items with different state.

Style sheet: /scss/components/list-box.scss

  • Option 1 active
  • Option 2 selected
  • Option 3
  • Option 4
  • Option 5
  • Option 6
  • PrependOption 7
  • Option 8
  • Option 9
  • Option 10 disabled
  • Option 12
  • Option 13
  • Option 14
  • Multi line: Option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option
  • Without multi line: Option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option option
<ul class="list-box">
    <li class="item-box active">Option 1 active</li>
    <li class="item-box selected">Option 2 selected</li>
    <li class="item-box">Option 3</li>
    <li class="item-box">Option 4</li>
    <li class="item-box">Option 5</li>
    <li class="item-box">Option 6</li>
    <li class="item-box"><span class="text-medium-grey mr1">Prepend</span>Option 7</li>
    <li class="item-box">
        <span class="inline-flex mr1">
            <svg class="icon" viewBox="0 0 46 46" xmlns="http://www.w3.org/2000/svg">
              <path d="m45.99 23.54c0-1.627-.149-3.191-.426-4.693h-22.05v8.875h12.599c-.543 2.868-2.192 5.298-4.671 6.925v5.757h7.566c4.427-3.994 6.981-9.876 6.981-16.864"
                    fill="#4285f4"/>
              <path d="m23.516 45.962c6.321 0 11.62-2.054 15.493-5.559l-7.566-5.757c-2.096 1.377-4.778 2.19-7.928 2.19-6.097 0-11.258-4.04-13.1-9.459h-7.821v5.944c3.852 7.498 11.769 12.64 20.92 12.64"
                    fill="#34a853"/>
              <path d="m10.417 27.378c-.468-1.377-.734-2.847-.734-4.359 0-1.512.266-2.983.734-4.359v-5.944h-7.821c-1.586 3.097-2.49 6.601-2.49 10.304 0 3.702.905 7.206 2.49 10.304l7.821-5.944"
                    fill="#fbbc05"/>
              <path d="m23.516 9.2c3.437 0 6.523 1.158 8.949 3.431l6.715-6.581c-4.054-3.702-9.353-5.976-15.664-5.976-9.151 0-17.07 5.141-20.92 12.64l7.821 5.944c1.841-5.423 7-9.459 13.1-9.459"
                    fill="#ea4335"/>
            </svg>
        </span>
        Option 8
    </li>
    <li class="item-box">
        Option 9
        <span class="inline-flex ml1">
            <svg class="icon" viewBox="0 0 46 46" xmlns="http://www.w3.org/2000/svg">
              <path d="m45.99 23.54c0-1.627-.149-3.191-.426-4.693h-22.05v8.875h12.599c-.543 2.868-2.192 5.298-4.671 6.925v5.757h7.566c4.427-3.994 6.981-9.876 6.981-16.864"
                    fill="#4285f4"/>
              <path d="m23.516 45.962c6.321 0 11.62-2.054 15.493-5.559l-7.566-5.757c-2.096 1.377-4.778 2.19-7.928 2.19-6.097 0-11.258-4.04-13.1-9.459h-7.821v5.944c3.852 7.498 11.769 12.64 20.92 12.64"
                    fill="#34a853"/>
              <path d="m10.417 27.378c-.468-1.377-.734-2.847-.734-4.359 0-1.512.266-2.983.734-4.359v-5.944h-7.821c-1.586 3.097-2.49 6.601-2.49 10.304 0 3.702.905 7.206 2.49 10.304l7.821-5.944"
                    fill="#fbbc05"/>
              <path d="m23.516 9.2c3.437 0 6.523 1.158 8.949 3.431l6.715-6.581c-4.054-3.702-9.353-5.976-15.664-5.976-9.151 0-17.07 5.141-20.92 12.64l7.821 5.944c1.841-5.423 7-9.459 13.1-9.459"
                    fill="#ea4335"/>
            </svg>
        </span>
    </li>
    <li class="item-box disabled">Option 10 disabled</li>
    <li class="item-box divider"></li>
    <li class="item-box">Option 12</li>
    <li class="item-box">Option 13</li>
    <li class="item-box">Option 14</li>
    <li class="item-box multi-line">Multi line: Option option option option option option option option option option option option option
        option option option option option option option option option option option option option option option option option option option
        option option option option option option option option option option option option option option option option option option option
        option option option option option option option option option option option option option
    </li>
    <li class="item-box">Without multi line: Option option option option option option option option option option option option option
        option option option option option option option option option option option option option option option option option option option
        option option option option option option option option option option option option option option option option option option option
        option option option option option option option option option option option option option
    </li>
</ul>

Loading

Use it while fetching data

Style sheet: /scss/components/loading.scss

Currently loading. Please wait.
<div class="spinner">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>

<div class="spinner mod-vertical-margin">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>

<div class="loading-prompt">
  <div>Currently loading. Please wait.</div>
  <div class="spinner">
    <div class="bounce1"></div>
    <div class="bounce2"></div>
    <div class="bounce3"></div>
  </div>
</div>

Member

Use when displaying a user or member thumbnail.

Style sheet: /scss/components/member.scss

[Provider icon]
Member name
member@domain.com
<div class="member bg-medium-grey">
    <div class="member-icon">
        <svg class="'member-icon-provider">
            [Provider icon]
        </svg>
    </div>
    <div class="member-info">
        <div class="member-info-name">
            Member name
        </div>
        <div class="member-info-email">
            member@domain.com
        </div>
    </div>
</div>
<!-- Modal triggers -->
<button class="btn js-modal-trigger" data-modal="BaseModal">Basic modal</button>
<button class="btn js-modal-trigger" data-modal="ModSmall">Mod small</button>
<button class="btn js-modal-trigger" data-modal="FadeInScaleModal">Mod medium & mod fade in scale</button>
<button class="btn js-modal-trigger" data-modal="SlideInBottomModal">Mod big & mod stick bottom & mod slide in bottom
</button>
<button class="btn js-modal-trigger" data-modal="ModalWithInnerBackdrop">Modal with a prompt</button>

<!-- The main backdrop -->
<div class="modal-backdrop closed"></div>

<!-- Modals -->
<div class="modal-container" id="BaseModal">
    <div class="modal-content">
        <header class="modal-header">
            <h1>Basic modal</h1>
            <span class="small-close js-modal-close">
                <svg viewBox="0 0 22 22" class="icon fill-pure-white">
                    <g transform="matrix(.7071-.7071.7071.7071-3.142 11)">
                        <path d="m9-3.4h2v26.9h-2z"/>
                        <path d="m-3.4 9h26.9v2h-26.9z"/>
                    </g>
                </svg>
            </span>
        </header>
        <div class="modal-body mod-header-padding mod-form-top-bottom-padding">
            The basic small modal for all usage!
        </div>
        <footer class="modal-footer">
            <button class="btn js-modal-close">Close</button>
        </footer>
    </div>
</div>
<div class="modal-container mod-width-small" id="ModSmall">
    <div class="modal-content">
        <header class="modal-header">
            <h1>Mod small</h1>
            <span class="small-close js-modal-close">
                <svg viewBox="0 0 22 22" class="icon fill-pure-white">
                    <g transform="matrix(.7071-.7071.7071.7071-3.142 11)">
                        <path d="m9-3.4h2v26.9h-2z"/>
                        <path d="m-3.4 9h26.9v2h-26.9z"/>
                    </g>
                </svg>
            </span>
        </header>
        <div class="modal-body mod-header-padding mod-form-top-bottom-padding">
            A small modal to create a basic form without extra space for inputs.
        </div>
        <footer class="modal-footer">
            <button class="btn js-modal-close">Close</button>
        </footer>
    </div>
</div>

<div class="modal-container mod-medium mod-fade-in-scale" id="FadeInScaleModal">
    <div class="modal-content">
        <header class="modal-header">
            <h1>Mod medium & mod fade in scale</h1>
            <span class="small-close js-modal-close">
               <svg viewBox="0 0 22 22" class="icon fill-pure-white">
                    <g transform="matrix(.7071-.7071.7071.7071-3.142 11)">
                        <path d="m9-3.4h2v26.9h-2z"/>
                        <path d="m-3.4 9h26.9v2h-26.9z"/>
                    </g>
                </svg>
            </span>
        </header>
        <div class="modal-body mod-header-padding mod-form-top-bottom-padding">
            A medium modal with a fade in animation.
        </div>
        <footer class="modal-footer">
            <button class="btn js-modal-close">Close</button>
        </footer>
    </div>
</div>
<div class="modal-container mod-big mod-stick-bottom mod-slide-in-bottom" id="SlideInBottomModal">
    <div class="modal-content">
        <header class="modal-header">
            <h1>Mod big & mod stick bottom & mod slide in bottom</h1>
            <span class="small-close js-modal-close">
                <svg viewBox="0 0 22 22" class="icon fill-pure-white">
                    <g transform="matrix(.7071-.7071.7071.7071-3.142 11)">
                        <path d="m9-3.4h2v26.9h-2z"/>
                        <path d="m-3.4 9h26.9v2h-26.9z"/>
                    </g>
                </svg>
            </span>
        </header>
        <div class="modal-body mod-header-padding mod-form-top-bottom-padding">
            A big modal that slides in from the bottom.
        </div>
        <footer class="modal-footer">
            <button class="btn mod-primary js-modal-close">Submit</button>
            <button class="btn js-modal-close">Close</button>
        </footer>
    </div>
</div>
<div class="modal-container mod-big mod-fade-in-scale" id="ModalWithInnerBackdrop">
    <div class="modal-content">
        <!-- The inner backdrop for the prompt -->
        <div class="modal-backdrop prompt-backdrop"></div>

        <header class="modal-header">
            <h1>Modal with a prompt</h1>
            <span class="small-close js-modal-close">
                <svg viewBox="0 0 22 22" class="icon fill-pure-white">
                    <g transform="matrix(.7071-.7071.7071.7071-3.142 11)">
                        <path d="m9-3.4h2v26.9h-2z"/>
                        <path d="m-3.4 9h26.9v2h-26.9z"/>
                    </g>
                </svg>
            </span>
        </header>
        <div class="modal-body mod-header-padding mod-form-top-bottom-padding">
            A modal with an inner backdrop and a prompt over it.
        </div>
        <footer class="modal-footer">
            <button class="btn js-modal-close">Close</button>
        </footer>
    </div>
</div>

<!-- The prompt using class layer-2 to have a z-index higher than the one of the underlying modal -->
<div class="modal-container mod-fade-in-scale layer-2" id="ModalWithInnerBackdropPrompt">
    <div class="modal-content">
        <header class="modal-header">
            <h1>A prompt</h1>
            <span class="small-close js-modal-close">
                <svg viewBox="0 0 22 22" class="icon fill-pure-white">
                    <g transform="matrix(.7071-.7071.7071.7071-3.142 11)">
                        <path d="m9-3.4h2v26.9h-2z"/>
                        <path d="m-3.4 9h26.9v2h-26.9z"/>
                    </g>
                </svg>
            </span>
        </header>
        <div class="modal-body mod-header-padding mod-form-top-bottom-padding">
            A small prompt over the main modal.
        </div>
        <!-- It's kind of preferable to always have a footer even if there is nothing in it. -->
        <footer class="modal-footer"></footer>
    </div>
</div>

Multi step bar

A bar used to display multiple steps status

Style sheet: /scss/components/multi-step-bar.scss

Simple multi step bar with the different states
With mod-multi-step-bar-in-progress-sliding-animation
With mod-small
With mod-small and mod-multi-step-bar-flare-animation
You can also put content in the steps
Step 1
Step 2
Step 3
Step 4
Step 1
Step 2
Step 3
Step 4
<div class="mb2">
    <div>Simple multi step bar with the different states</div>
    <div class="multi-step-bar-container">
        <div class="multi-step-bar-backdrop-container">
            <div class="multi-step-bar multi-step-bar-done"></div>
            <div class="multi-step-bar multi-step-bar-warning"></div>
            <div class="multi-step-bar multi-step-bar-error"></div>
            <div class="multi-step-bar multi-step-bar-doing"></div>
            <div class="multi-step-bar multi-step-bar-to-do"></div>
        </div>
    </div>
</div>

<div class="mb2">
    <div>With mod-multi-step-bar-in-progress-sliding-animation</div>
    <div class="multi-step-bar-container mod-multi-step-bar-in-progress-sliding-animation">
        <div class="multi-step-bar-backdrop-container">
            <div class="multi-step-bar multi-step-bar-done"></div>
            <div class="multi-step-bar multi-step-bar-warning"></div>
            <div class="multi-step-bar multi-step-bar-error"></div>
            <div class="multi-step-bar multi-step-bar-doing"></div>
            <div class="multi-step-bar multi-step-bar-to-do"></div>
        </div>
    </div>
</div>

<div class="mb2">
    <div>With mod-small</div>
    <div class="multi-step-bar-container mod-small">
        <div class="multi-step-bar-backdrop-container">
            <div class="multi-step-bar multi-step-bar-done"></div>
            <div class="multi-step-bar multi-step-bar-warning"></div>
            <div class="multi-step-bar multi-step-bar-error"></div>
            <div class="multi-step-bar multi-step-bar-doing"></div>
            <div class="multi-step-bar multi-step-bar-to-do"></div>
        </div>
    </div>
</div>

<div class="mb2">
    <div>With mod-small and mod-multi-step-bar-flare-animation</div>
    <div class="multi-step-bar-container mod-small mod-multi-step-bar-flare-animation">
        <div class="multi-step-bar-backdrop-container">
            <div class="multi-step-bar multi-step-bar-done"></div>
            <div class="multi-step-bar multi-step-bar-warning"></div>
            <div class="multi-step-bar multi-step-bar-error"></div>
            <div class="multi-step-bar multi-step-bar-doing"></div>
            <div class="multi-step-bar multi-step-bar-to-do"></div>
        </div>
    </div>
</div>

<div class="mb2">
    <div>You can also put content in the steps</div>
    <div class="multi-step-bar-container mod-multi-step-bar-in-progress-shine-animation">
        <div class="multi-step-bar-backdrop-container">
            <div class="multi-step-bar multi-step-bar-done">
                <div class="multi-step-bar-text">Step 1</div>
            </div>
            <div class="multi-step-bar multi-step-bar-warning">
                <div class="multi-step-bar-text">Step 2</div>
            </div>
            <div class="multi-step-bar multi-step-bar-done">
                <div class="multi-step-bar-text">Step 3</div>
            </div>
            <div class="multi-step-bar multi-step-bar-doing">
                <div class="multi-step-bar-text">Step 4</div>
            </div>
        </div>
        <div class="multi-step-bar-content-container">
            <span class="multi-step-bar">
                <div class="multi-step-bar-text">Step 1</div>
            </span>
            <span class="multi-step-bar">
                <div class="multi-step-bar-text">Step 2</div>
            </span>
            <span class="multi-step-bar">
                <div class="multi-step-bar-text">Step 3</div>
            </span>
            <span class="multi-step-bar">
                <div class="multi-step-bar-text">Step 4</div>
            </span>
        </div>
    </div>
</div>

Sync Feedback

Use it when you want to give feedback to the user

Style sheet: /scss/components/sync-feedback.scss

<div class='sync-feedback'>
    <span class='status-dot syncing sync-feedback-icon'></span>
    <span class='sync-feedback-text'>Saving changes...</span>
</div>

<div class='sync-feedback mod-success mt2'>
    <span class='sync-feedback-icon'>
        <svg class='icon' viewBox='0 0 10 8'>
            <path d='M3.144 8L.167 4.891a.615.615 0 0 1 0-.843.556.556 0 0 1 .809 0l2.168 2.264L9.025.174a.557.557 0 0 1 .809 0 .617.617 0 0 1-.001.844L3.144 8'></path>
        </svg>
    </span>
    <span class='sync-feedback-text'>Changes saved</span>
</div>

<div class='sync-feedback mod-error mt2'>
    <span class='sync-feedback-icon'>
        <svg class='icon' viewBox='0 0 10 10'>
            <path d='M9.79.212A.72.72 0 0 0 8.77.211L5 3.981 1.229.211A.717.717 0 0 0 .211.212H.21A.72.72 0 0 0 .211 1.23l3.771 3.769L.211 8.77a.718.718 0 0 0 0 1.018.718.718 0 0 0 1.018 0L5 6.017l3.771 3.771A.72.72 0 0 0 9.789 8.77L6.018 4.999 9.789 1.23A.72.72 0 0 0 9.79.212'></path>
        </svg>
    </span>
    <span class='sync-feedback-text'>Changes could not be saved.</span>
</div>

Tabs

Style sheet: /scss/components/tab.scss

Tab 1
Tab 2
Content of Tab 1
Content of Tab 2
<div class="tab-navigation">
    <div id="tab1" class="tab enabled active">Tab 1</div>
    <div id="tab2" class="tab enabled">Tab 2</div>
</div>
<div class="tab-content">
    <div data-tab="tab1" class="tab-pane active">
        <div class="mod-header-padding mod-form-top-bottom-padding">
            Content of Tab 1
        </div>
    </div>
    <div data-tab="tab2" class="tab-pane">
        <div class="mod-header-padding mod-form-top-bottom-padding">
            Content of Tab 2
        </div>
    </div>
</div>

<script type="text/javascript">
    var tab1 = $("#tab1");
    var tab2 = $("#tab2");
    var tabpane1 = $("[data-tab=tab1]");
    var tabpane2 = $("[data-tab=tab2]");

    tab1.on("click", function() {
        tab1.addClass("active");
        tab2.removeClass("active");
        tabpane1.addClass("active");
        tabpane2.removeClass("active");
    });

    tab2.on("click", function() {
        tab1.removeClass("active");
        tab2.addClass("active");
        tabpane1.removeClass("active");
        tabpane2.addClass("active");
    });
</script>