Accordion

Accordions are stacked list of items used to toggle the visibility of the content

  • data-accordion-header - attribute is used to identify the toggle-able accordion.
  • data-accordion-external - attribute is used to identify elements that shouldn't affect the accordion behaviour - e.g. dropdowns inside the data-accordion-header.
Default accordion

Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt? Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.

Default accordion with menu button
Move to trash Move to Folder Rename

Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt? Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.

Default accordion with collapsed/uncollapsed icon placed at the rightmost of the panel

Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt? Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.

Default accordion with checkbox beside

Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt? Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.

Default accordion with checkbox beside and checkbox inside
Migas VHS schlitz lumbersexual ramps
Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.
Borderless accordion

Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt? Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.

Ghost accordion

Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt? Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.

Light accordion

Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt? Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.

Accordion with single and navigational panel
Migas VHS schlitz lumbersexual ramps
Accordion with multiple and navigational panels
Migas VHS schlitz lumbersexual ramps
Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.
Accordion with its Accordion-content states
mpedit quo minus id quod maxime placea
culpa qui officia deserunt mollitia animi

Accordions using the grid for layout

Accordion with multiple and navigational panels
Sartorial post-ironic mumblecore
Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.
Default accordion

Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt? Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.

Accordions using the `is-ellipsed` state

Truffaut butcher meh tattooed hashtag green juice, umami selfies banh mi. Hell of before they sold out health goth, offal ramps flexitarian actually dreamcatcher leggings brunch
Sartorial post-ironic mumblecore
Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.
Chartreuse gastropub mlkshk, chicharrones ugh keytar glossier copper mug austin +1

Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt? Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.

<div class="Accordion Accordion--dark">
    <div class="Accordion-top" data-accordion-header="">
        <div class="Accordion-toggle">
            <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                <use xlink:href="#arrowRightSolid"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                <use xlink:href="#arrowUpSolid"></use>
            </svg>
        </div>
        <div class="Accordion-title">Default accordion</div>
    </div>
    <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
        <div class="Accordion-content">
            <p>Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt?
            Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
            mumblecore 90's cred wayfarers.</p>
        </div>
    </div>
</div>
<div class="Accordion Accordion--dark">
    <div class="Accordion-top" data-accordion-header="">
        <div class="Accordion-toggle">
            <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                <use xlink:href="#arrowRightSolid"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                <use xlink:href="#arrowUpSolid"></use>
            </svg>
        </div>
        <div class="Accordion-title">Default accordion with menu button</div>
        <div class="Drop" data-drop-direction="right" data-accordion-external>
            <button class="Accordion-btn TypeBtn--reverse TypeBtn--unspaced" data-drop-toggle type="button">
                <svg title="meatball icon" role="img" class="Icon">
                    <use xlink:href="#meatball"></use>
                </svg>
            </button>
            <div class="Drop-menu" data-drop-short>
                <a class="Drop-item" href="#">
                    <svg class="Icon Drop-icon" title="trash unfilled icon" role="img">
                        <use xlink:href="#trashUnfilled"></use>
                    </svg>
                    Move to trash
                </a>
                <a class="Drop-item" href="#">
                    <svg class="Icon Drop-icon" title="move icon" role="img">
                        <use xlink:href="#move"></use>
                    </svg>
                    Move to Folder
                </a>
                <a class="Drop-item" href="#">
                    <svg class="Icon Drop-icon" title="pen unfilled icon" role="img">
                        <use xlink:href="#penUnfilled"></use>
                    </svg>
                    Rename
                </a>
            </div>
        </div>
    </div>
    <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
        <div class="Accordion-content">
            <p>Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt?
            Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
            mumblecore 90's cred wayfarers.</p>
        </div>
    </div>
</div>

<div class="Accordion Accordion--dark">
    <div class="Accordion-top" data-accordion-header="">
        <div class="Accordion-title">
            Default accordion with collapsed/uncollapsed icon placed at the rightmost of the panel
        </div>
        <div class="Accordion-toggle">
            <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                <use xlink:href="#arrowRightSolid"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                <use xlink:href="#arrowUpSolid"></use>
            </svg>
        </div>
    </div>
    <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
        <div class="Accordion-content">
            <p>Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt?
            Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
            mumblecore 90's cred wayfarers.</p>
        </div>
    </div>
</div>

<div class="Accordion Accordion--dark Accordion--select">
    <div class="Checkbox Accordion-checkbox">
        <input type="checkbox" id="checkbox1">
        <label for="checkbox1">
            <span class="Checkbox-button"></span>
        </label>
    </div>
    <div class="Accordion-holder">
        <div class="Accordion-top" data-accordion-header="">
            <div class="Accordion-toggle">
                <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                    <use xlink:href="#arrowRightSolid"></use>
                </svg>
                <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                    <use xlink:href="#arrowUpSolid"></use>
                </svg>
            </div>
            <div class="Accordion-title">Default accordion with checkbox beside</div>
            <button class="Accordion-btn TypeBtn--reverse TypeBtn--unspaced" type="button" data-accordion-external>
                <svg class="Icon" title="meatball icon" role="img">
                    <use xlink:href="#meatball"></use>
                </svg>
            </button>
        </div>
        <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
            <div class="Accordion-content">
                <p>Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt?
                Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
                mumblecore 90's cred wayfarers.</p>
            </div>
        </div>
    </div>
</div>

<div class="Accordion Accordion--dark Accordion--select">
    <div class="Checkbox Accordion-checkbox">
        <input type="checkbox" id="checkbox2">
        <label for="checkbox2">
            <span class="Checkbox-button"></span>
        </label>
    </div>
    <div class="Accordion-holder">
        <div class="Accordion-top" data-accordion-header="">
            <div class="Accordion-toggle">
                <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                    <use xlink:href="#arrowRightSolid"></use>
                </svg>
                <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                    <use xlink:href="#arrowUpSolid"></use>
                </svg>
            </div>
            <div class="Accordion-title">Default accordion with checkbox beside and checkbox inside</div>
            <button class="Accordion-btn TypeBtn--reverse TypeBtn--unspaced" type="button">
                <svg class="Icon" title="meatball icon" role="img">
                    <use xlink:href="#meatball"></use>
                </svg>
            </button>
        </div>
        <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
            <div class="Accordion-content">
                <div class="Accordion-actions">
                    <div class="Checkbox Accordion-checkbox">
                        <input type="checkbox" id="checkbox3">
                        <label for="checkbox3">
                            <span class="Checkbox-button"></span>
                        </label>
                    </div>
                    <a class="Accordion-action" href="#">Migas VHS schlitz lumbersexual ramps</a>
                </div>
                <div>
                    <svg class="Icon" title="visibility off icon" role="img">
                        <use xlink:href="#visibilityOff"></use>
                    </svg>
                    <button class="Accordion-btn" type="button">
                        <svg class="Icon" title="meatball icon" role="img">
                            <use xlink:href="#meatball"></use>
                        </svg>
                    </button>
                </div>
            </div>
            <div class="Accordion-content">
                <div class="Accordion-actions">
                    <div class="Checkbox Accordion-checkbox">
                        <input type="checkbox" id="checkbox4">
                        <label for="checkbox4">
                            <span class="Checkbox-button"></span>
                        </label>
                    </div>
                    <a class="Accordion-action" href="#">Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
                    mumblecore 90's cred wayfarers.</a>
                </div>
                <div>
                    <button class="Accordion-btn" type="button">
                        <svg class="Icon" title="visibility on icon" role="img">
                            <use xlink:href="#visibilityOn"></use>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="Accordion Accordion--dark Accordion--borderless">
    <div class="Accordion-top" data-accordion-header="">
        <div class="Accordion-toggle">
            <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                <use xlink:href="#arrowRightSolid"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                <use xlink:href="#arrowUpSolid"></use>
            </svg>
        </div>
        <div class="Accordion-title">Borderless accordion</div>
    </div>
    <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
        <div class="Accordion-content">
            <p>Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt?
            Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
            mumblecore 90's cred wayfarers.</p>
        </div>
    </div>
</div>

<div class="Accordion Accordion--ghost">
    <div class="Accordion-top" data-accordion-header="">
        <div class="Accordion-toggle">
            <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                <use xlink:href="#arrowRightSolid"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                <use xlink:href="#arrowUpSolid"></use>
            </svg>
        </div>
        <div class="Accordion-title">Ghost accordion</div>
    </div>
    <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
        <div class="Accordion-content">
            <p>Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt?
            Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
            mumblecore 90's cred wayfarers.</p>
        </div>
    </div>
</div>

<div class="Accordion Accordion--light">
    <div class="Accordion-top" data-accordion-header="">
        <div class="Accordion-toggle">
            <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                <use xlink:href="#arrowRightSolid"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                <use xlink:href="#arrowUpSolid"></use>
            </svg>
        </div>
        <div class="Accordion-title">Light accordion</div>
    </div>
    <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
        <div class="Accordion-content">
            <p>Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt?
            Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
            mumblecore 90's cred wayfarers.</p>
        </div>
    </div>
</div>

<div class="Accordion Accordion--attention">
    <div class="Accordion-top" data-accordion-header="">
        <div class="Accordion-title">Accordion with single and navigational panel</div>
        <div class="Accordion-toggle">
            <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                <use xlink:href="#arrowRightSolid"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                <use xlink:href="#arrowUpSolid"></use>
            </svg>
        </div>
    </div>
    <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
        <div class="Accordion-content">
            <a class="Accordion-action" href="#">Migas VHS schlitz lumbersexual ramps</a>
            <div>
                <svg class="Icon" title="visibility off icon" role="img">
                    <use xlink:href="#visibilityOff"></use>
                </svg>
                <button class="Accordion-btn" type="button">
                    <svg class="Icon" title="meatball icon" role="img">
                        <use xlink:href="#meatball"></use>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="Accordion Accordion--dark">
    <div class="Accordion-top" data-accordion-header="">
        <div class="Accordion-title">Accordion with multiple and navigational panels</div>
        <div class="Accordion-toggle">
            <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                <use xlink:href="#arrowRightSolid"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                <use xlink:href="#arrowUpSolid"></use>
            </svg>
        </div>
    </div>
    <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
        <div class="Accordion-content">
            <a class="Accordion-action" href="#">Migas VHS schlitz lumbersexual ramps</a>
            <div class="Accordion-toggle">
                <svg class="Icon" title="visibility off icon" role="img">
                    <use xlink:href="#visibilityOff"></use>
                </svg>
                <button class="Accordion-btn" type="button">
                    <svg class="Icon" title="meatball icon" role="img">
                        <use xlink:href="#meatball"></use>
                    </svg>
                </button>
            </div>
        </div>
        <div class="Accordion-content">
            <a class="Accordion-action" href="#">Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
            mumblecore 90's cred wayfarers.</a>
            <div>
                <button class="Accordion-btn" type="button">
                    <svg class="Icon" title="visibility on icon" role="img">
                        <use xlink:href="#visibilityOn"></use>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="Accordion Accordion--attention">
    <div class="Accordion-top" data-accordion-header="">
        <div class="Accordion-title">Accordion with its Accordion-content states</div>
        <div class="Accordion-toggle">
            <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                <use xlink:href="#arrowRightSolid"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                <use xlink:href="#arrowUpSolid"></use>
            </svg>
        </div>
    </div>
    <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
        <div class="Accordion-content Accordion-content-is-pinned">
            <a class="Accordion-action" href="#">mpedit quo minus id quod maxime placea</a>
            <div>
                <svg class="Icon" title="visibility off icon" role="img">
                    <use xlink:href="#visibilityOff"></use>
                </svg>
                <button class="Accordion-btn" type="button">
                    <svg class="Icon" title="meatball icon" role="img">
                        <use xlink:href="#meatball"></use>
                    </svg>
                </button>
            </div>
        </div>
        <div class="Accordion-content Accordion-content-is-active">
            <a class="Accordion-action" href="#">culpa qui officia deserunt mollitia animi</a>
            <div>
                <svg class="Icon" title="visibility off icon" role="img">
                    <use xlink:href="#visibilityOff"></use>
                </svg>
                <button class="Accordion-btn" type="button">
                    <svg class="Icon" title="meatball icon" role="img">
                        <use xlink:href="#meatball"></use>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

<h3>Accordions using the grid for layout</h3>
<div class="row section">
    <div class="col-sm-3">
        <div class="Callout Callout--primary">
            <div class="Accordion Accordion--dark">
                <div class="Accordion-top" data-accordion-header="">
                    Accordion with multiple and navigational panels
                    <div class="Accordion-toggle">
                        <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                            <use xlink:href="#arrowRightSolid"></use>
                        </svg>
                        <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                            <use xlink:href="#arrowUpSolid"></use>
                        </svg>
                    </div>
                </div>
                <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
                    <div class="Accordion-content Accordion-content-is-active">
                        <a class="Accordion-action" href="#">Sartorial post-ironic mumblecore</a>
                        <div class="Accordion-toggle">
                            <svg class="Icon" title="visibility off icon" role="img">
                                <use xlink:href="#visibilityOff"></use>
                            </svg>
                            <button class="Accordion-btn" type="button">
                                <svg class="Icon" title="meatball icon" role="img">
                                    <use xlink:href="#meatball"></use>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="Accordion-content Accordion-content-is-pinned">
                        <a class="Accordion-action" href="#">Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
                        mumblecore 90's cred wayfarers.</a>
                        <div>
                            <button class="Accordion-btn" type="button">
                                <svg class="Icon" title="meatball icon" role="img">
                                    <use xlink:href="#meatball"></use>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="Accordion Accordion--dark">
            <div class="Accordion-top" data-accordion-header="">
                Default accordion
                <div class="Accordion-toggle">
                    <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                        <use xlink:href="#arrowRightSolid"></use>
                    </svg>
                    <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                        <use xlink:href="#arrowUpSolid"></use>
                    </svg>
                </div>
            </div>
            <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
                <div class="Accordion-content">
                    <p>Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt?
                    Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
                    mumblecore 90's cred wayfarers.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<h3>Accordions using the `is-ellipsed` state</h3>
<div class="row section">
    <div class="col-sm-3">
        <div class="Callout Callout--primary">
            <div class="Accordion Accordion--dark">
                <div class="Accordion-top" data-accordion-header="">
                    <span class="is-ellipsed">Truffaut butcher meh tattooed hashtag green juice, umami selfies banh mi. Hell of before they sold out health goth, offal ramps flexitarian actually dreamcatcher leggings brunch</span>
                    <div class="Accordion-toggle">
                        <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                            <use xlink:href="#arrowRightSolid"></use>
                        </svg>
                        <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                            <use xlink:href="#arrowUpSolid"></use>
                        </svg>
                    </div>
                </div>
                <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
                    <div class="Accordion-content Accordion-content-is-active">
                        <a class="Accordion-action is-ellipsed" href="#">Sartorial post-ironic mumblecore</a>
                        <div class="Accordion-toggle">
                            <svg class="Icon" title="visibility off icon" role="img">
                                <use xlink:href="#visibilityOff"></use>
                            </svg>
                            <button class="Accordion-btn" type="button">
                                <svg class="Icon" title="meatball icon" role="img">
                                    <use xlink:href="#meatball"></use>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="Accordion-content Accordion-content-is-pinned">
                        <a class="Accordion-action is-ellipsed" href="#">Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
                        mumblecore 90's cred wayfarers.</a>
                        <div>
                            <button class="Accordion-btn" type="button">
                                <svg class="Icon" title="meatball icon" role="img">
                                    <use xlink:href="#meatball"></use>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="Accordion Accordion--dark">
            <div class="Accordion-top" data-accordion-header="">
                <span class="is-ellipsed">Chartreuse gastropub mlkshk, chicharrones ugh keytar glossier copper mug austin +1</span>
                <div class="Accordion-toggle">
                    <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                        <use xlink:href="#arrowRightSolid"></use>
                    </svg>
                    <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                        <use xlink:href="#arrowUpSolid"></use>
                    </svg>
                </div>
            </div>
            <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
                <div class="Accordion-content is-ellipsed">
                    <p class="is-ellipsed">Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt?
                    Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
                    mumblecore 90's cred wayfarers.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Accordion Variants

Default accordion

Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt? Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.

Primary accordion

Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt? Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.

Secondary accordion

Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt? Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.

Success accordion

Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt? Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.

Neutral accordion

Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt? Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.

Attention accordion

Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt? Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.

Error accordion

Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt? Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.

Dark accordion

Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt? Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.

Light accordion

Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt? Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.

<div class="Accordion">
    <div class="Accordion-top" data-accordion-header="">
        <div class="Accordion-toggle">
            <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                <use xlink:href="#arrowRightSolid"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                <use xlink:href="#arrowUpSolid"></use>
            </svg>
        </div>
        <div class="Accordion-title">Default accordion</div>
    </div>
    <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
        <div class="Accordion-content">
            <p>Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt?
            Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
            mumblecore 90's cred wayfarers.</p>
        </div>
    </div>
</div>
<div class="Accordion Accordion--primary">
    <div class="Accordion-top" data-accordion-header="">
        <div class="Accordion-toggle">
            <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                <use xlink:href="#arrowRightSolid"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                <use xlink:href="#arrowUpSolid"></use>
            </svg>
        </div>
        <div class="Accordion-title">Primary accordion</div>
    </div>
    <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
        <div class="Accordion-content">
            <p>Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt?
            Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
            mumblecore 90's cred wayfarers.</p>
        </div>
    </div>
</div>
<div class="Accordion Accordion--secondary">
    <div class="Accordion-top" data-accordion-header="">
        <div class="Accordion-toggle">
            <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                <use xlink:href="#arrowRightSolid"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                <use xlink:href="#arrowUpSolid"></use>
            </svg>
        </div>
        <div class="Accordion-title">Secondary accordion</div>
    </div>
    <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
        <div class="Accordion-content">
            <p>Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt?
            Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
            mumblecore 90's cred wayfarers.</p>
        </div>
    </div>
</div>
<div class="Accordion Accordion--success">
    <div class="Accordion-top" data-accordion-header="">
        <div class="Accordion-toggle">
            <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                <use xlink:href="#arrowRightSolid"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                <use xlink:href="#arrowUpSolid"></use>
            </svg>
        </div>
        <div class="Accordion-title">Success accordion</div>
    </div>
    <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
        <div class="Accordion-content">
            <p>Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt?
            Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
            mumblecore 90's cred wayfarers.</p>
        </div>
    </div>
</div>
<div class="Accordion Accordion--neutral">
    <div class="Accordion-top" data-accordion-header="">
        <div class="Accordion-toggle">
            <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                <use xlink:href="#arrowRightSolid"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                <use xlink:href="#arrowUpSolid"></use>
            </svg>
        </div>
        <div class="Accordion-title">Neutral accordion</div>
    </div>
    <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
        <div class="Accordion-content">
            <p>Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt?
            Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
            mumblecore 90's cred wayfarers.</p>
        </div>
    </div>
</div>
<div class="Accordion Accordion--attention">
    <div class="Accordion-top" data-accordion-header="">
        <div class="Accordion-toggle">
            <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                <use xlink:href="#arrowRightSolid"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                <use xlink:href="#arrowUpSolid"></use>
            </svg>
        </div>
        <div class="Accordion-title">Attention accordion</div>
    </div>
    <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
        <div class="Accordion-content">
            <p>Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt?
            Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
            mumblecore 90's cred wayfarers.</p>
        </div>
    </div>
</div>
<div class="Accordion Accordion--error">
    <div class="Accordion-top" data-accordion-header="">
        <div class="Accordion-toggle">
            <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                <use xlink:href="#arrowRightSolid"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                <use xlink:href="#arrowUpSolid"></use>
            </svg>
        </div>
        <div class="Accordion-title">Error accordion</div>
    </div>
    <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
        <div class="Accordion-content">
            <p>Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt?
            Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
            mumblecore 90's cred wayfarers.</p>
        </div>
    </div>
</div>
<div class="Accordion Accordion--dark">
    <div class="Accordion-top" data-accordion-header="">
        <div class="Accordion-toggle">
            <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                <use xlink:href="#arrowRightSolid"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                <use xlink:href="#arrowUpSolid"></use>
            </svg>
        </div>
        <div class="Accordion-title">Dark accordion</div>
    </div>
    <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
        <div class="Accordion-content">
            <p>Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt?
            Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
            mumblecore 90's cred wayfarers.</p>
        </div>
    </div>
</div>
<div class="Accordion Accordion--light">
    <div class="Accordion-top" data-accordion-header="">
        <div class="Accordion-toggle">
            <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                <use xlink:href="#arrowRightSolid"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                <use xlink:href="#arrowUpSolid"></use>
            </svg>
        </div>
        <div class="Accordion-title">Light accordion</div>
    </div>
    <div class="Accordion-bottom is-slide-closed" data-accordion-body="">
        <div class="Accordion-content">
            <p>Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt?
            Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
            mumblecore 90's cred wayfarers.</p>
        </div>
    </div>
</div>

Alerts

Alerts are used to call users attention to specific information via increased visual hierarchy.

Note:

  • Headings are optional
  • sections are used for Style Guide presentation purposes

Lorem ipsum dolor amet bitters tbh +1 mlkshk, single-origin coffee four loko hoodie ethical shaman.

Error

Trust fund quinoa +1 kombucha poke chicharrones twee tumeric man bun. Intelligentsia tattooed artisan, typewriter tote bag gochujang roof party YOLO.

Health goth schlitz knausgaard tousled fashion axe lomo poke keffiyeh. Banh mi tumeric deep v letterpress butcher raw denim beard, pinterest tilde waistcoat messenger bag ennui iceland snackwave.

Success

Mumblecore kickstarter kale chips vaporware literally lo-fi tousled irony.

Info

Lyft thundercats viral, knausgaard street art venmo vegan migas tumeric hella food truck bushwick.

Lyft thundercats viral, knausgaard street art venmo vegan migas tumeric hella food truck bushwick.

<div class="section">

    <div class="Alert">
        <p>Lorem ipsum dolor amet bitters tbh +1 mlkshk, single-origin coffee four loko <a href="">hoodie ethical shaman</a>.</p>
    </div>

</div>
<div class="section">

    <div class="Alert Alert--error">
        <span class="Alert-title">Error</span>
        <p>Trust fund quinoa +1 <a href="">kombucha poke chicharrones</a> twee tumeric man bun. Intelligentsia tattooed artisan, typewriter tote bag gochujang roof party YOLO.</p>
        <p>Health goth schlitz knausgaard tousled fashion axe lomo poke keffiyeh. Banh mi tumeric deep v letterpress butcher raw denim beard, pinterest tilde waistcoat messenger bag ennui iceland snackwave.</p>
    </div>

</div>
<div class="section">

    <div class="Alert Alert--success">
        <span class="Alert-title">Success</span>
        <p>Mumblecore kickstarter <a href="">kale chips</a> vaporware literally lo-fi tousled irony.</p>
    </div>

</div>

<div class="section">

    <div class="Alert Alert--info">
        <span class="Alert-title">Info</span>
        <p>Lyft thundercats viral, knausgaard street art venmo vegan migas tumeric <a href="">hella food truck</a> bushwick.</p>
    </div>

</div>

<div class="Alert Alert--info Alert--center" data-alert data-alert-id="Alert1">
    <p>Lyft thundercats viral, knausgaard street art venmo vegan migas tumeric <a href="">hella food truck</a> bushwick.</p>
    <span class="Alert-close">
        <button class="IconBtn" data-dismiss-alert>
            <svg class="Icon Icon--reverse" title="close icon" role="img">
                <use xlink:href="#close"></use>
            </svg>
        </button>
    </span>
</div>

Solid alerts

Lorem ipsum dolor amet bitters tbh +1 mlkshk, single-origin coffee four loko hoodie ethical shaman.

Lorem ipsum dolor amet bitters tbh +1 mlkshk, single-origin coffee four loko hoodie ethical shaman.

Lorem ipsum dolor amet bitters tbh +1 mlkshk, single-origin coffee four loko hoodie ethical shaman.

<div class="section">
    <div class="Alert Alert--solid-error">
        <p>Lorem ipsum dolor amet bitters tbh +1 mlkshk, single-origin coffee four loko <a href="">hoodie ethical shaman</a>.</p>
        <span class="Alert-close">
            <button class="IconBtn" data-dismiss-alert>
                <svg class="Icon Icon--reverse" title="close icon" role="img">
                    <use xlink:href="#close"></use>
                </svg>
            </button>
        </span>
    </div>
</div>
<div class="section">
    <div class="Alert Alert--solid-success">
        <p>Lorem ipsum dolor amet bitters tbh +1 mlkshk, single-origin coffee four loko <a href="">hoodie ethical shaman</a>.</p>
        <span class="Alert-close">
            <button class="IconBtn" data-dismiss-alert>
                <svg class="Icon Icon--reverse" title="close icon" role="img">
                    <use xlink:href="#close"></use>
                </svg>
            </button>
        </span>
    </div>
</div>
<div class="section">
    <div class="Alert Alert--solid-info">
        <p>Lorem ipsum dolor amet bitters tbh +1 mlkshk, single-origin coffee four loko <a href="">hoodie ethical shaman</a>.</p>
        <span class="Alert-close">
            <button class="IconBtn" data-dismiss-alert>
                <svg class="Icon Icon--reverse" title="close icon" role="img">
                    <use xlink:href="#close"></use>
                </svg>
            </button>
        </span>
    </div>
</div>

Badge

Badges are usually used for labeling

Default Primary Secondary Success Error Attention Neutral Light Dark Info Dark Emergency 
<span class="Badge">
    Default
</span>
<span class="Badge Badge--primary">
    Primary
</span>
<span class="Badge Badge--secondary">
    Secondary
</span>
<span class="Badge Badge--success">
    Success
</span>
<span class="Badge Badge--error">
    Error
</span>
<span class="Badge Badge--attention">
    Attention
</span>
<span class="Badge Badge--neutral">
    Neutral
</span>
<span class="Badge Badge--light">
    Light
</span>
<span class="Badge Badge--dark">
    Dark
</span>
<span class="Badge Badge--info-dark">
    Info Dark
</span>
<span class="Badge Badge--emergency">
    Emergency
</span>

Reversed Badges

Default Primary Secondary Success Error Attention Neutral Light Dark 
<div class="Callout Callout--primary">
    <span class="Badge Badge--reverse">
        Default
    </span>
    <span class="Badge Badge--reverse Badge--reversePrimary">
        Primary
    </span>
    <span class="Badge Badge--reverse Badge--reverseSecondary">
        Secondary
    </span>
    <span class="Badge Badge--reverse Badge--reverseSuccess">
        Success
    </span>
    <span class="Badge Badge--reverse Badge--reverseError">
        Error
    </span>
    <span class="Badge Badge--reverse Badge--reverseAttention">
        Attention
    </span>
    <span class="Badge Badge--reverse Badge--reverseNeutral">
        Neutral
    </span>
    <span class="Badge Badge--reverse Badge--reverseLight">
        Light
    </span>
    <span class="Badge Badge--reverse Badge--reverseDark">
        Dark
    </span>
</div>

Pill Badges

Default Primary Secondary Success Error Attention Neutral Light Dark 
<span class="Badge Badge--pill">
    Default
</span>
<span class="Badge Badge--primary Badge--pill">
    Primary
</span>
<span class="Badge Badge--secondary Badge--pill">
    Secondary
</span>
<span class="Badge Badge--success Badge--pill">
    Success
</span>
<span class="Badge Badge--error Badge--pill">
    Error
</span>
<span class="Badge Badge--attention Badge--pill">
    Attention
</span>
<span class="Badge Badge--neutral Badge--pill">
    Neutral
</span>
<span class="Badge Badge--light Badge--pill">
    Light
</span>
<span class="Badge Badge--dark Badge--pill">
    Dark
</span>

Small Badges

Default Primary Secondary Success Error Attention Neutral Light Dark 
<span class="Badge Badge--sm Badge--pill">
    Default
</span>
<span class="Badge Badge--sm Badge--primary Badge--pill">
    Primary
</span>
<span class="Badge Badge--sm Badge--secondary Badge--pill">
    Secondary
</span>
<span class="Badge Badge--sm Badge--success Badge--pill">
    Success
</span>
<span class="Badge Badge--sm Badge--error Badge--pill">
    Error
</span>
<span class="Badge Badge--sm Badge--attention Badge--pill">
    Attention
</span>
<span class="Badge Badge--sm Badge--neutral Badge--pill">
    Neutral
</span>
<span class="Badge Badge--sm Badge--light Badge--pill">
    Light
</span>
<span class="Badge Badge--sm Badge--dark Badge--pill">
    Dark
</span>

Link Badges

Default Primary Secondary Success Error Info Attention Neutral Light Dark Dark 
<a href="#" class="Badge Badge--pill">
    Default
</a>
<a href="#" class="Badge Badge--primary Badge--pill">
    Primary
</a>
<a href="#" class="Badge Badge--secondary Badge--pill">
    Secondary
</a>
<a href="#" class="Badge Badge--success Badge--pill">
    Success
</a>
<a href="#" class="Badge Badge--error Badge--pill">
    Error
</a>
<a href="#" class="Badge Badge--info">
    Info
</a>
<a href="#" class="Badge Badge--attention">
    Attention
</a>
<a href="#" class="Badge Badge--neutral">
    Neutral
</a>
<a href="#" class="Badge Badge--light">
    Light
</a>
<a href="#" class="Badge Badge--dark">
    Dark
</a>
<a href="#" class="Badge Badge--reverse Badge--reversePrimary">
    Dark
</a>

Badge Person

JD
Default
Primary
Secondary
JD
Success
AB
Error
CD
Attention
EF
Neutral
GH
Light
IJ
Dark 
<span class="Badge Badge--person">
    <div class="Avatar Avatar--sm Avatar--centered">
        <span class="Avatar-initials">JD</span>
    </div>
    <span>
        Default
    </span>
</span>
<span class="Badge Badge--person Badge--primary">
    <div class="Avatar Avatar--sm Avatar--centered">
        <span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
    </div>
    <span>
        Primary
    </span>
</span>
<span class="Badge Badge--person Badge--secondary">
    <div class="Avatar Avatar--sm Avatar--centered">
        <span class="Interactive Interactive--sm Interactive--blankUser" title="Blank User icon"></span>
    </div>
    <span>
        Secondary
    </span>
</span>
<span class="Badge Badge--person Badge--success">
    <div class="Avatar Avatar--sm Avatar--centered">
        <span class="Avatar-initials">JD</span>
    </div>
    <span>
        Success
    </span>
</span>
<span class="Badge Badge--person Badge--error">
    <div class="Avatar Avatar--sm Avatar--centered">
        <span class="Avatar-initials">AB</span>
    </div>
    <span>
        Error
    </span>
</span>
<span class="Badge Badge--person Badge--attention">
    <div class="Avatar Avatar--sm Avatar--centered">
        <span class="Avatar-initials">CD</span>
    </div>
    <span>
        Attention
    </span>
</span>
<span class="Badge Badge--person Badge--neutral">
    <div class="Avatar Avatar--sm Avatar--centered">
        <span class="Avatar-initials">EF</span>
    </div>
    <span>
        Neutral
    </span>
</span>
<span class="Badge Badge--person Badge--light">
    <div class="Avatar Avatar--sm Avatar--centered">
        <span class="Avatar-initials">GH</span>
    </div>
    <span>
        Light
    </span>
</span>
<span class="Badge Badge--person Badge--dark">
    <div class="Avatar Avatar--sm Avatar--centered">
        <span class="Avatar-initials">IJ</span>
    </div>
    <span>
        Dark
    </span>
</span>

Badge with Icon Buttons

Default Primary
Secondary
GH
Light 
<span class="Badge">
    <span>
        Default
    </span>
    <button class="IconBtn IconBtn--unspaced">
        <small><svg class="Icon Icon--reverse" title="close icon" role="img">
            <use xlink:href="#close"></use>
        </svg></small>
    </button>
</span>
<span class="Badge Badge--primary">
    <span>
        Primary
    </span>
    <button class="IconBtn IconBtn--unspaced">
        <small><svg class="Icon Icon--reverse" title="close icon" role="img">
            <use xlink:href="#close"></use>
        </svg></small>
    </button>
</span>
<span class="Badge Badge--person Badge--secondary">
    <div class="Avatar Avatar--sm Avatar--centered">
        <span class="Interactive Interactive--sm Interactive--blankUser" title="Blank User icon"></span>
    </div>
    <span>
        Secondary
    </span>
    <button class="IconBtn IconBtn--unspaced">
        <small><svg class="Icon Icon--reverse" title="close icon" role="img">
            <use xlink:href="#close"></use>
        </svg></small>
    </button>
</span>
<span class="Badge Badge--person Badge--light">
    <div class="Avatar Avatar--sm Avatar--centered">
        <span class="Avatar-initials">GH</span>
    </div>
    <span>
        Light
    </span>
    <button class="IconBtn IconBtn--unspaced">
        <small><svg class="Icon" title="close icon" role="img">
            <use xlink:href="#close"></use>
        </svg></small>
    </button>
</span>

Bread Crumbs

Bread crumbs is a graphical control element used as a navigational aid in user interfaces and on web pages

<ul class="BreadCrumbs">
    <li class="BreadCrumbs-item">
        <a href="#" class="TypeBtn">HR Hub</a>
        <span>></span>
    </li>
    <li class="BreadCrumbs-item">
        <a href="#" class="TypeBtn">Employees</a>
        <span>></span>
    </li>
    <li class="BreadCrumbs-item BreadCrumbs-is-active">
        <span>Dashboard</span>
    <li>
</ul>

Cards

Cards are interactive and are used to visually section products and services features. The cards may contain a combination of icon, text and call to action.

Default Card

Biltong shank jowl pastrami shankle bacon swine hamburger salami.

Learn more

Default Card with a media

Biltong shank jowl pastrami shankle bacon swine hamburger salami.

Learn more

This is a light Card

At vero eos et accusamus et iusto odio quis nostrud exercitation ullamco.

Learn more

Card with decreased border radius

Biltong shank consectetur adipiscing elit bacon swine hamburger salami.

Learn more 
<div class="section">
    <div class="Card">
        <div class="Card-content">
            <span class="Graphic Graphic--whiteSheepWithSunglass" title="White sheep with sunglass icon"></span>
            <h3>Default Card</h3>
            <p>Biltong shank jowl pastrami shankle bacon swine hamburger salami.</p>
            <a href="" class="TypeBtn TypeBtn--anchor TypeBtn--inline" alt="Click here to pick a task">Learn more</a>
        </div>
    </div>
</div>
<div class="section">
    <div class="Card Card--light">
        <div class="Card-media">
            <img src="../styles/img/shared/templateDashboard.svg"/>
        </div>
        <div class="Card-content">
            <h3>Default Card with a media</h3>
            <p>Biltong shank jowl pastrami shankle bacon swine hamburger salami.</p>
            <a href="" class="TypeBtn TypeBtn--anchor TypeBtn--inline" alt="Click here to pick a task">Learn more</a>
        </div>
    </div>
</div>
<div class="section">
    <div class="Card Card--light">
        <div class="Card-content">
            <span class="Graphic Graphic--whiteSheepWithSunglass" title="White sheep with sunglass icon"></span>
            <h3>This is a light Card</h3>
            <p>At vero eos et accusamus et iusto odio quis nostrud exercitation ullamco.</p>
            <a href="" class="TypeBtn TypeBtn--anchor TypeBtn--inline" alt="Click here to pick a task">Learn more</a>
        </div>
    </div>
</div>
<div class="section">
    <div class="Card Card--edged Card--light">
        <div class="Card-content">
            <span class="Graphic Graphic--whiteSheepWithSunglass" title="White sheep with sunglass icon"></span>
            <h3>Card with decreased border radius</h3>
            <p>Biltong shank consectetur adipiscing elit bacon swine hamburger salami.</p>
            <a href="" class="TypeBtn TypeBtn--anchor TypeBtn--inline" alt="Click here to pick a task">Learn more</a>
        </div>
    </div>
</div>

Cards Left Aligned

Need assistance?

View All 
<div class="Card Card--left">
    <div class="Card-content">
        <h4>Need assistance?</h4>
        <ul class="List List--none">
            <li><a href="#">Biltong shank jowl pastrami</a></li>
            <li><a href="#">Shankle bacon swine</a></li>
            <li><a href="#">Hamburger salam</a></li>
            <li><a href="#">Spare ribs</a></li>
            <li><a href="#">Sausage tenderloin</a></li>
        </ul>
        <a href class="TypeBtn TypeBtn--anchor TypeBtn--inline" alt="Click here for assistance">View All</a>
    </div>
</div>

Interactive State

Mouse over the card

Default card with touch state

Biltong shank jowl pastrami shankle bacon swine hamburger salami.

Card using a mediaObject layout

Card that could be a link

Card using a mediaObject layout with overlay

Filet mignon drumstick

Card using a mediaObject using sprites and multiple elements

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.
Primary 

<div class="section">
    <div class="Card Card--touch">
        <div class="Card-content">
            <span class="Graphic Graphic--whiteSheepWithSunglass" title="White sheep with sunglass icon"></span>
            <h3>Default card with touch state</h3>
            <p>Biltong shank jowl pastrami shankle bacon swine hamburger salami.</p>
        </div>
    </div>
</div>
<div class="section">
    <h3>Card using a mediaObject layout</h3>
    <a href="#" class="Card Card--touch Card--light mediaObject mediaObject--responsive" alt="Organise Tasks">
        <div class="Card-media mediaObject-figure">
            <img src="../styles/img/shared/templateDashboard.svg">
        </div>
        <div class="Card-content mediaObject-body">
            <p>Card that could be a link</p>
        </div>
    </a>
</div>
<div class="section">
    <h3>Card using a mediaObject layout with overlay</h3>
    <div class="Card Card--touch Card--light mediaObject mediaObject--responsive" alt="Organise Tasks">
        <div class="Card-media mediaObject-figure">
            <img src="../styles/img/shared/templateDashboard.svg">
        </div>
        <div class="Card-content mediaObject-body">
            <p>Filet mignon drumstick</p>
        </div>
        <div class="Card-overlay section-centered">
            <div class="row center-sm">
                <div class="col-sm-3 col-xl-2 col-xxl-1">
                    <button class="Btn Btn--secondary Btn--expanded">Preview</button>
                </div>
                <div class="col-sm-3 col-xl-2 col-xxl-1">
                    <button class="Btn Btn--primary Btn--expanded">Use</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="section">
    <h3>Card using a mediaObject using sprites and multiple elements</h3>
    <a href="#" class="Card Card--touch Card--light Card--edged mediaObject mediaObject--responsive" alt="Organise Tasks">
        <div class="Card-content mediaObject">
            <figure class="mediaObject-figure">
                <span class="Interactive Interactive--weaves Interactive--xlg" title="Weaves icon"></span>
            </figure>
            <div class="mediaObject-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.
                <br/>
                <span class="Badge Badge--primary">
                    Primary
                </span></p>
            </div>
        </div>
    </a>
</div>

Feature Card

The Feature Card submodule serves as a high level navigational element. The purpose is similar to that of Cards that are anchors, with the difference being that Feature Cards link to higher level functions.

Filet mignon drumstick

Feature Card using grids

Filet mignon drumstick

Filet mignon drumstick

 
<a href="#" class="Card Card--feature" alt="Organise Tasks">
    <div class="Card-media">
        <img src="../styles/img/shared/templateDashboard.svg"/>
    </div>
    <div class="Card-content">
        <p>Filet mignon drumstick</p>
    </div>
</a>
<h3>Feature Card using grids</h3>
<div class="row center-sm">
    <div class="col-sm-2">
        <a href="#" class="Card Card--feature" alt="Organise Tasks">
            <div class="Card-media">
                <img class="img-semifluid" src="../styles/img/shared/templateDashboard.svg"/>
            </div>
            <div class="Card-content">
                <p>Filet mignon drumstick</p>
            </div>
        </a>
    </div>
    <div class="col-sm-2">
        <a href="#" class="Card Card--feature" alt="Organise Tasks">
            <div class="Card-media ">
                <img class="img-semifluid" src="../styles/img/shared/templateDashboard.svg"/>
            </div>
            <div class="Card-content">
                <p>Filet mignon drumstick</p>
            </div>
        </a>
    </div>
</div>

Colored cards

The colored cards is same with feature cards with primary, secondary and neutral color. Unlike feature card, once hovered the background color will remain unchanged.

USE OUR TEMPLATES

START FROM SCRATCH

START NOW

<div class="row center-sm">
    <div class="col-sm-2">
        <div class="Card Card--primary Card--touch" alt="Organise Tasks">
            <div class="Card-content">
                <img class="img-semifluid" src="../styles/img/shared/templateDashboard.svg"/>
            </div>
            <div class="Card-content section-reverse">
                <h3>USE OUR TEMPLATES</h3>
            </div>
        </div>
    </div>
    <div class="col-sm-2">
        <div class="Card Card--secondary Card--touch" alt="Organise Tasks">
            <div class="Card-content">
                <img class="img-semifluid" src="../styles/img/shared/templateDashboard.svg"/>
            </div>
            <div class="Card-content section-reverse">
                <h3>START FROM SCRATCH</h3>
            </div>
        </div>
    </div>
    <div class="col-sm-2">
        <div class="Card Card--neutral Card--touch" alt="Organise Tasks">
            <div class="Card-content">
                <img class="img-semifluid" src="../styles/img/shared/templateDashboard.svg"/>
            </div>
            <div class="Card-content section-reverse">
                <h3>START NOW</h3>
            </div>
        </div>
    </div>
</div>

Colored cards with title and content at the bottom

The colored cards with title and bottom content with light color background

Weave

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown

Form

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown

list

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown

<div class="row center-sm">
    <div class=" row center-sm">
        <div class="col-sm-2">
            <div class="Card Card--primary Card--touch" alt="Organise Tasks">
                <div class="Card-content section-reverse">
                    <h3 class="Card-title">Weave</h3>
                </div>
                <img class="img-fluid mediaObject" src="https://placebear.com/300/200"/>
                <div class="Card-contentBottom">
                    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown</p>
                    <div class="section-centered">
                        <button class="Btn Btn--primary">Primary button</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="Card Card--secondary Card--touch" alt="Organise Tasks">
                <div class="Card-content section-reverse">
                    <h3 class="Card-title">Form</h3>
                </div>
                <img class="img-fluid mediaObject" src="https://placebear.com/300/200"/>
                <div class="Card-contentBottom">
                    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown</p>
                    <div class="section-centered">
                        <button class="Btn Btn--primary">Primary button</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="Card Card--neutral Card--touch" alt="Organise Tasks">
                <div class="Card-content section-reverse">
                    <h3 class="Card-title">list</h3>
                </div>
                <img class="img-fluid mediaObject" src="https://placebear.com/300/200"/>
                <div class="Card-contentBottom">
                    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown</p>
                    <div class="section-centered">
                        <button class="Btn Btn--primary">Primary button</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Widget Card

Widget Cards are interactive and are used to visually section products and services features.

Battery
Numbers
Time Tracking
<div class="WidgetCard">
    <div class="WidgetCard-content">
        <svg class="Icon Icon--lg" title="battery colored icon" role="img">
            <use xlink:href="#batteryColored"></use>
        </svg>
        <div><small>Battery</small></div>
    </div>
</div>
<div class="WidgetCard">
    <div class="WidgetCard-content">
        <svg class="Icon Icon--lg" title="numbers colored icon" role="img">
            <use xlink:href="#numbersColored"></use>
        </svg>
        <div><small>Numbers</small></div>
    </div>
</div>
<div class="WidgetCard">
    <div class="WidgetCard-content">
        <svg class="Icon Icon--lg" title="time tracker icon" role="img">
            <use xlink:href="#timeTrackerColored"></use>
        </svg>
        <div><small>Time Tracking</small></div>
    </div>
</div>

File Card

a-sample-file-name.txt

20 MB

a-sample-file-name.txt

20 MB

a-sample-file-name.txt

File is too large (max. 2 MB)
<div class="FileCard">
    <div class="FileCard-figure">
        <svg class="Icon" title="add description icon" role="img">
            <use xlink:href="#addDescription"></use>
        </svg>
    </div>
    <div class="FileCard-body">
        <div class="FileCard-info">
            <h4 class="FileCard-title">a-sample-file-name.txt</h4>
            <h6 class="FileCard-subtitle">20 MB</h6>
        </div>
        <div class="FileCard-action">
            <button class="TypeBtn TypeBtn--unspaced">
                <svg class="Icon" title="close icon" role="img">
                    <use xlink:href="#close"></use>
                </svg>
            </button>
        </div>
    </div>
</div>
<div class="FileCard" style="--progress-bar: 30">
    <div class="FileCard-figure">
        <span class="Spinner"></span>
    </div>
    <div class="FileCard-body">
        <div class="FileCard-bar"></div>
        <div class="FileCard-info">
            <h4 class="FileCard-title">a-sample-file-name.txt</h4>
            <h6 class="FileCard-subtitle">20 MB</h6>
        </div>
        <div class="FileCard-action">
            <button class="TypeBtn TypeBtn--unspaced">
                <svg class="Icon" title="close icon" role="img">
                    <use xlink:href="#close"></use>
                </svg>
            </button>
        </div>
    </div>
</div>
<div class="FileCard FileCard--error">
    <div class="FileCard-figure">
        <svg class="Icon" title="add description icon" role="img">
            <use xlink:href="#addDescription"></use>
        </svg>
    </div>
    <div class="FileCard-body">
        <div class="FileCard-bar"></div>
        <div class="FileCard-info">
            <h4 class="FileCard-title">a-sample-file-name.txt</h4>
            <h6 class="FileCard-subtitle">File is too large (max. 2 MB)</h6>
        </div>
        <div class="FileCard-action">
            <button class="TypeBtn TypeBtn--unspaced">
                <svg class="Icon" title="close icon" role="img">
                    <use xlink:href="#close"></use>
                </svg>
            </button>
        </div>
    </div>
</div>

Disc

IF
OR
SUM
DIFF
PRODUCT
IF
IF
<div class="section">
    <div class="Disc" style="--disc-color: var(--color-happy-day-1)">
        <div class="Disc-content"><span>IF</span></div>
    </div>
    <div class="Disc" style="--disc-color: var(--color-happy-day-2)">
        <div class="Disc-content"><span>OR</span></div>
    </div>
    <div class="Disc" style="--disc-color: var(--color-happy-day-8)">
        <div class="Disc-content"><span>SUM</span></div>
    </div>
    <div class="Disc" style="--disc-color: var(--color-happy-day-9)">
        <div class="Disc-content"><span>DIFF</span></div>
    </div>
    <div class="Disc" style="--disc-color: var(--color-happy-day-5)">
        <div class="Disc-content"><span>PRODUCT</span></div>
    </div>
</div>

<div class="section">
    <div class="Disc Disc-is-active" style="--disc-color: var(--color-happy-day-3)">
        <div class="Disc-content"><span>IF</span></div>
    </div>
    <div class="Disc Disc-is-hoverable" style="--disc-color: var(--color-happy-day-7)">
        <div class="Disc-content"><span>IF</span></div>
    </div>
</div>

Dividers

Dividers are used to divide contents.

THIS IS A DIVIDER WITH TEXT
THIS IS A DIVIDER WITH TEXT ONLY
This is a vertical divider
Lorem Ipsum dolor
Divider
Vertical 
<div class="Divider"></div>


<div class="Divider Divider--text">
    THIS IS A DIVIDER WITH TEXT
</div>

<div class="Divider Divider--textOnly">
    THIS IS A DIVIDER WITH TEXT ONLY
</div>

<div class="Callout">
    <div class="section">
        <div class="Divider Divider--vertical">
        <span>This is a vertical divider</span><div class="Divider-line"></div><span>Lorem Ipsum dolor</span>
        </div>
    </div>
    <div class="section">
        <div class="Divider Divider--vertical">
            <span class="Badge">Divider</span><div class="Divider-line"></div><span class="Badge">Vertical</span>
        </div>
    </div>
</div>

File Viewer

Click image to open Image in Fullscreen Modal

Image Viewer Fullscreen Modal

File Viewer Fullscreen Modal

/
1 / 10
Insert PDF viewer here.
<div>
    <a class="FileViewer--cover" href="#" data-modal-target="FileViewerModal1">
        <img class="FileViewer-image" src="https://placebear.com/800/1000" height="75" width="75">
    </a>
    <span>Click image to open Image in Fullscreen Modal</span>
</div>

<button class="Btn Btn--primary" data-modal-target="FileViewerModal2">Click me to show the PDF Viewer Fullscreen Modal</button>

<div class="ModalLayer">
    <div class="Modal Modal--fullScreen Modal--black Modal--sharp" data-modal="FileViewerModal1" tabindex="-1">
        <div class="Modal-dialog">
            <div class="Modal-content">
                <div class="Modal-header">
                    <h3 class="Modal-title">Image Viewer Fullscreen Modal</h3>
                    <button class="IconBtn Modal-close" data-modal-dismiss>
                        <svg class="Icon Icon--lg Icon--reverse" title="close icon" role="img">
                            <use xlink:href="#close"></use>
                        </svg>
                    </button>
                </div>
                <div class="Modal-body">
                    <div class="FileViewer FileViewer--fullscreen">
                        <img class="FileViewer-image" src="https://placebear.com/800/1000" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ModalLayer">
    <div class="Modal Modal--fullScreen Modal--black Modal--sharp" data-modal="FileViewerModal2" tabindex="-1">
        <div class="Modal-dialog">
            <div class="Modal-content">
                <div class="Modal-header">
                    <h3 class="Modal-title">File Viewer Fullscreen Modal</h3>
                    <button class="IconBtn Modal-close" data-modal-dismiss>
                        <svg class="Icon Icon--lg Icon--reverse" title="close icon" role="img">
                            <use xlink:href="#close"></use>
                        </svg>
                    </button>
                </div>
                <div class="Modal-body">
                    <div class="FileViewer FileViewer--fullscreen">
                        <div class="FileViewer-container">
                            <div class="FileViewer-utility">
                                <div>
                                    <svg class="Icon" title="arrow left icon" role="img">
                                        <use xlink:href="#arrowLeftOutlined"></use>
                                    </svg>
                                    <svg class="Icon" title="arrow right icon" role="img">
                                        <use xlink:href="#arrowRightOutlined"></use>
                                    </svg>
                                </div>
                                <div class="FileViewer-zoom">
                                    <svg class="Icon" title="search icon" role="img">
                                        <use xlink:href="#search"></use>
                                    </svg>
                                    <svg class="Icon" title="minus icon" role="img">
                                        <use xlink:href="#minus"></use>
                                    </svg>
                                    <span class="fs-xl text-default primary-font fw-normal">&sol;</span>
                                    <svg class="Icon" title="plus icon" role="img">
                                        <use xlink:href="#plus"></use>
                                    </svg>
                                </div>
                                <div>
                                    <span class="fs-lg text-default primary-font fw-normal">
                                        1 &sol; 10
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="FileViewer-body">
                            <div class="Callout Callout--primary">Insert PDF viewer here.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Lists

  • Umami lo-fi kickstarter green juice adaptogen.
  • Post-ironic jean shorts mlkshk crucifix pug cardigan cold-pressed.
  • Pour-over intelligentsia venmo, blog iceland fanny pack fam mixtape mumblecore vaporware you probably haven't heard of them.
  1. Pinterest marfa hoodie, pour-over williamsburg polaroid palo santo chia small batch.
  2. Pabst locavore bushwick mustache enamel pin kogi irony microdosing affogato.
  3. Ramps photo booth four dollar toast vaporware skateboard.
  • Umami lo-fi kickstarter green juice adaptogen.
  • Post-ironic jean shorts mlkshk crucifix pug cardigan cold-pressed.
  • Pour-over intelligentsia venmo, blog iceland fanny pack fam mixtape mumblecore vaporware you probably haven't heard of them.
<ul class="List">
    <li>Umami lo-fi kickstarter green juice adaptogen.</li>
    <li>Post-ironic jean shorts mlkshk crucifix pug cardigan cold-pressed.</li>
    <li>Pour-over intelligentsia venmo, blog iceland fanny pack fam mixtape mumblecore vaporware you probably haven't heard of them.</li>
</ul>

<ol class="List">
    <li>Pinterest marfa hoodie, pour-over williamsburg polaroid palo santo chia small batch.</li>
    <li>Pabst locavore bushwick mustache enamel pin kogi irony microdosing affogato.</li>
    <li>Ramps photo booth four dollar toast vaporware skateboard.</li>
</ol>

<ul class="List List--none">
    <li>Umami lo-fi kickstarter green juice adaptogen.</li>
    <li>Post-ironic jean shorts mlkshk crucifix pug cardigan cold-pressed.</li>
    <li>Pour-over intelligentsia venmo, blog iceland fanny pack fam mixtape mumblecore vaporware you probably haven't heard of them.</li>
</ul>

Description List

Learn about dl's: HTML dl

Harry Potter and the Half Blood Prince
J.K. Rowling
Tuesday with Morrie
Mitch Albom
The Da Vinci Code
Dan Brown
The Fault in Our Stars
John Green
The Hunger Games
Suzanne Collins
Divergent
Veronica Roth
<dl class="DList">
    <div class="DList-row">
        <dt>Harry Potter and the Half Blood Prince</dt>
        <dd>J.K. Rowling</dd>
    </div>
    <div class="DList-row">
        <dt>Tuesday with Morrie</dt>
        <dd>Mitch Albom</dd>
    </div>
</dl>

<dl class="DList DList--alt">
    <div class="DList-row">
        <dt>The Da Vinci Code</dt>
        <dd>Dan Brown</dd>
    </div>
    <div class="DList-row">
        <dt>The Fault in Our Stars</dt>
        <dd>John Green</dd>
    </div>
</dl>

<dl class="DList DList--stacked">
    <div class="DList-row">
        <dt>The Hunger Games</dt>
        <dd>Suzanne Collins</dd>
    </div>
    <div class="DList-row">
        <dt>Divergent</dt>
        <dd>Veronica Roth</dd>
    </div>
</dl>

List Group

  • This is the light list group
  • JD Et harum quidem
  • AH At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
    Primary
  • RB Aquis nostrud exercitation ullamco
    Primary
  • This is the ghost list group
  • JD List item that is active
  • JD Et harum quidem
  • VM At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
    Primary
  • ER Aquis nostrud exercitation ullamco
    Primary
  • This is the unspaced list group
  • JD Et harum quidem
  • AH At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
    Primary
  • AH Aquis nostrud exercitation ullamco
    Primary
  • This is the ghost list group that has hoverable list-items
  • JD List item that is active
  • JD Et harum quidem
  • VM At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
    Primary
  • ER Aquis nostrud exercitation ullamco
    Primary
  • This is the ghost list group that has clickable list-items thru cursor pointer
  • JD List item that is active
  • JD Et harum quidem
  • VM At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
    Primary
  • ER Aquis nostrud exercitation ullamco
    Primary
  • This is the single lined list group
  • JD Et harum quidem
  • VM At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
    Primary
  • ER Aquis nostrud exercitation ullamco
    Primary 
<ul class="List List-group">
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <span class="List-content is-ellipsed">
                This is the default list group
            </span>
        </div>
    </li>
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <div class="List-content Avatar Avatar--sm is-ellipsed">
                <span class="Avatar-initials">JD</span>
                <span class="Avatar-text is-ellipsed">Et harum quidem</span>
            </div>
        </div>
        <div class="List-holder">
            <button class="List-content IconBtn IconBtn--unspaced">
                <svg class="Icon Icon--circle Icon--filled Icon--lg" title="check icon" role="img">
                    <use xlink:href="#check"></use>
                </svg>
            </button>
        </div>
    </li>
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <div class="List-content is-ellipsed Avatar Avatar--sm">
                <span class="Avatar-initials">AH</span>
                <span class="Avatar-text is-ellipsed">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</span>
            </div>
            <span class="List-content Badge Badge--primary">
                Primary
            </span>
        </div>
        <div class="List-holder">
            <div class="List-content Checkbox">
                <input type="checkbox" id="listGroup-checkbox1" />
                <label for="listGroup-checkbox1">
                    <span class="Checkbox-button"></span>
                </label>
            </div>
        </div>
    </li>
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <div class="Checkbox List-content">
                <input type="checkbox" id="listGroup-checkbox2" />
                <label for="listGroup-checkbox2">
                    <span class="Checkbox-button"></span>
                </label>
            </div>
            <a href="#" class="List-content is-ellipsed Avatar Avatar--sm">
                <span class="Avatar-initials">AH</span>
                <span class="Avatar-text is-ellipsed">Aquis nostrud exercitation ullamco</span>
            </a>
            <svg class="List-content Icon Icon--lg" title="check icon" role="img">
                <use xlink:href="#check"></use>
            </svg>
        </div>
        <div class="List-holder">
            <span class="List-content Badge Badge--primary">
                Primary
            </span>
            <button class="List-content IconBtn IconBtn--unspaced">
                <svg class="Icon Icon--circle Icon--filled Icon--lg" title="check icon" role="img">
                    <use xlink:href="#check"></use>
                </svg>
            </button>
        </div>
    </li>
</ul>

<ul class="List List-group List--light">
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <span class="List-content is-ellipsed">
                This is the light list group
            </span>
        </div>
    </li>
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <a href="#"  class="List-content Avatar Avatar--sm is-ellipsed">
                <span class="Avatar-initials">JD</span>
                <span class="Avatar-text is-ellipsed">Et harum quidem</span>
            </a>
        </div>
        <div class="List-holder">
            <button class="List-content IconBtn IconBtn--unspaced">
                <svg class="Icon Icon--circle Icon--filled Icon--lg" title="check icon" role="img">
                    <use xlink:href="#check"></use>
                </svg>
            </button>
        </div>
    </li>
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <div class="List-content is-ellipsed Avatar Avatar--sm">
                <span class="Avatar-initials">AH</span>
                <span class="Avatar-text is-ellipsed">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</span>
            </div>
            <span class="List-content Badge Badge--primary">
                Primary
            </span>
        </div>
        <div class="List-holder">
            <div class="List-content Checkbox">
                <input type="checkbox" id="listGroup-checkbox3" />
                <label for="listGroup-checkbox3">
                    <span class="Checkbox-button"></span>
                </label>
            </div>
        </div>
    </li>
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <div class="Checkbox List-content">
                <input type="checkbox" id="listGroup-checkbox4" />
                <label for="listGroup-checkbox4">
                    <span class="Checkbox-button"></span>
                </label>
            </div>
            <div class="List-content is-ellipsed Avatar Avatar--sm">
                <span class="Avatar-initials">RB</span>
                <span class="Avatar-text is-ellipsed">Aquis nostrud exercitation ullamco</span>
            </div>
            <svg class="List-content Icon Icon--lg" title="check icon" role="img">
                <use xlink:href="#check"></use>
            </svg>
        </div>
        <div class="List-holder">
            <span class="List-content Badge Badge--primary">
                Primary
            </span>
            <button class="List-content IconBtn IconBtn--unspaced">
                <svg class="Icon Icon--circle Icon--filled Icon--lg" title="check icon" role="img">
                    <use xlink:href="#check"></use>
                </svg>
            </button>
        </div>
    </li>
</ul>

<ul class="List List-group List--ghost">
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <span class="List-content is-ellipsed">
                This is the ghost list group
            </span>
        </div>
    </li>
    <li class="List-item List-item-is-active">
        <div class="List-holder is-ellipsed">
            <div class="List-content Avatar Avatar--sm is-ellipsed">
                <span class="Avatar-initials">JD</span>
                <span class="Avatar-text is-ellipsed">List item that is active</span>
            </div>
        </div>
        <div class="List-holder">
            <button class="List-content IconBtn IconBtn--unspaced">
                <svg class="Icon Icon--circle Icon--filled Icon--lg" title="check icon" role="img">
                    <use xlink:href="#check"></use>
                </svg>
            </button>
        </div>
    </li>
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <div class="List-content Avatar Avatar--sm is-ellipsed">
                <span class="Avatar-initials">JD</span>
                <span class="Avatar-text is-ellipsed">Et harum quidem</span>
            </div>
        </div>
        <div class="List-holder">
            <button class="List-content IconBtn IconBtn--unspaced">
                <svg class="Icon Icon--circle Icon--filled Icon--lg" title="check icon" role="img">
                    <use xlink:href="#check"></use>
                </svg>
            </button>
            <button class="List-menu" type="button">
                <svg class="Icon" title="meatball icon" role="img">
                    <use xlink:href="#meatball"></use>
                </svg>
            </button>
        </div>
    </li>
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <div class="List-content is-ellipsed Avatar Avatar--sm">
                <span class="Avatar-initials">VM</span>
                <span class="Avatar-text is-ellipsed">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</span>
            </div>
            <span class="List-content Badge Badge--primary">
                Primary
            </span>
        </div>
        <div class="List-holder">
            <div class="List-content Checkbox">
                <input type="checkbox" id="listGroup-checkbox5" />
                <label for="listGroup-checkbox5">
                    <span class="Checkbox-button"></span>
                </label>
            </div>
        </div>
    </li>
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <div class="Checkbox List-content">
                <input type="checkbox" id="listGroup-checkbox6" />
                <label for="listGroup-checkbox6">
                    <span class="Checkbox-button"></span>
                </label>
            </div>
            <div class="List-content is-ellipsed Avatar Avatar--sm">
                <span class="Avatar-initials">ER</span>
                <span class="Avatar-text is-ellipsed">Aquis nostrud exercitation ullamco</span>
            </div>
            <svg class="List-content Icon Icon--lg" title="check icon" role="img">
                <use xlink:href="#check"></use>
            </svg>
        </div>
        <div class="List-holder">
            <span class="List-content Badge Badge--primary">
                Primary
            </span>
            <button class="List-content IconBtn IconBtn--unspaced">
                <svg class="Icon Icon--circle Icon--filled Icon--lg" title="check icon" role="img">
                    <use xlink:href="#check"></use>
                </svg>
            </button>
        </div>
    </li>
</ul>


<ul class="List List-group List--unspaced">
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <span class="List-content is-ellipsed">
                This is the unspaced list group
            </span>
        </div>
    </li>
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <div class="List-content Avatar Avatar--sm is-ellipsed">
                <span class="Avatar-initials">JD</span>
                <span class="Avatar-text is-ellipsed">Et harum quidem</span>
            </div>
        </div>
        <div class="List-holder">
            <button class="List-content IconBtn IconBtn--unspaced">
                <svg class="Icon Icon--circle Icon--filled Icon--lg" title="check icon" role="img">
                    <use xlink:href="#check"></use>
                </svg>
            </button>
        </div>
    </li>
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <div class="List-content is-ellipsed Avatar Avatar--sm">
                <span class="Avatar-initials">AH</span>
                <span class="Avatar-text is-ellipsed">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</span>
            </div>
            <span class="List-content Badge Badge--primary">
                Primary
            </span>
        </div>
        <div class="List-holder">
            <div class="List-content Checkbox">
                <input type="checkbox" id="listGroup-checkbox7" />
                <label for="listGroup-checkbox7">
                    <span class="Checkbox-button"></span>
                </label>
            </div>
        </div>
    </li>
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <div class="Checkbox List-content">
                <input type="checkbox" id="listGroup-checkbox8" />
                <label for="listGroup-checkbox8">
                    <span class="Checkbox-button"></span>
                </label>
            </div>
            <a href="#" class="List-content is-ellipsed Avatar Avatar--sm">
                <span class="Avatar-initials">AH</span>
                <span class="Avatar-text is-ellipsed">Aquis nostrud exercitation ullamco</span>
            </a>
            <svg class="List-content Icon Icon--lg" title="check icon" role="img">
                <use xlink:href="#check"></use>
            </svg>
        </div>
        <div class="List-holder">
            <span class="List-content Badge Badge--primary">
                Primary
            </span>
            <button class="List-content IconBtn IconBtn--unspaced">
                <svg class="Icon Icon--circle Icon--filled Icon--lg" title="check icon" role="img">
                    <use xlink:href="#check"></use>
                </svg>
            </button>
        </div>
    </li>
</ul>

<ul class="List List-group List--ghost">
    <li class="List-item List-item-is-hoverable">
        <div class="List-holder is-ellipsed">
            <span class="List-content is-ellipsed">
                This is the ghost list group that has hoverable list-items
            </span>
        </div>
    </li>
    <li class="List-item List-item-is-hoverable List-item-is-active">
        <div class="List-holder is-ellipsed">
            <div class="List-content Avatar Avatar--sm is-ellipsed">
                <span class="Avatar-initials">JD</span>
                <span class="Avatar-text is-ellipsed">List item that is active</span>
            </div>
        </div>
        <div class="List-holder">
            <button class="List-content IconBtn IconBtn--unspaced">
                <svg class="Icon Icon--circle Icon--filled Icon--lg" title="check icon" role="img">
                    <use xlink:href="#check"></use>
                </svg>
            </button>
        </div>
    </li>
    <li class="List-item List-item-is-hoverable">
        <div class="List-holder is-ellipsed">
            <div class="List-content Avatar Avatar--sm is-ellipsed">
                <span class="Avatar-initials">JD</span>
                <span class="Avatar-text is-ellipsed">Et harum quidem</span>
            </div>
        </div>
        <div class="List-holder">
            <button class="List-content IconBtn IconBtn--unspaced">
                <svg class="Icon Icon--circle Icon--filled Icon--lg" title="check icon" role="img">
                    <use xlink:href="#check"></use>
                </svg>
            </button>
            <button class="List-menu" type="button">
                <svg class="Icon" title="meatball icon" role="img">
                    <use xlink:href="#meatball"></use>
                </svg>
            </button>
        </div>
    </li>
    <li class="List-item List-item-is-hoverable">
        <div class="List-holder is-ellipsed">
            <div class="List-content is-ellipsed Avatar Avatar--sm">
                <span class="Avatar-initials">VM</span>
                <span class="Avatar-text is-ellipsed">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</span>
            </div>
            <span class="List-content Badge Badge--primary">
                Primary
            </span>
        </div>
        <div class="List-holder">
            <div class="List-content Checkbox">
                <input type="checkbox" id="listGroup-checkbox9" />
                <label for="listGroup-checkbox9">
                    <span class="Checkbox-button"></span>
                </label>
            </div>
        </div>
    </li>
    <li class="List-item List-item-is-hoverable">
        <div class="List-holder is-ellipsed">
            <div class="Checkbox List-content">
                <input type="checkbox" id="listGroup-checkbox10" />
                <label for="listGroup-checkbox10">
                    <span class="Checkbox-button"></span>
                </label>
            </div>
            <div class="List-content is-ellipsed Avatar Avatar--sm">
                <span class="Avatar-initials">ER</span>
                <span class="Avatar-text is-ellipsed">Aquis nostrud exercitation ullamco</span>
            </div>
            <svg class="List-content Icon Icon--lg" title="check icon" role="img">
                <use xlink:href="#check"></use>
            </svg>
        </div>
        <div class="List-holder">
            <span class="List-content Badge Badge--primary">
                Primary
            </span>
            <button class="List-content IconBtn IconBtn--unspaced">
                <svg class="Icon Icon--circle Icon--filled Icon--lg" title="check icon" role="img">
                    <use xlink:href="#check"></use>
                </svg>
            </button>
        </div>
    </li>
</ul>

<ul class="List List-group List--ghost">
    <li class="List-item List-item-is-clickable">
        <div class="List-holder is-ellipsed">
            <span class="List-content is-ellipsed">
                This is the ghost list group that has clickable list-items thru cursor pointer
            </span>
        </div>
    </li>
    <li class="List-item List-item-is-clickable List-item-is-active">
        <div class="List-holder is-ellipsed">
            <div class="List-content Avatar Avatar--sm is-ellipsed">
                <span class="Avatar-initials">JD</span>
                <span class="Avatar-text is-ellipsed">List item that is active</span>
            </div>
        </div>
        <div class="List-holder">
            <button class="List-content IconBtn IconBtn--unspaced">
                <svg class="Icon Icon--circle Icon--filled Icon--lg" title="check icon" role="img">
                    <use xlink:href="#check"></use>
                </svg>
            </button>
        </div>
    </li>
    <li class="List-item List-item-is-clickable">
        <div class="List-holder is-ellipsed">
            <div class="List-content Avatar Avatar--sm is-ellipsed">
                <span class="Avatar-initials">JD</span>
                <span class="Avatar-text is-ellipsed">Et harum quidem</span>
            </div>
        </div>
        <div class="List-holder">
            <button class="List-content IconBtn IconBtn--unspaced">
                <svg class="Icon Icon--circle Icon--filled Icon--lg" title="check icon" role="img">
                    <use xlink:href="#check"></use>
                </svg>
            </button>
            <button class="List-menu" type="button">
                <svg class="Icon" title="meatball icon" role="img">
                    <use xlink:href="#meatball"></use>
                </svg>
            </button>
        </div>
    </li>
    <li class="List-item List-item-is-clickable">
        <div class="List-holder is-ellipsed">
            <div class="List-content is-ellipsed Avatar Avatar--sm">
                <span class="Avatar-initials">VM</span>
                <span class="Avatar-text is-ellipsed">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</span>
            </div>
            <span class="List-content Badge Badge--primary">
                Primary
            </span>
        </div>
        <div class="List-holder">
            <div class="List-content Checkbox">
                <input type="checkbox" id="listGroup-checkbox11" />
                <label for="listGroup-checkbox11">
                    <span class="Checkbox-button"></span>
                </label>
            </div>
        </div>
    </li>
    <li class="List-item List-item-is-clickable">
        <div class="List-holder is-ellipsed">
            <div class="Checkbox List-content">
                <input type="checkbox" id="listGroup-checkbox12" />
                <label for="listGroup-checkbox12">
                    <span class="Checkbox-button"></span>
                </label>
            </div>
            <div class="List-content is-ellipsed Avatar Avatar--sm">
                <span class="Avatar-initials">ER</span>
                <span class="Avatar-text is-ellipsed">Aquis nostrud exercitation ullamco</span>
            </div>
            <svg class="List-content Icon Icon--lg" title="check icon" role="img">
                <use xlink:href="#check"></use>
            </svg>
        </div>
        <div class="List-holder">
            <span class="List-content Badge Badge--primary">
                Primary
            </span>
            <button class="List-content IconBtn IconBtn--unspaced">
                <svg class="Icon Icon--circle Icon--filled Icon--lg" title="check icon" role="img">
                    <use xlink:href="#check"></use>
                </svg>
            </button>
        </div>
    </li>
</ul>

<ul class="List List-group List--lined">
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <span class="List-content is-ellipsed">
                This is the single lined list group
            </span>
        </div>
    </li>
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <div class="List-content Avatar Avatar--sm is-ellipsed">
                <span class="Avatar-initials">JD</span>
                <span class="Avatar-text is-ellipsed">Et harum quidem</span>
            </div>
        </div>
        <div class="List-holder">
            <button class="List-content IconBtn IconBtn--unspaced">
                <svg class="Icon Icon--circle Icon--filled Icon--lg" title="check icon" role="img">
                    <use xlink:href="#check"></use>
                </svg>
            </button>
            <button class="List-menu" type="button">
                <svg class="Icon" title="meatball icon" role="img">
                    <use xlink:href="#meatball"></use>
                </svg>
            </button>
        </div>
    </li>
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <div class="List-content is-ellipsed Avatar Avatar--sm">
                <span class="Avatar-initials">VM</span>
                <span class="Avatar-text is-ellipsed">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</span>
            </div>
            <span class="List-content Badge Badge--primary">
                Primary
            </span>
        </div>
        <div class="List-holder">
            <div class="List-content Checkbox">
                <input type="checkbox" id="listGroup-checkbox13" />
                <label for="listGroup-checkbox13">
                    <span class="Checkbox-button"></span>
                </label>
            </div>
        </div>
    </li>
    <li class="List-item">
        <div class="List-holder is-ellipsed">
            <div class="Checkbox List-content">
                <input type="checkbox" id="listGroup-checkbox14" />
                <label for="listGroup-checkbox14">
                    <span class="Checkbox-button"></span>
                </label>
            </div>
            <div class="List-content is-ellipsed Avatar Avatar--sm">
                <span class="Avatar-initials">ER</span>
                <span class="Avatar-text is-ellipsed">Aquis nostrud exercitation ullamco</span>
            </div>
            <svg class="List-content Icon Icon--lg" title="check icon" role="img">
                <use xlink:href="#check"></use>
            </svg>
        </div>
        <div class="List-holder">
            <span class="List-content Badge Badge--primary">
                Primary
            </span>
            <button class="List-content IconBtn IconBtn--unspaced">
                <svg class="Icon Icon--circle Icon--filled Icon--lg" title="check icon" role="img">
                    <use xlink:href="#check"></use>
                </svg>
            </button>
        </div>
    </li>
</ul>

Loader

There is some text here

There is some text here

There is some text here

There was some text here

<h1>There is some text here</h1>
<h1 class="Loader">There is some text here</h1>
<p>There is some text here</p>
<p class="Loader">There was some text here</p>
<div>
    <button class="Btn">There is some text here</button>
    <button class="Btn Loader">There was some text here</button>
</div>
<div>
    <button class="Btn Btn--primary">There is some text here</button>
    <button class="Btn Btn--primary Loader">There was some text here</button>
</div>

Modal

Modals are dialog boxes. These are best used for getting the user's attention and essential information

Click me to show the Centered Modal Click me to show the Graphics Modal Click me to show the Large Modal Click me to show the Plain Modal Click me to show the Plain Ghost Modal

Default Modal

Modal body text goes here.

Centered Modal

Modal body text goes here.

Centered Modal

Modal body text goes here.

 

Do you really want to delete this dashboard?

Medium Modal

Modal body text goes here.

Large Modal

Modal body text goes here.

 

You have successfully deleted "Samsung Sales" dashboard. You can restore your dashboard any time through the trash.

 

You have successfully deleted "Samsung Sales" dashboard. You can restore your dashboard any time through the trash.

 

You have successfully deleted "Samsung Sales" dashboard. You can restore your dashboard any time through the trash.

 

You have successfully deleted "Samsung Sales" dashboard. You can restore your dashboard any time through the trash.

 

You have successfully deleted "Samsung Sales" dashboard. You can restore your dashboard any time through the trash.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.

Ghost Modal

Modal body text goes here.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet.

Lorem Ipsum dolor

Lorem ipsum sit amet

Lorem Ipsum dolor

Lorem ipsum sit amet

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet.

Default Modal

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Sharp Modal

Modal body text goes here.

Fullscreen Modal

Modal body text goes here.

Fullscreen Modal

Modal body text goes here. 

<button class="Btn Btn--primary" data-modal-target="Modal1">Click me to show the Default Modal</button>

<a href="#" data-modal-target="Modal2">Click me to show the Centered Modal</a>

<button class="Btn Btn--primary" data-modal-target="Modal3">Click me to show the Default Modal with Header Graphics</button>

<a href="#" class="TypeBtn" data-modal-target="Modal4">Click me to show the Graphics Modal</a>

<button class="Btn Btn--primary" data-modal-target="Modal5">Click me to show the Medium Modal</button>

<a href="#" class="TypeBtn" data-modal-target="Modal6">Click me to show the Large Modal</a>

<button class="Btn Btn--primary" data-modal-target="Modal7">Click me to show the Second Graphics Modal</button>

<button class="Btn Btn--primary" data-modal-target="Modal8">Click me to show the Second Graphics Modal that is positioned bottom left</button>

<button class="Btn Btn--primary" data-modal-target="Modal9">Click me to show the Second Graphics Modal that is positioned top left</button>

<button class="Btn Btn--primary" data-modal-target="Modal10">Click me to show the Second Graphics Modal that is positioned bottom right</button>

<button class="Btn Btn--primary" data-modal-target="Modal11">Click me to show the Second Graphics Modal that is positioned top right</button>

<a href="#" class="TypeBtn" data-modal-target="Modal12">Click me to show the Plain Modal</a>

<a href="#" class="TypeBtn" data-modal-target="Modal13">Click me to show the Plain Ghost Modal</a>

<button class="Btn Btn--primary" data-modal-target="Modal14">Click me to show Modal with Right Section Backdrop</button>

<button class="Btn Btn--primary" data-modal-target="Modal15">Click me to show Modal with Left Section Backdrop</button>

<button class="Btn Btn--primary" data-modal-target="Modal16">Click me to show the Default Modal with longer contents</button>

<button class="Btn Btn--primary" data-modal-target="Modal17">Click me to show the Sharp Modal</button>

<button class="Btn Btn--primary" data-modal-target="Modal18">Click me to show the Fullscreen Modal</button>

<button class="Btn Btn--primary" data-modal-target="Modal19">Click me to show the Black Fullscreen Modal</button>

<div class="ModalLayer">
    <div class="Modal" data-modal="Modal1" tabindex="-1">
        <div class="Modal-container">
            <div class="Modal-dialog">
                <div class="Modal-content">
                    <div class="Modal-header">
                        <h3 class="Modal-title">Default Modal</h3>
                        <button class="IconBtn Modal-close" data-modal-dismiss>
                            <svg class="Icon Icon--lg Icon--reverse" title="close icon" role="img">
                                <use xlink:href="#close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="Modal-body">
                        <p>
                            <a href="#" data-modal-target="Modal2">Modal</a> body text goes here.
                        </p>
                    </div>
                    <div class="Modal-footer">
                        <button type="button" class="Modal-btn Btn Btn--primary">Save changes</button>
                        <button type="button" class="Modal-btn Btn Btn--secondary" data-modal-dismiss>Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ModalLayer">
    <div class="Modal Modal--center" data-modal="Modal2" tabindex="-1">
        <div class="Modal-container">
            <div class="Modal-dialog">
                <div class="Modal-content">
                    <div class="Modal-header">
                        <h3 class="Modal-title">Centered Modal</h3>
                        <button class="IconBtn Modal-close" data-modal-dismiss>
                            <svg class="Icon Icon--lg Icon--reverse" title="close icon" role="img">
                                <use xlink:href="#close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="Modal-body">
                        <p>Modal body text goes here.</p>
                    </div>
                    <div class="Modal-footer">
                        <button type="button" class="Modal-btn Btn Btn--primary">Save changes</button>
                        <button type="button" class="Modal-btn Btn Btn--secondary" data-modal-dismiss>Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ModalLayer">
    <div class="Modal Modal--center" data-modal="Modal3" tabindex="-1">
        <div class="Modal-container">
            <div class="Modal-dialog">
                <div class="Modal-content">
                    <div class="Modal-graphics">
                        <span class="Graphic Graphic--whiteSheepSent Graphic--lg" title="White Sheep Sent icon"></span>
                    </div>
                    <div class="Modal-header">
                        <h3 class="Modal-title">Centered Modal</h3>
                        <button class="IconBtn Modal-close" data-modal-dismiss>
                            <svg class="Icon Icon--lg Icon--reverse" title="close icon" role="img">
                                <use xlink:href="#close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="Modal-body">
                        <p>Modal body text goes here.</p>
                    </div>
                    <div class="Modal-footer">
                        <button type="button" class="Modal-btn Btn Btn--primary">Save changes</button>
                        <button type="button" class="Modal-btn Btn Btn--secondary" data-modal-dismiss>Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ModalLayer">
    <div class="Modal Modal--confirm Modal--center" data-modal="Modal4" tabindex="-1">
        <div class="Modal-container">
            <div class="Modal-dialog">
                <div class="Modal-content">
                    <div class="Modal-graphics">
                        <span class="Graphic Graphic--whiteSheepStunned Graphic--lg" title="White Sheep Stunned icon"></span>
                    </div>
                    <div class="Modal-header">
                        <h3 class="Modal-title">&nbsp;</h3>
                        <button class="IconBtn Modal-close" data-modal-dismiss>
                            <svg class="Icon Icon--lg Icon--reverse" title="close icon" role="img">
                                <use xlink:href="#close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="Modal-body">
                        <div class="Modal-bubble Graphic Graphic--chatBubble" title="Chat Bubble icon">
                            <div class="Modal-texts">
                                <h3>Do you really want to delete this dashboard?</h3>
                            </div>
                        </div>
                    </div>
                    <div class="Modal-footer">
                        <div class="BtnGroup BtnGroup--expanded">
                            <button class="Btn Btn--primary" data-modal-dismiss>Cancel</button>
                            <button class="Btn Btn--secondary">Delete</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ModalLayer">
    <div class="Modal Modal--center Modal--md" data-modal="Modal5" tabindex="-1">
        <div class="Modal-container">
            <div class="Modal-dialog">
                <div class="Modal-content">
                    <div class="Modal-header">
                        <h3 class="Modal-title">Medium Modal</h3>
                        <button class="IconBtn Modal-close" data-modal-dismiss>
                            <svg class="Icon Icon--lg Icon--reverse" title="close icon" role="img">
                                <use xlink:href="#close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="Modal-body">
                        <p><a href="#" data-modal-target="Modal2">Modal</a> body text goes here.</p>
                    </div>
                    <div class="Modal-footer">
                        <button type="button" class="Modal-btn Btn Btn--primary">Save changes</button>
                        <button type="button" class="Modal-btn Btn Btn--secondary" data-modal-dismiss>Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ModalLayer">
    <div class="Modal Modal--lg" data-modal="Modal6" tabindex="-1">
        <div class="Modal-container">
            <div class="Modal-dialog">
                <div class="Modal-content">
                    <div class="Modal-header">
                        <h3 class="Modal-title">Large Modal</h3>
                        <button class="IconBtn Modal-close" data-modal-dismiss>
                            <svg class="Icon Icon--lg Icon--reverse" title="close icon" role="img">
                                <use xlink:href="#close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="Modal-body">
                        <p><a href="#" data-modal-target="Modal2">Modal</a> body text goes here.</p>
                    </div>
                    <div class="Modal-footer">
                        <button type="button" class="Modal-btn Btn Btn--primary">Save changes</button>
                        <button type="button" class="Modal-btn Btn Btn--secondary" data-modal-dismiss>Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ModalLayer">
    <div class="Modal Modal--alert Modal--center" data-modal="Modal7" tabindex="-1">
        <div class="Modal-container">
            <div class="Modal-dialog">
                <div class="Modal-content">
                    <div class="Modal-graphics">
                        <span class="Graphic Graphic--blackSheepStanding Graphic--lg" title="Black Sheep Standing icon"></span>
                    </div>
                    <div class="Modal-header">
                        <h3 class="Modal-title">&nbsp;</h3>
                        <button class="IconBtn Modal-close" data-modal-dismiss>
                            <svg class="Icon Icon--circle Icon--filled Icon--outline Icon--primary Icon--xxxl" title="close icon" role="img">
                                <use xlink:href="#close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="Modal-body">
                        <div class="Modal-bubble Graphic Graphic--chatBubbleNoTail Graphic--xlg" title="No Tail Chat Bubble icon">
                            <div class="Modal-texts">
                                <p>You have successfully deleted "Samsung Sales" dashboard. You can restore your dashboard any time through the trash.</p>
                            </div>
                        </div>
                    </div>
                    <div class="Modal-footer">
                        <div class="row center-sm is-full-width">
                            <div class="col-md-3">
                                <button class="Btn Btn--primary Btn--expanded" data-modal-dismiss>OK</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ModalLayer">
    <div class="Modal Modal--alert Modal--bottom-left" data-modal="Modal8" tabindex="-1">
        <div class="Modal-container">
            <div class="Modal-dialog">
                <div class="Modal-content">
                    <div class="Modal-graphics">
                        <span class="Graphic Graphic--blackSheepStanding Graphic--lg" title="Black Sheep Standing icon"></span>
                    </div>
                    <div class="Modal-header">
                        <h3 class="Modal-title">&nbsp;</h3>
                        <button class="IconBtn Modal-close" data-modal-dismiss>
                            <svg class="Icon Icon--circle Icon--filled Icon--outline Icon--primary Icon--xxxl" title="close icon" role="img">
                                <use xlink:href="#close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="Modal-body">
                        <div class="Modal-bubble Graphic Graphic--chatBubbleNoTail Graphic--xlg" title="No Tail Chat Bubble icon">
                            <div class="Modal-texts">
                                <p>You have successfully deleted "Samsung Sales" dashboard. You can restore your dashboard any time through the trash.</p>
                            </div>
                        </div>
                    </div>
                    <div class="Modal-footer">
                        <div class="row center-sm is-full-width">
                            <div class="col-md-3">
                                <button class="Btn Btn--primary Btn--expanded" data-modal-dismiss>OK</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ModalLayer">
    <div class="Modal Modal--alert Modal--top-left" data-modal="Modal9" tabindex="-1">
        <div class="Modal-container">
            <div class="Modal-dialog">
                <div class="Modal-content">
                    <div class="Modal-graphics">
                        <span class="Graphic Graphic--blackSheepStanding Graphic--lg" title="Black Sheep Standing icon"></span>
                    </div>
                    <div class="Modal-header">
                        <h3 class="Modal-title">&nbsp;</h3>
                        <button class="IconBtn Modal-close" data-modal-dismiss>
                            <svg class="Icon Icon--circle Icon--filled Icon--outline Icon--primary Icon--xxxl" title="close icon" role="img">
                                <use xlink:href="#close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="Modal-body">
                        <div class="Modal-bubble Graphic Graphic--chatBubbleNoTail Graphic--xlg" title="No Tail Chat Bubble icon">
                            <div class="Modal-texts">
                                <p>You have successfully deleted "Samsung Sales" dashboard. You can restore your dashboard any time through the trash.</p>
                            </div>
                        </div>
                    </div>
                    <div class="Modal-footer">
                        <div class="row center-sm is-full-width">
                            <div class="col-md-3">
                                <button class="Btn Btn--primary Btn--expanded" data-modal-dismiss>OK</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ModalLayer">
    <div class="Modal Modal--alert Modal--bottom-right" data-modal="Modal10" tabindex="-1">
        <div class="Modal-container">
            <div class="Modal-dialog">
                <div class="Modal-content">
                    <div class="Modal-graphics">
                        <span class="Graphic Graphic--blackSheepStanding Graphic--lg" title="Black Sheep Standing icon"></span>
                    </div>
                    <div class="Modal-header">
                        <h3 class="Modal-title">&nbsp;</h3>
                        <button class="IconBtn Modal-close" data-modal-dismiss>
                            <svg class="Icon Icon--circle Icon--filled Icon--outline Icon--primary Icon--xxxl" title="close icon" role="img">
                                <use xlink:href="#close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="Modal-body">
                        <div class="Modal-bubble Graphic Graphic--chatBubbleNoTail Graphic--xlg" title="No Tail Chat Bubble icon">
                            <div class="Modal-texts">
                                <p>You have successfully deleted "Samsung Sales" dashboard. You can restore your dashboard any time through the trash.</p>
                            </div>
                        </div>
                    </div>
                    <div class="Modal-footer">
                        <div class="row center-sm is-full-width">
                            <div class="col-md-3">
                                <button class="Btn Btn--primary Btn--expanded" data-modal-dismiss>OK</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ModalLayer">
    <div class="Modal Modal--alert Modal--top-right" data-modal="Modal11" tabindex="-1">
        <div class="Modal-container">
            <div class="Modal-dialog">
                <div class="Modal-content">
                    <div class="Modal-graphics">
                        <span class="Graphic Graphic--blackSheepStanding Graphic--lg" title="Black Sheep Standing icon"></span>
                    </div>
                    <div class="Modal-header">
                        <h3 class="Modal-title">&nbsp;</h3>
                        <button class="IconBtn Modal-close" data-modal-dismiss>
                            <svg class="Icon Icon--circle Icon--filled Icon--outline Icon--primary Icon--xxxl" title="close icon" role="img">
                                <use xlink:href="#close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="Modal-body">
                        <div class="Modal-bubble Graphic Graphic--chatBubbleNoTail Graphic--xlg" title="No Tail Chat Bubble icon">
                            <div class="Modal-texts">
                                <p>You have successfully deleted "Samsung Sales" dashboard. You can restore your dashboard any time through the trash.</p>
                            </div>
                        </div>
                    </div>
                    <div class="Modal-footer">
                        <div class="row center-sm is-full-width">
                            <div class="col-md-3">
                                <button class="Btn Btn--primary Btn--expanded" data-modal-dismiss>OK</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ModalLayer">
    <div class="Modal Modal--center Modal--plain" data-modal="Modal12" tabindex="-1">
        <div class="Modal-container">
            <div class="Modal-dialog">
                <div class="Modal-content">
                    <div class="Modal-header">
                        <button class="IconBtn Modal-close" data-modal-dismiss>
                            <svg class="Icon Icon--lg" title="close icon" role="img">
                                <use xlink:href="#close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="Modal-body">
                        <div class="mediaObject">
                            <figure class="mediaObject-figure">
                                <span class="Graphic Graphic--whiteSheepWithSunglass" title="White Sheep With Sunglass icon"></span>
                            </figure>
                            <div class="mediaObject-body">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.</p>
                            </div>
                        </div>
                    </div>
                    <div class="Modal-footer">
                        <button type="button" class="Modal-btn Btn Btn--primary">Save changes</button>
                        <button type="button" class="Modal-btn Btn Btn--secondary" data-modal-dismiss>Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ModalLayer">
    <div class="Modal Modal--ghost" data-modal="Modal13" tabindex="-1">
        <div class="Modal-container">
            <div class="Modal-dialog">
                <div class="Modal-content">
                    <div class="Modal-header">
                        <h3 class="Modal-title">Ghost Modal</h3>
                        <button class="IconBtn Modal-close" data-modal-dismiss>
                            <svg class="Icon Icon--lg Icon--reverse" title="close icon" role="img">
                                <use xlink:href="#close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="Modal-body">
                        <p>
                            <a href="#" data-modal-target="Modal17">Modal</a> body text goes here.
                        </p>
                    </div>
                    <div class="Modal-footer">
                        <button type="button" class="Modal-btn Btn Btn--primary">Save changes</button>
                        <button type="button" class="Modal-btn Btn Btn--secondary" data-modal-dismiss>Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ModalLayer">
    <div class="Modal Modal--sectionBackdrop Modal--md Modal--center" data-modal="Modal14" tabindex="-1">
        <div class="Modal-container">
            <div class="Modal-dialog">
                <div class="Modal-content">
                    <div class="Modal-header">
                        <button class="IconBtn Modal-close" data-modal-dismiss>
                            <svg class="Icon Icon--reverse" title="close icon" role="img">
                                <use xlink:href="#close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="Modal-body">
                        <div class="row">
                            <div class="Callout Callout--ghost col-sm-3 section-centered Modal-contentRight section-centered">
                                <h3>Lorem Ipsum Dolor</h3>
                                <div class="Input">
                                    <label>Name</label>
                                    <div class="Input-field">
                                        <input type="text" placeholder="John Doe" />
                                    </div>
                                </div>
                                <div class="Input">
                                    <label>Email</label>
                                    <div class="Input-field">
                                        <input type="text" placeholder="johndoe@mail.com" />
                                    </div>
                                </div>
                                <div class="section-lg center-sm">
                                    <button class="Btn Btn--neutral">
                                        Cancel
                                    </button>
                                    <button class="Btn Btn--primary">
                                        Submit
                                    </button>
                                </div>
                                <small>Lorem ipsum dolor sit amet.</small>
                            </div>
                            <div class="Callout Callout--ghost col-sm-3 section-reverse section-backdrop Modal-contentLeft bg-mountains section-centered">
                                <h2>
                                    Lorem Ipsum dolor
                                </h2>
                                <p>
                                    Lorem ipsum sit amet
                                </p>
                                <div>
                                    <span class="Graphic Graphic--xlg Graphic--whiteSheepSocialMedia" title="White Sheep Social Media"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ModalLayer">
    <div class="Modal Modal--sectionBackdrop Modal--md Modal--center" data-modal="Modal15" tabindex="-1">
        <div class="Modal-container">
            <div class="Modal-dialog">
                <div class="Modal-content">
                    <div class="Modal-header">
                        <button class="IconBtn Modal-close" data-modal-dismiss>
                            <svg class="Icon" title="close icon" role="img">
                                <use xlink:href="#close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="Modal-body">
                        <div class="row">
                            <div class="Callout Callout--ghost col-sm-3 section-reverse section-backdrop Modal-contentRight section-centered bg-mountains">
                                <h2>
                                    Lorem Ipsum dolor
                                </h2>
                                <p>
                                    Lorem ipsum sit amet
                                </p>
                                <div>
                                    <span class="Graphic Graphic--xlg Graphic--whiteSheepSocialMedia" title="White Sheep Social Media"></span>
                                </div>
                            </div>
                            <div class="Callout Callout--ghost col-sm-3 Modal-contentLeft section-centered">
                                <h3>Lorem Ipsum Dolor</h3>
                                <div class="Input">
                                    <label>Name</label>
                                    <div class="Input-field">
                                        <input type="text" placeholder="John Doe" />
                                    </div>
                                </div>
                                <div class="Input">
                                    <label>Email</label>
                                    <div class="Input-field">
                                        <input type="text" placeholder="johndoe@mail.com" />
                                    </div>
                                </div>
                                <div class="section-lg center-sm">
                                    <button class="Btn Btn--neutral">
                                        Cancel
                                    </button>
                                    <button class="Btn Btn--primary">
                                        Submit
                                    </button>
                                </div>
                                <small>Lorem ipsum dolor sit amet.</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ModalLayer">
    <div class="Modal Modal--center" data-modal="Modal16">
        <div class="Modal-container">
            <div class="Modal-dialog">
                <div class="Modal-content">
                    <div class="Modal-header">
                        <h3 class="Modal-title">Default Modal</h3>
                        <button class="IconBtn Modal-close" data-modal-dismiss>
                            <svg class="Icon Icon--lg Icon--reverse" title="close icon" role="img">
                                <use xlink:href="#close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="Modal-body is-scrollable-y">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
                            est laborum
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
                            est laborum
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
                            est laborum
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
                            est laborum
                        </p>
                    </div>
                    <div class="Modal-footer">
                        <button type="button" class="Modal-btn Btn Btn--primary">Save changes</button>
                        <button type="button" class="Modal-btn Btn Btn--secondary" data-modal-dismiss>Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ModalLayer">
    <div class="Modal Modal--sharp" data-modal="Modal17" tabindex="-1">
        <div class="Modal-container">
            <div class="Modal-dialog">
                <div class="Modal-content">
                    <div class="Modal-header">
                        <h3 class="Modal-title">Sharp Modal</h3>
                        <button class="IconBtn Modal-close" data-modal-dismiss>
                            <svg class="Icon Icon--lg Icon--reverse" title="close icon" role="img">
                                <use xlink:href="#close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="Modal-body">
                        <p>
                            <a href="#" data-modal-target="Modal17">Modal</a> body text goes here.
                        </p>
                    </div>
                    <div class="Modal-footer">
                        <button type="button" class="Modal-btn Btn Btn--primary">Save changes</button>
                        <button type="button" class="Modal-btn Btn Btn--secondary" data-modal-dismiss>Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ModalLayer">
    <div class="Modal Modal--fullScreen" data-modal="Modal18" tabindex="-1">
        <div class="Modal-container">
            <div class="Modal-dialog">
                <div class="Modal-content">
                    <div class="Modal-header">
                        <h3 class="Modal-title">Fullscreen Modal</h3>
                        <button class="IconBtn Modal-close" data-modal-dismiss>
                            <svg class="Icon Icon--lg Icon--reverse" title="close icon" role="img">
                                <use xlink:href="#close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="Modal-body">
                        <p>
                            <a href="#" data-modal-target="Modal18">Modal</a> body text goes here.
                        </p>
                    </div>
                    <div class="Modal-footer">
                        <button type="button" class="Modal-btn Btn Btn--primary">Save changes</button>
                        <button type="button" class="Modal-btn Btn Btn--secondary" data-modal-dismiss>Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ModalLayer">
    <div class="Modal Modal--fullScreen Modal--black Modal--sharp" data-modal="Modal19" tabindex="-1">
        <div class="Modal-container">
            <div class="Modal-dialog">
                <div class="Modal-content">
                    <div class="Modal-header">
                        <h3 class="Modal-title">Fullscreen Modal</h3>
                        <button class="IconBtn Modal-close" data-modal-dismiss>
                            <svg class="Icon Icon--lg Icon--reverse" title="close icon" role="img">
                                <use xlink:href="#close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="Modal-body">
                        <p>
                            <a href="#" data-modal-target="Modal19">Modal</a> body text goes here.
                        </p>
                    </div>
                    <div class="Modal-footer">
                        <button type="button" class="Modal-btn Btn Btn--primary">Save changes</button>
                        <button type="button" class="Modal-btn Btn Btn--secondary" data-modal-dismiss>Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Palette

Happy Day
 
 
 
 
 
 
 
 
 
Fin Du Mundo
 
 
 
 
 
 
 
 
 
<div class="Palette">
    <div class="Palette-text">Happy Day</div>
    <div class="Palette-colors">
        <div class="Palette-color happy-day-1">&nbsp;</div>
        <div class="Palette-color happy-day-2">&nbsp;</div>
        <div class="Palette-color happy-day-3">&nbsp;</div>
        <div class="Palette-color happy-day-4">&nbsp;</div>
        <div class="Palette-color happy-day-5">&nbsp;</div>
        <div class="Palette-color happy-day-6">&nbsp;</div>
        <div class="Palette-color happy-day-7">&nbsp;</div>
        <div class="Palette-color happy-day-8">&nbsp;</div>
        <div class="Palette-color happy-day-9">&nbsp;</div>
    </div>
</div>

<div class="Palette Palette--stretched">
    <div class="Palette-text">Fin Du Mundo</div>
    <div class="Palette-colors">
        <div class="Palette-color fin-du-mundo-1">&nbsp;</div>
        <div class="Palette-color fin-du-mundo-2">&nbsp;</div>
        <div class="Palette-color fin-du-mundo-3">&nbsp;</div>
        <div class="Palette-color fin-du-mundo-4">&nbsp;</div>
        <div class="Palette-color fin-du-mundo-5">&nbsp;</div>
        <div class="Palette-color fin-du-mundo-6">&nbsp;</div>
        <div class="Palette-color fin-du-mundo-7">&nbsp;</div>
        <div class="Palette-color fin-du-mundo-8">&nbsp;</div>
        <div class="Palette-color fin-du-mundo-9">&nbsp;</div>
    </div>
</div>

Popover

Popover is a non-modal that can be used to display content on top of another

This is the default Popover
This is a Popover using a media object layout.
This is a Popover using a media object layout.
This is a Popover using a media object layout.
This is a Popover using a media object layout. 
<div class="Popover Popover-is-shown Popover-is-faded">
  <div class="Popover-body">
    This is the default Popover
  </div>
</div>
<div class="Popover Popover--bottom Popover-is-shown Popover-is-faded">
  <div class="Popover-body">
    <div class="mediaObject mediaObject--middle">
        <figure class="mediaObject-figure">
          <span span class="Graphic Graphic--whiteSheepWithSunglassAndShadow" title="White Sheep With Sunglass and Shadow icon"></span>
        </figure>
        <div class="mediaObject-body">
            <span>This is a Popover using a media object layout.</span>
        </div>
    </div>
  </div>
</div>
<div class="Popover Popover--top Popover-is-shown Popover-is-faded">
  <div class="Popover-body">
    <div class="mediaObject mediaObject--middle">
        <figure class="mediaObject-figure">
          <span span class="Graphic Graphic--whiteSheepWithSunglassAndShadow" title="White Sheep With Sunglass and Shadow icon"></span>
        </figure>
        <div class="mediaObject-body">
            <span>This is a Popover using a media object layout.</span>
        </div>
    </div>
  </div>
</div>
<div class="Popover Popover--left Popover-is-shown Popover-is-faded">
  <div class="Popover-body">
    <div class="mediaObject mediaObject--middle">
        <figure class="mediaObject-figure">
          <span span class="Graphic Graphic--whiteSheepWithSunglassAndShadow" title="White Sheep With Sunglass and Shadow icon"></span>
        </figure>
        <div class="mediaObject-body">
            <span>This is a Popover using a media object layout.</span>
        </div>
    </div>
  </div>
</div>
<div class="Popover Popover--right Popover-is-shown Popover-is-faded">
  <div class="Popover-body">
    <div class="mediaObject mediaObject--middle">
        <figure class="mediaObject-figure">
          <span span class="Graphic Graphic--whiteSheepWithSunglassAndShadow" title="White Sheep With Sunglass and Shadow icon"></span>
        </figure>
        <div class="mediaObject-body">
            <span>This is a Popover using a media object layout.</span>
        </div>
    </div>
  </div>
</div>

Popover on hovered

This is a Popover using a media object layout. 
<button type="button" class="Btn Btn--primary" data-popover-target="Popover1" data-popover-position="right">Hover Me</button>
<div class="Popover" data-popover="Popover1">
  <div class="Popover-body">
    <div class="mediaObject mediaObject--middle">
        <figure class="mediaObject-figure">
          <span span class="Graphic Graphic--whiteSheepWithSunglassAndShadow" title="White Sheep With Sunglass and Shadow icon"></span>
        </figure>
        <div class="mediaObject-body">
            <span>This is a Popover using a media object layout.</span>
        </div>
    </div>
  </div>
</div>

Popover by click on zone

click to open the popup on the right
click to open the popup on the top
click to open the popup on the bottom
click to open the popup on the left
click to open the popup on the right
click to open the popup on the top
click to open the popup on the bottom
click to open the popup on the left
Nr.3 This is a Popover using a media object layout.
Nr.4 This is a Popover using a media object layout.
Nr.1 This is a Popover using a media object layout.
Nr.2 This is a Popover using a media object layout. 
<div class="row row-range-12 is-margin-bottom">
    <div data-popover-target="PopoverByClick" data-popover-position="right" data-popover-zone style="height:40vh;background-color:lightcoral;" class="col-sm-3 row middle-sm center-sm is-margin-none">
        <span>click to open the popup on the <b>right</b></span>
    </div>
    <div data-popover-target="PopoverByClick" data-popover-position="top" data-popover-zone style="height:40vh;background-color:lightyellow;" class="col-sm-3 row middle-sm center-sm is-margin-none">
        <span>click to open the popup on the <b>top</b></span>
    </div>
    <div data-popover-target="PopoverByClick2" data-popover-position="bottom" data-popover-zone style="height:40vh;background-color:lightgreen;" class="col-sm-3 row middle-sm center-sm is-margin-none">
        <span>click to open the popup on the <b>bottom</b></span>
    </div>
    <div data-popover-target="PopoverByClick2" data-popover-position="left" data-popover-zone style="height:40vh;background-color:lightblue;" class="col-sm-3 row middle-sm center-sm is-margin-none">
        <span>click to open the popup on the <b>left</b></span>
    </div>
</div>
<div class="row is-scrollable" style="height:40vh;">
    <div class="is-relative content-fill" data-popover-area>
        <div style="height:120vh;width:200vw" class="is-relative row row-range-12">
            <div data-popover-target="PopoverByClick3" data-popover-position="right" data-popover-zone style="height:120vh;background-color:lightyellow;" class="col-sm-3 row middle-sm center-sm is-margin-none">
                <span>click to open the popup on the <b>right</b></span>
                <button class="Btn Btn--primary" data-popover-keep>KEEP POPOVER</button>
            </div>
            <div data-popover-target="PopoverByClick3" data-popover-position="top" data-popover-zone style="height:120vh;background-color:lightcoral;" class="col-sm-3 row middle-sm center-sm is-margin-none">
                <span>click to open the popup on the <b>top</b></span>
            </div>
            <div data-popover-target="PopoverByClick3" data-popover-position="bottom" data-popover-zone style="height:120vh;background-color:lightblue;" class="col-sm-3 row middle-sm center-sm is-margin-none">
                <span>click to open the popup on the <b>bottom</b></span>
            </div>
            <div data-popover-target="PopoverByClick4" data-popover-position="left" data-popover-zone style="height:120vh;background-color:lightgreen;" class="col-sm-3 row middle-sm center-sm is-margin-none">
                <span>click to open the popup on the <b>left</b></span>
            </div>
        </div>

        <div class="Popover" data-popover="PopoverByClick3" data-popover-dynamic>
            <div class="Popover-body">
                <div class="mediaObject mediaObject--middle">
                    <figure class="mediaObject-figure">
                        <span span class="Graphic Graphic--whiteSheepWithSunglassAndShadow" title="White Sheep With Sunglass and Shadow icon"></span>
                    </figure>
                    <div class="mediaObject-body">
                        <span>Nr.3 This is a Popover using a media object layout.</span>
                    </div>
                </div>
            </div>
         </div>
         <div class="Popover" data-popover="PopoverByClick4" data-popover-dynamic>
            <div class="Popover-body">
                <div class="mediaObject mediaObject--middle">
                    <figure class="mediaObject-figure">
                        <span span class="Graphic Graphic--whiteSheepWithSunglassAndShadow" title="White Sheep With Sunglass and Shadow icon"></span>
                    </figure>
                    <div class="mediaObject-body">
                        <span>Nr.4 This is a Popover using a media object layout.</span>
                    </div>
                </div>
            </div>
         </div>
    </div>
</div>
<div class="Popover" data-popover="PopoverByClick">
  <div class="Popover-body">
    <div class="mediaObject mediaObject--middle">
        <figure class="mediaObject-figure">
          <span span class="Graphic Graphic--whiteSheepWithSunglassAndShadow" title="White Sheep With Sunglass and Shadow icon"></span>
        </figure>
        <div class="mediaObject-body">
            <span>Nr.1 This is a Popover using a media object layout.</span>
        </div>
    </div>
  </div>
</div>
<div class="Popover" data-popover="PopoverByClick2">
  <div class="Popover-body">
    <div class="mediaObject mediaObject--middle">
        <figure class="mediaObject-figure">
            <span span class="Graphic Graphic--whiteSheepWithSunglassAndShadow" title="White Sheep With Sunglass and Shadow icon"></span>
        </figure>
        <div class="mediaObject-body">
            <span>Nr.2 This is a Popover using a media object layout.</span>
        </div>
    </div>
  </div>
</div>

SmartBlocks

Blocks are usually used for labeling

Default smartblock
Dark smartblock
Smartblock with happy color
Expanded Smart Block

Smartblocks types

Accent
Clear
Solid
Placeholder

Smartblocks types with animination on hover

Smart Blocks inside a table

Person
Status
Text
Date & Time
Rating
Tags
Number
Link
Progress
Location
Formula
Time Tracker
File
Tickets

With actions

Setting 1 Setting 2 Setting 3
Setting 4
Sub Setting 1 Sub Setting 2 Sub Setting 3 
<div class="section">
<div class="row">
  <div class="col-sm-2">
    <div class="Block">
        <span class="Block-text">Default smartblock</span>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="Block" style="--block-fill-color: var(--color-mono-700)">
        <span class="Block-text">Dark smartblock</span>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="Block" style="--block-fill-color: var(--color-happy-day-2)">
        <span class="Block-text">Smartblock with happy color</span>
    </div>
  </div>
</div>
</div>
<div class="section">
<div class="row">
  <div class="col-sm-6">
    <div class="Block Block--expanded" style="--block-fill-color: var(--color-happy-day-3)">
        <span class="Block-text">Expanded Smart Block</span>
    </div>
  </div>
</div>
</div>

<h3>Smartblocks types</h3>
<div class="section">
<div class="row">
  <div class="col-sm-1">
    <div class="Block Block--expanded Block--accent" style="--block-fill-color: var(--color-happy-day-3)">
        <span class="Block-text">Accent</span>
    </div>
  </div>
  <div class="col-sm-1">
    <div class="Block Block--expanded Block--clear" style="--block-fill-color: var(--color-happy-day-7)">
        <span class="Block-text">Clear</span>
    </div>
  </div>
  <div class="col-sm-1">
    <div class="Block Block--expanded" style="--block-fill-color: var(--color-happy-day-4)">
        <span class="Block-text">Solid</span>
    </div>
  </div>
  <div class="col-sm-1">
    <div class="Block Block--expanded Block--placeholder">
        <span class="Block-text">Placeholder</span>
    </div>
  </div>
</div>
</div>

<h3>Smartblocks types with animination on hover</h3>
<div class="section">
<div class="row">
  <div class="col-sm-1">
    <div class="Block-is-hoverable Block Block--expanded Block--clear" style="--block-fill-color: var(--color-happy-day-2)">
      <button class="Block-dragHandle">
        <svg class="Icon" title="drag indicator icon" role="img">
          <use xlink:href="#dragIndicator"></use>
        </svg>
      </button>
      <div class="Input Input--transparent Input--xs">
          <input type="text" class="text-center is-ellipsed" placeholder="Progress"/>
      </div>
      <button class="Block-settings">
        <svg class="Icon Icon--xxs" title="gear icon" role="img">
          <use xlink:href="#gear"></use>
        </svg>
      </button>
    </div>
  </div>
</div>
</div>

<h3>Smart Blocks inside a table</h3>
<table class="Table Table--spaced">
  <tr>
    <td>
      <div class="Block Block--expanded" style="--block-fill-color: var(--color-happy-day-1)">
          Person
      </div>
    </td>
    <td>
      <div class="Block Block--expanded" style="--block-fill-color: var(--color-happy-day-2)">
          Status
      </div>
    </td>
    <td>
      <div class="Block Block--expanded" style="--block-fill-color: var(--color-happy-day-3)">
          Text
      </div>
    </td>
    <td>
      <div class="Block Block--expanded" style="--block-fill-color: var(--color-happy-day-4)">
          Date & Time
      </div>
    </td>
    <td>
      <div class="Block Block--expanded" style="--block-fill-color: var(--color-happy-day-5)">
          Rating
      </div>
    </td>
    <td>
      <div class="Block Block--expanded" style="--block-fill-color: var(--color-happy-day-9)">
          Tags
      </div>
    </td>
    <td>
      <div class="Block Block--expanded" style="--block-fill-color: var(--color-happy-day-7)">
          Number
      </div>
    </tr>
    <td>
      <div class="Block Block--expanded" style="--block-fill-color: var(--color-happy-day-1)">
          Link
      </div>
    </td>
    <td>
      <div class="Block Block--expanded" style="--block-fill-color: var(--color-happy-day-2)">
          Progress
      </div>
    </td>
    <td>
      <div class="Block Block--expanded" style="--block-fill-color: var(--color-happy-day-5)">
          Location
      </div>
    </td>
    <td>
      <div class="Block Block--expanded" style="--block-fill-color: var(--color-happy-day-4)">
          Formula
      </div>
    </td>
    <td>
      <div class="Block Block--expanded" style="--block-fill-color: var(--color-happy-day-5)">
          Time Tracker
      </div>
    </td>
    <td>
      <div class="Block Block--expanded" style="--block-fill-color: var(--color-happy-day-6)">
          File
      </div>
    </td>
    <td>
      <div class="Block Block--expanded" style="--block-fill-color: var(--color-happy-day-6)">
          Tickets
      </div>
    </td>
  </tr>
</table>

<h3>With actions</h3>

<div class="section">
<div class="row">
  <div class="col-sm-1">
    <div class="Block Block--expanded Block--action" style="--block-fill-color: var(--color-happy-day-1)">
      <button class="Block-dragHandle">
        <svg class="Icon" title="drag indicator icon" role="img">
          <use xlink:href="#dragIndicator"></use>
        </svg>
      </button>
      <div class="Input Input--transparent Input--xs">
          <input type="text" class="text-center is-ellipsed" placeholder="Progress"/>
      </div>
      <button class="Block-settings">
        <svg class="Icon Icon--xxs" title="gear icon" role="img">
          <use xlink:href="#gear"></use>
        </svg>
      </button>
    </div>
  </div>
  <div class="col-sm-1">
    <div class="Block Block--expanded Block--action" style="--block-fill-color: var(--color-happy-day-2)">
      <button class="Block-dragHandle">
        <svg class="Icon" title="drag indicator icon" role="img">
          <use xlink:href="#dragIndicator"></use>
        </svg>
      </button>
      <div class="Input Input--transparent Input--xs">
          <input type="text" class="text-center is-ellipsed" placeholder="Progress with Dropdown Settings"/>
      </div>
      <div class="Drop Block-settings">
        <button class="Block-settings Drop-toggle">
          <svg class="Icon Icon--xxs" title="gear icon" role="img">
            <use xlink:href="#gear"></use>
          </svg>
        </button>
        <div class="Drop-menu" data-drop-menu>
          <a class="Drop-item" href="#">Setting 1</a>
          <a class="Drop-item" href="#">Setting 2</a>
          <a class="Drop-item" href="#">Setting 3</a>
          <div class="Drop-item Drop-parent">
            <span>Setting 4</span>
            <svg class="Icon Icon--xxs Drop-caret" title="gear icon" role="img">
              <use xlink:href="#arrowRightOutlined"></use>
            </svg>
            <div class="Drop-menu">
              <a class="Drop-item" href="#">Sub Setting 1</a>
              <a class="Drop-item" href="#">Sub Setting 2</a>
              <a class="Drop-item" href="#">Sub Setting 3</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

Spinner

<span class="Spinner"></span>
<span class="Spinner Spinner--lg"></span>
<span class="Spinner Spinner--xl"></span>
<span class="Spinner Spinner--xxl"></span>
<span class="Spinner Spinner--xxxl"></span>
<span class="Spinner Spinner--xxxxl"></span>

Table

Col-1 Col-2 Col-3
col-1 row-1 col-2 row-1 col-3 row-1
col-1 row-2 col-2 row-2 col-3 row-2
col-1 row-3 col-2 row-3 col-3 row-3
Col-1 Col-2 Col-3
col-1 row-1 col-2 row-1 col-3 row-1
col-1 row-2 col-2 row-2 col-3 row-2
col-1 row-3 col-2 row-3 col-3 row-3
Col-1 Col-2 Col-3 Col-4 Col-5 Col-6 Col-7
First Second Third Fourth Fifth Sixth Seventh
Col-1 Col-2 Col-3 Col-4 Col-5 Col-6 Col-7 Col-8
First Second Third Fourth Fifth Sixth Seventh Eighth 
<div class="section">
    <table class="Table">
        <thead>
            <tr>
                <th>Col-1</th>
                <th>Col-2</th>
                <th>Col-3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>col-1 row-1</td>
                <td>col-2 row-1</td>
                <td>col-3 row-1</td>
            </tr>
            <tr>
                <td>col-1 row-2</td>
                <td>col-2 row-2</td>
                <td>col-3 row-2</td>
            </tr>
            <tr>
                <td>col-1 row-3</td>
                <td>col-2 row-3</td>
                <td>col-3 row-3</td>
            </tr>
        </tbody>
    </table>
</div>

<div class="section">
    <table class="Table Table--striped">
        <thead>
            <tr>
                <th>Col-1</th>
                <th>Col-2</th>
                <th>Col-3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>col-1 row-1</td>
                <td>col-2 row-1</td>
                <td>col-3 row-1</td>
            </tr>
            <tr>
                <td>col-1 row-2</td>
                <td>col-2 row-2</td>
                <td>col-3 row-2</td>
            </tr>
            <tr>
                <td>col-1 row-3</td>
                <td>col-2 row-3</td>
                <td>col-3 row-3</td>
            </tr>
        </tbody>
    </table>
</div>

<div class="section">
    <table class="Table Table--spaced">
        <thead>
            <tr>
                <th>Col-1</th>
                <th>Col-2</th>
                <th>Col-3</th>
                <th>Col-4</th>
                <th>Col-5</th>
                <th>Col-6</th>
                <th>Col-7</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
                <td>Fifth</td>
                <td>Sixth</td>
                <td>Seventh</td>
            <tr>
        </tbody>
    </table>
</div>

<div class="section">
    <table class="Table Table--spacedXs">
        <thead>
            <tr>
                <th>Col-1</th>
                <th>Col-2</th>
                <th>Col-3</th>
                <th>Col-4</th>
                <th>Col-5</th>
                <th>Col-6</th>
                <th>Col-7</th>
                <th>Col-8</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
                <td>Fifth</td>
                <td>Sixth</td>
                <td>Seventh</td>
                <td>Eighth</td>
            <tr>
        </tbody>
    </table>
</div>

Table Variants

Col-1 Col-2 Col-3
col-1 row-1 col-2 row-1 col-3 row-1
col-1 row-2 col-2 row-2 col-3 row-2
col-1 row-3 col-2 row-3 col-3 row-3
Col-1 Col-2 Col-3
col-1 row-1 col-2 row-1 col-3 row-1
col-1 row-2 col-2 row-2 col-3 row-2
col-1 row-3 col-2 row-3 col-3 row-3
Col-1 Col-2 Col-3
col-1 row-1 col-2 row-1 col-3 row-1
col-1 row-2 col-2 row-2 col-3 row-2
col-1 row-3 col-2 row-3 col-3 row-3
Col-1 Col-2 Col-3
col-1 row-1 col-2 row-1 col-3 row-1
col-1 row-2 col-2 row-2 col-3 row-2
col-1 row-3 col-2 row-3 col-3 row-3
Col-1 Col-2 Col-3
col-1 row-1 col-2 row-1 col-3 row-1
col-1 row-2 col-2 row-2 col-3 row-2
col-1 row-3 col-2 row-3 col-3 row-3 
<div class="section">
  <table class="Table Table--primary Table--striped">
    <thead>
      <tr>
        <th>Col-1</th>
        <th>Col-2</th>
        <th>Col-3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>col-1 row-1</td>
        <td>col-2 row-1</td>
        <td>col-3 row-1</td>
      </tr>
      <tr>
        <td>col-1 row-2</td>
        <td>col-2 row-2</td>
        <td>col-3 row-2</td>
      </tr>
      <tr>
        <td>col-1 row-3</td>
        <td>col-2 row-3</td>
        <td>col-3 row-3</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="section">
    <table class="Table Table--secondary Table--striped">
        <thead>
            <tr>
                <th>Col-1</th>
                <th>Col-2</th>
                <th>Col-3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>col-1 row-1</td>
                <td>col-2 row-1</td>
                <td>col-3 row-1</td>
            </tr>
            <tr>
                <td>col-1 row-2</td>
                <td>col-2 row-2</td>
                <td>col-3 row-2</td>
            </tr>
            <tr>
                <td>col-1 row-3</td>
                <td>col-2 row-3</td>
                <td>col-3 row-3</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="section">
    <table class="Table Table--success Table--striped">
        <thead>
            <tr>
                <th>Col-1</th>
                <th>Col-2</th>
                <th>Col-3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>col-1 row-1</td>
                <td>col-2 row-1</td>
                <td>col-3 row-1</td>
            </tr>
            <tr>
                <td>col-1 row-2</td>
                <td>col-2 row-2</td>
                <td>col-3 row-2</td>
            </tr>
            <tr>
                <td>col-1 row-3</td>
                <td>col-2 row-3</td>
                <td>col-3 row-3</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="section">
    <table class="Table Table--dark Table--striped">
        <thead>
            <tr>
                <th>Col-1</th>
                <th>Col-2</th>
                <th>Col-3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>col-1 row-1</td>
                <td>col-2 row-1</td>
                <td>col-3 row-1</td>
            </tr>
            <tr>
                <td>col-1 row-2</td>
                <td>col-2 row-2</td>
                <td>col-3 row-2</td>
            </tr>
            <tr>
                <td>col-1 row-3</td>
                <td>col-2 row-3</td>
                <td>col-3 row-3</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="section">
    <table class="Table Table--light">
        <thead>
            <tr>
                <th>Col-1</th>
                <th>Col-2</th>
                <th>Col-3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>col-1 row-1</td>
                <td>col-2 row-1</td>
                <td>col-3 row-1</td>
            </tr>
            <tr>
                <td>col-1 row-2</td>
                <td>col-2 row-2</td>
                <td>col-3 row-2</td>
            </tr>
            <tr>
                <td>col-1 row-3</td>
                <td>col-2 row-3</td>
                <td>col-3 row-3</td>
            </tr>
        </tbody>
    </table>
</div>

Resizable Table

Col-1 Col-2 Col-3
col-1 row-1 col-2 row-1 col-3 row-1
col-1 row-2 col-2 row-2 col-3 row-2
col-1 row-3 col-2 row-3 col-3 row-3 
<div class="section is-scrollable-x">
    <table class="Table Table--striped" data-table data-table-resizable>
        <thead>
            <tr>
                <th>Col-1</th>
                <th>Col-2</th>
                <th>Col-3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>col-1 row-1</td>
                <td>col-2 row-1</td>
                <td>col-3 row-1</td>
            </tr>
            <tr>
                <td>col-1 row-2</td>
                <td>col-2 row-2</td>
                <td>col-3 row-2</td>
            </tr>
            <tr>
                <td>col-1 row-3</td>
                <td>col-2 row-3</td>
                <td>col-3 row-3</td>
            </tr>
        </tbody>
    </table>
</div>

Table with collapsible rows

Col-2 Col-3 Col-4
col-2 row-1 col-3 row-1 col-4 row-1
Nulla sodales integer efficitur morbi libero, in non odio. Efficitur interdum ipsum ornare ornare amet nunc augue platea vitae.
col-2 row-2 col-3 row-2 col-4 row-2
Malesuada consectetur libero, non nunc lacinia ornare in ex. Mattis in dui elit. Arcu morbi imperdiet velit nisi sit et consectetur molestie in odio.
col-2 row-3 col-3 row-3 col-4 row-3
Et sodales odio. Arcu orci, velit imperdiet eleifend amet, mauris est. Morbi lectus sapien leo, vel accumsan dictum vel vulputate pulvinar quam,
col-2 row-4 col-3 row-4 col-4 row-4
Amet, cras quis, nunc non mattis faucibus. Dictum. Sed molestie ultricies. In vitae augu. 
<div class="section is-scrollable-x">
    <table class="Table Table--collapsible Table--borderless" data-table data-table-resizable>
        <col style="width:10%">
        <thead>
            <tr>
                <th></th>
                <th>Col-2</th>
                <th>Col-3</th>
                <th>Col-4</th>
            </tr>
        </thead>
        <tbody>
            <tr data-accordion-header="">
                <td>
                    <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                        <use xlink:href="#arrowRightSolid"></use>
                    </svg>
                    <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                        <use xlink:href="#arrowUpSolid"></use>
                    </svg>
                </td>
                <td>col-2 row-1</td>
                <td>col-3 row-1</td>
                <td>col-4 row-1</td>
            </tr>
            <tr class="is-slide-closed">
                <td colspan="4" class="Accordion-bottom">
                    Nulla sodales integer efficitur morbi libero, in non odio. Efficitur interdum ipsum ornare ornare amet nunc augue platea vitae.
                </td>
            </tr>
            <tr data-accordion-header="">
                <td>
                    <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                        <use xlink:href="#arrowRightSolid"></use>
                    </svg>
                    <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                        <use xlink:href="#arrowUpSolid"></use>
                    </svg>
                </td>
                <td>col-2 row-2</td>
                <td>col-3 row-2</td>
                <td>col-4 row-2</td>
            </tr>
            <tr class="is-slide-closed">
                <td colspan="4" class="Accordion-bottom">
                    Malesuada consectetur libero, non nunc lacinia ornare in ex. Mattis in dui elit. Arcu morbi imperdiet velit nisi sit et consectetur molestie in odio.
                </td>
            </tr>
            <tr data-accordion-header="">
                <td>
                    <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                        <use xlink:href="#arrowRightSolid"></use>
                    </svg>
                    <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                        <use xlink:href="#arrowUpSolid"></use>
                    </svg>
                </td>
                <td>col-2 row-3</td>
                <td>col-3 row-3</td>
                <td>col-4 row-3</td>
            </tr>
            <tr class="is-slide-closed">
                <td colspan="4" class="Accordion-bottom">
                    Et sodales odio. Arcu orci, velit imperdiet eleifend amet, mauris est. Morbi lectus sapien leo, vel accumsan dictum vel vulputate pulvinar quam,
                </td>
            </tr>
            <tr data-accordion-header="">
                <td>
                    <svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
                        <use xlink:href="#arrowRightSolid"></use>
                    </svg>
                    <svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
                        <use xlink:href="#arrowUpSolid"></use>
                    </svg>
                </td>
                <td>col-2 row-4</td>
                <td>col-3 row-4</td>
                <td>col-4 row-4</td>
            </tr>
            <tr class="is-slide-closed">
                <td colspan="4" class="Accordion-bottom">
                    Amet, cras quis, nunc non mattis faucibus. Dictum. Sed molestie ultricies. In vitae augu.
                </td>
            </tr>
        </tbody>
    </table>
</div>

Table with sticky header

Col-1 Col-2 Col-3
col-1 row-1 col-2 row-1 col-3 row-1
col-1 row-2 col-2 row-2 col-3 row-2
col-1 row-3 col-2 row-3 col-3 row-3
col-1 row-4 col-2 row-4 col-3 row-4
col-1 row-5 col-2 row-5 col-3 row-5
col-1 row-6 col-2 row-6 col-3 row-6
col-1 row-7 col-2 row-7 col-3 row-7
col-1 row-8 col-2 row-8 col-3 row-8
col-1 row-9 col-2 row-9 col-3 row-9 
<div class="section is-scrollable-y" data-table-scroller style="height:9.5rem">
    <table class="Table Table--striped" data-table data-table-sticky-head>
        <thead>
            <tr>
                <th>Col-1</th>
                <th>Col-2</th>
                <th>Col-3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>col-1 row-1</td>
                <td>col-2 row-1</td>
                <td>col-3 row-1</td>
            </tr>
            <tr>
                <td>col-1 row-2</td>
                <td>col-2 row-2</td>
                <td>col-3 row-2</td>
            </tr>
            <tr>
                <td>col-1 row-3</td>
                <td>col-2 row-3</td>
                <td>col-3 row-3</td>
            </tr>
            <tr>
                <td>col-1 row-4</td>
                <td>col-2 row-4</td>
                <td>col-3 row-4</td>
            </tr>
            <tr>
                <td>col-1 row-5</td>
                <td>col-2 row-5</td>
                <td>col-3 row-5</td>
            </tr>
            <tr>
                <td>col-1 row-6</td>
                <td>col-2 row-6</td>
                <td>col-3 row-6</td>
            </tr>
            <tr>
                <td>col-1 row-7</td>
                <td>col-2 row-7</td>
                <td>col-3 row-7</td>
            </tr>
            <tr>
                <td>col-1 row-8</td>
                <td>col-2 row-8</td>
                <td>col-3 row-8</td>
            </tr>
            <tr>
                <td>col-1 row-9</td>
                <td>col-2 row-9</td>
                <td>col-3 row-9</td>
            </tr>
        </tbody>
    </table>
</div>

Table with sticky column

Col-1 Col-2 Col-3 Col-4 Col-5
col-1 row-1 col-2 row-1 col-3 row-1 col-4 row-1 col-5 row-1
col-1 row-2 col-2 row-2 col-3 row-2 col-4 row-2 col-5 row-2
col-1 row-3 col-2 row-3 col-3 row-3 col-4 row-3 col-5 row-3 
<div class="section is-scrollable-x" data-table-scroller>
    <table class="Table Table--striped" data-table data-table-resizable>
        <thead>
            <tr>
                <th class="Table-is-sticky">Col-1</th>
                <th>Col-2</th>
                <th>Col-3</th>
                <th>Col-4</th>
                <th>Col-5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="Table-is-sticky">col-1 row-1</td>
                <td>col-2 row-1</td>
                <td>col-3 row-1</td>
                <td>col-4 row-1</td>
                <td>col-5 row-1</td>
            </tr>
            <tr>
                <td class="Table-is-sticky">col-1 row-2</td>
                <td>col-2 row-2</td>
                <td>col-3 row-2</td>
                <td>col-4 row-2</td>
                <td>col-5 row-2</td>
            </tr>
            <tr>
                <td class="Table-is-sticky">col-1 row-3</td>
                <td>col-2 row-3</td>
                <td>col-3 row-3</td>
                <td>col-4 row-3</td>
                <td>col-5 row-3</td>
            </tr>
        </tbody>
    </table>
</div>

Toast

Toasts are lightweight notifications designed to show small messages that appears temporarily to communicate some information.

<div class="Toast Toast-is-shown Toast-is-faded" data-toast role="alert">
  <div class="Toast-header">
    <button class="IconBtn Modal-close" data-toast-dismiss>
        <svg class="Icon Icon--lg" title="close icon" role="img">
            <use xlink:href="#close"></use>
        </svg>
    </button>
  </div>
  <div class="Toast-body">
    This is the default Toast
  </div>
</div>
<div class="Toast Toast-is-shown Toast-is-faded" data-toast role="alert">
  <div class="Toast-header">
    <button class="IconBtn Modal-close" data-toast-dismiss>
        <svg class="Icon Icon--lg" title="close icon" role="img">
            <use xlink:href="#close"></use>
        </svg>
    </button>
  </div>
  <div class="Toast-body">
    <div class="mediaObject mediaObject--middle">
        <figure class="mediaObject-figure">
          <span span class="Graphic Graphic--whiteSheepWithSunglassAndShadow" title="White Sheep With Sunglass and Shadow icon"></span>
        </figure>
        <div class="mediaObject-body">
            <span>This is a Toast using a media object layout.</span>
        </div>
    </div>
  </div>
</div>

Stacking Toast with Placement

This the third Toast that is going to stack and does not hide automatically unless you dismiss it
This the second Toast that is going to stack
This the first Toast that is going to stack 
<button class="Btn Btn--primary" data-toast-target="Toast1">Click me to show the first Toast</button>
<button class="Btn Btn--primary" data-toast-target="Toast2">Click me to show the second Toast</button>
<button class="Btn Btn--primary" data-toast-target="Toast3">Click me to show the third Toast</button>
<div class="Toast-container">
  <div class="Toast" data-toast data-toast-id="Toast3" data-toast-autohide="false">
    <div class="Toast-header">
      <button class="IconBtn Modal-close" data-dismiss-toast>
          <svg class="Icon Icon--lg" title="close icon" role="img">
              <use xlink:href="#close"></use>
          </svg>
      </button>
    </div>
    <div class="Toast-body">
      <div class="mediaObject mediaObject--middle">
          <figure class="mediaObject-figure">
            <span span class="Graphic Graphic--whiteSheepWithSunglassAndShadow" title="White Sheep With Sunglass and Shadow icon"></span>
          </figure>
          <div class="mediaObject-body">
              <span>This the third Toast that is going to stack and does not hide automatically unless you dismiss it</span>
          </div>
      </div>
    </div>
  </div>
  <div class="Toast" data-toast data-toast-id="Toast2" data-toast-autohide>
    <div class="Toast-header">
      <button class="IconBtn Modal-close" data-dismiss-toast>
          <svg class="Icon Icon--lg" title="close icon" role="img">
              <use xlink:href="#close"></use>
          </svg>
      </button>
    </div>
    <div class="Toast-body">
      <div class="mediaObject mediaObject--middle">
          <figure class="mediaObject-figure">
            <span span class="Graphic Graphic--whiteSheepWithSunglassAndShadow" title="White Sheep With Sunglass and Shadow icon"></span>
          </figure>
          <div class="mediaObject-body">
              <span>This the second Toast that is going to stack</span>
          </div>
      </div>
    </div>
  </div>
  <div class="Toast" data-toast data-toast-id="Toast1">
    <div class="Toast-header">
      <button class="IconBtn" data-dismiss-toast>
          <svg class="Icon Icon--lg" title="close icon" role="img">
              <use xlink:href="#close"></use>
          </svg>
      </button>
    </div>
    <div class="Toast-body">
      <div class="mediaObject mediaObject--middle">
          <figure class="mediaObject-figure">
              <span class="Graphic Graphic--welcomeSheepWithShadow" title="Welcome Sheep With Shadow icon"></span>
          </figure>
          <div class="mediaObject-body">
              <span>This the first Toast that is going to stack</span>
          </div>
      </div>
    </div>
  </div>
</div>