<!-- components / button -->
<h2 class="h3 margin-bottom-1">
    Button
</h2>
<hr class="marginless margin-bottom-2" />

<h3 class="h4">SCSS:</h3>
<pre class="code margin-top-1"><code>$crispy__button__font-family: $crispy__font-family;
$crispy__button__font-weight: $crispy__font-weight;
$crispy__button__font-size: $crispy__font-size;
$crispy__button__font-size-breakpoints: $crispy__font-size-breakpoints;

$crispy__button__padding: 0.4em 0.8em;
$crispy__button__padding-breakpoints: (
    $crispy__md: 0.6em 1.2em
);

$crispy__button__margin: $crispy__margin;
$crispy__button__margin-breakpoints: $crispy__margin-breakpoints;
</code></pre>

<h3 class="h4">Html:</h3>
<pre class="code margin-top-1"><code>&lt;button class=&quot;button&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;button text-size-medium&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;button text-size-large&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;button width-100&quot;&gt;&lt;/button&gt;</code></pre>

<button class="button">Default</button>
<button class="button text-size-medium">Default</button>
<button class="button text-size-large">Default</button>
<button class="button width-100">Info</button>
<button class="button">
    <svg class="icon icon-color-danger" aria-hidden="true">
        <use xlink:href="symbol-defs.svg#icon-flask"></use>
    </svg>
</button>
<button class="button">
    <svg class="icon icon-color-danger" aria-hidden="true">
        <use xlink:href="symbol-defs.svg#icon-flask"></use>
    </svg>
    Button
</button>


<!-- components / code -->
<h2 class="h3 margin-top-3 margin-bottom-1">
    Code
</h2>
<hr class="marginless margin-bottom-2" />

<h3 class="h4">SCSS:</h3>
<pre class="code margin-top-1"><code>$crispy__code__border: $crispy__border;
$crispy__code__background-color: $crispy__color-grey-light;

$crispy__code__padding: $crispy__padding;
$crispy__code__padding-breakpoints: $crispy__padding-breakpoints;

$crispy__code__margin: $crispy__margin;
$crispy__code__margin-breakpoints: $crispy__margin-breakpoints;
</code></pre>
<h3 class="h4">Html:</h3>
<pre class="code margin-top-1"><code>&lt;pre class=&quot;code&quot;&gt;
    &lt;code&gt;&lt;/code&gt;
&lt;/pre&gt;
</code></pre>


<!-- components / fields -->
<h2 class="h3 margin-top-3">
    Fields
</h2>
<h3 class="h4 magin-top-2">SCSS:</h3>
<pre class="code margin-top-1"><code>$crispy__field__margin: $crispy__margin;
$crispy__field__border: $crispy__border;

$crispy__field__color--valid: $crispy__color-success;
$crispy__field__color--error: $crispy__color-danger;

$crispy__field__border-color--focus: $crispy__color-primary;
$crispy__field__border-color--valid: $crispy__color-success;
$crispy__field__border-color--error: $crispy__color-danger;

$crispy__field__choice__checked__color: $crispy__color-success;
$crispy__field__choice__unchecked__color: $crispy__color-danger;

$crispy__field__input__padding: 0.4em 0.6em;
$crispy__field__input__color: $crispy__color-text;

$crispy__field__select__padding: 0.3em 0.5em;
$crispy__field__panel__padding: 0.3em 0.6em;

$crispy__field__select__background-color: white;
$crispy__field__select__border: $crispy__border;</code></pre>

<!-- components / field / input textarea -->
<h3 class="h4 margin-top-2">
    Input / Textarea
</h3>
<pre class="code margin-top-1"><code>&lt;div class=&quot;field&quot;&gt;
    &lt;input class=&quot;field__text&quot; type=&quot;text&quot; /&gt;
&lt;/div&gt;
&lt;div class=&quot;field field--valid&quot;&gt;
    &lt;label class=&quot;field__label&quot;&gt;
        Text
        &lt;input type=&quot;text&quot; class=&quot;field__text&quot; /&gt;
    &lt;/label&gt;
    &lt;div class=&quot;field__panel&quot;&gt;
        error item 1
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;field field--error&quot;&gt;
    &lt;label class=&quot;field__label&quot;&gt;
        Text
        &lt;input type=&quot;text&quot; class=&quot;field__text&quot; /&gt;
    &lt;/label&gt;
    &lt;div class=&quot;field__panel&quot;&gt;
        error item 1
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;field&quot;&gt;
    &lt;label class=&quot;field__label&quot;&gt;
        Textarea
        &lt;textarea class=&quot;field__text&quot;&gt;&lt;/textarea&gt;
    &lt;/label&gt;
&lt;/div&gt;</code></pre>

<div class="field">
    <input class="field__text" type="text" />
</div>
<div class="field field--valid">
    <label class="field__label">
        Text
        <input type="text" class="field__text" />
    </label>
    <div class="field__panel">
        error item 1
    </div>
</div>
<div class="field field--error">
    <label class="field__label">
        Text
        <input type="text" class="field__text" />
    </label>
    <div class="field__panel">
        error item 1
    </div>
</div>
<div class="field">
    <label class="field__label">
        Textarea
        <textarea class="field__text"></textarea>
    </label>
</div>


<!-- components / field / Choice -->
<h3 class="h4 margin-top-2">
    Checkbox
</h3>
<pre class="code margin-top-1"><code>&lt;div class=&quot;field&quot;&gt;
    &lt;input id=&quot;field__checkbox__1&quot; class=&quot;field__choice&quot; type=&quot;checkbox&quot; name=&quot;field__checkbox__1&quot; value=&quot;true&quot; /&gt;
    &lt;label for=&quot;field__checkbox__1&quot; class=&quot;field__label&quot;&gt;
        &lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
            &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
        &lt;/svg&gt;
        &lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
            &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot;&gt;&lt;/use&gt;
        &lt;/svg&gt;
        checkbox 1
    &lt;/label&gt;
    &lt;input id=&quot;field__checkbox__2&quot; class=&quot;field__choice&quot; type=&quot;checkbox&quot; name=&quot;field__checkbox__2&quot; value=&quot;true&quot; /&gt;
    &lt;label for=&quot;field__checkbox__2&quot; class=&quot;field__label&quot;&gt;
        &lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
            &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
        &lt;/svg&gt;
        &lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
            &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot;&gt;&lt;/use&gt;
        &lt;/svg&gt;
        checkbox 2
    &lt;/label&gt;
&lt;/div&gt;</code></pre>

<div class="field">
    <input id="field__checkbox__1" class="field__choice" type="checkbox" name="field__checkbox__1" value="true" />
    <label for="field__checkbox__1" class="field__label">
        <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
        </svg>
        <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-right"></use>
        </svg>
        checkbox 1
    </label>
    <input id="field__checkbox__2" class="field__choice" type="checkbox" name="field__checkbox__2" value="true" />
    <label for="field__checkbox__2" class="field__label">
        <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
        </svg>
        <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-right"></use>
        </svg>
        checkbox 2
    </label>
</div>
<div class="field field--error">
    <input id="field__checkbox__3" class="field__choice" type="checkbox" name="field__checkbox__3" value="true" />
    <label for="field__checkbox__3" class="field__label">
        <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
        </svg>
        <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-right"></use>
        </svg>
        checkbox 1
    </label>
    <div class="field__panel">
        error item 1
    </div>
</div>


<!-- components / field / radio -->
<h3 class="h4 margin-top-2">
    Radio
</h3>
<pre class="code margin-top-1"><code>&lt;div class=&quot;field&quot;&gt;
    &lt;input id=&quot;field__radio__1&quot; class=&quot;field__choice&quot; type=&quot;radio&quot; name=&quot;field__radio__1[]&quot; value=&quot;true&quot; /&gt;
    &lt;label for=&quot;field__radio__1&quot; class=&quot;field__label&quot;&gt;
        &lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
            &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
        &lt;/svg&gt;
        &lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
            &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot; /&gt;
        &lt;/svg&gt;
        radio item 1
    &lt;/label&gt;&lt;br /&gt;
    &lt;input id=&quot;field__radio__2&quot; class=&quot;field__choice&quot; type=&quot;radio&quot; name=&quot;field__radio__1[]&quot; value=&quot;true&quot; /&gt;
    &lt;label for=&quot;field__radio__2&quot; class=&quot;field__label&quot;&gt;
        &lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
            &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
        &lt;/svg&gt;
        &lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
            &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot; /&gt;
        &lt;/svg&gt;
        radio item 2
    &lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;field field--error&quot;&gt;
    &lt;input id=&quot;field__radio__3&quot; class=&quot;field__choice&quot; type=&quot;radio&quot; name=&quot;field__radio__2[]&quot; value=&quot;true&quot; /&gt;
    &lt;label for=&quot;field__radio__3&quot; class=&quot;field__label&quot;&gt;
        &lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
            &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
        &lt;/svg&gt;
        &lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
            &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot; /&gt;
        &lt;/svg&gt;
        radio item 1
    &lt;/label&gt;&lt;br /&gt;
    &lt;input id=&quot;field__radio__4&quot; class=&quot;field__choice&quot; type=&quot;radio&quot; name=&quot;field__radio__2[]&quot; value=&quot;true&quot; /&gt;
    &lt;label for=&quot;field__radio__4&quot; class=&quot;field__label&quot;&gt;
        &lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
            &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
        &lt;/svg&gt;
        &lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
            &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot; /&gt;
        &lt;/svg&gt;
        radio item 2
    &lt;/label&gt;
    &lt;div class=&quot;field__panel&quot;&gt;
        error item 1
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
<div class="field">
    <input id="field__radio__1" class="field__choice" type="radio" name="field__radio__1[]" value="true" />
    <label for="field__radio__1" class="field__label">
        <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
        </svg>
        <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-right" />
        </svg>
        radio item 1
    </label><br />
    <input id="field__radio__2" class="field__choice" type="radio" name="field__radio__1[]" value="true" />
    <label for="field__radio__2" class="field__label">
        <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
        </svg>
        <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-right" />
        </svg>
        radio item 2
    </label>
</div>
<div class="field field--error">
    <input id="field__radio__3" class="field__choice" type="radio" name="field__radio__2[]" value="true" />
    <label for="field__radio__3" class="field__label">
        <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
        </svg>
        <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-right" />
        </svg>
        radio item 1
    </label><br />
    <input id="field__radio__4" class="field__choice" type="radio" name="field__radio__2[]" value="true" />
    <label for="field__radio__4" class="field__label">
        <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
        </svg>
        <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-right" />
        </svg>
        radio item 2
    </label>
    <div class="field__panel">
        error item 1
    </div>
</div>


<!-- components / field / select -->
<h3 class="h4 margin-top-2">
    Select
</h3>
<pre class="code margin-top-1"><code>&lt;div class=&quot;field&quot;&gt;
    &lt;label class=&quot;field__label&quot;&gt;
        Select Item
        &lt;select class=&quot;field__select&quot;&gt;
            &lt;option&gt;select item 1&lt;/option&gt;
            &lt;option&gt;select item 2&lt;/option&gt;
            &lt;option&gt;select item 3&lt;/option&gt;
        &lt;/select&gt;
    &lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;field field--error&quot;&gt;
    &lt;label class=&quot;field__label&quot;&gt;
        Select Item
        &lt;select class=&quot;field__select&quot;&gt;
            &lt;option&gt;select item 1&lt;/option&gt;
            &lt;option&gt;select item 2&lt;/option&gt;
            &lt;option&gt;select item 3&lt;/option&gt;
        &lt;/select&gt;
        &lt;div class=&quot;field__panel&quot;&gt;
            error item 1
        &lt;/div&gt;
    &lt;/label&gt;
&lt;/div&gt;</code></pre>
<div class="field">
    <label class="field__label">
        Select Item
        <select class="field__select">
            <option>select item 1</option>
            <option>select item 2</option>
            <option>select item 3</option>
        </select>
    </label>
</div>
<div class="field field--error">
    <label class="field__label">
        Select Item
        <select class="field__select">
            <option>select item 1</option>
            <option>select item 2</option>
            <option>select item 3</option>
        </select>
        <div class="field__panel">
            error item 1
        </div>
    </label>
</div>


<!-- components / group -->
<h2 class="h3 margin-top-3">
    Group
</h2>

<h3 class="h4">SCSS:</h3>
<pre class="code"><code>$crispy__group__margin: 0 0.5em 0 !default;
$crispy__group__character: '/' !default;</code></pre>

<h3 class="h4">Html:</h3>
<pre class="code"><code>&lt;nav&gt;
    &lt;ul class=&quot;group group--hr&quot;&gt;
        &lt;li class=&quot;group__item&quot;&gt;first item&lt;/li&gt;
        &lt;li class=&quot;group__item&quot;&gt;second item&lt;/li&gt;
        &lt;li class=&quot;group__item&quot;&gt;third item&lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;</code></pre>

<div class="panel panel__inner margin-bottom-2">
    <nav>
        <ul class="group group--hr">
            <li class="group__item">first item</li>
            <li class="group__item">second item</li>
            <li class="group__item">third item</li>
        </ul>
    </nav>
</div>
<div class="panel panel__inner">
    <nav>
        <ul class="group">
            <li class="group__item">
                <button class="button marginless">Button</button>
            </li>
            <li class="group__item">
                <button class="button marginless">Button</button>
            </li>
            <li class="group__item">
                <button class="button marginless">Button</button>
            </li>
        </ul>
    </nav>
</div>


<!-- components / hero -->
<h2 class="h3 margin-top-3">
    Hero
</h2>
<h3 class="h4">Html:</h3>
<pre class="code"><code>&lt;div class=&quot;hero&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</code></pre>
<div class="hero" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
<pre class="code margin-top-3"><code>&lt;div class=&quot;hero hero--top&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</code></pre>
<div class="hero hero--top" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
<pre class="code margin-top-3"><code>&lt;div class=&quot;hero hero--bottom&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</code></pre>
<div class="hero hero--bottom" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>


<!-- icons -->
<h2 class="h3 margin-top-3">
    Icon
</h2>

<h3 class="h4">SCSS:</h3>
<pre class="code"><code>$crispy__icon__size: 1.15em;
</code></pre>

<h3 class="h4">Html:</h3>
<pre class="code"><code>&lt;svg class=&quot;icon text-size-small&quot; aria-hidden=&quot;true&quot;&gt;
     &lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon&quot; aria-hidden=&quot;true&quot;&gt;
     &lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-large&quot; aria-hidden=&quot;true&quot;&gt;
     &lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-big&quot; aria-hidden=&quot;true&quot;&gt;
     &lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon text-size-mega&quot; aria-hidden=&quot;true&quot;&gt;
     &lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&quot;icon icon-color-danger&quot; aria-hidden=&quot;true&quot;&gt;
     &lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;;</code></pre>
<div class="panel">
    <div class="panel__inner">
        <svg class="icon text-size-small" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-flask"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-flask"></use>
        </svg>
        <svg class="icon text-size-large" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-flask"></use>
        </svg>
        <svg class="icon text-size-big" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-flask"></use>
        </svg>
        <svg class="icon text-size-mega" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-flask"></use>
        </svg>
        <svg class="icon icon-color-danger" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-flask"></use>
        </svg>
    </div>
</div>


<!-- components / media -->
<h2 class="h3 margin-top-3">
    Media
</h2>
<h3 class="h4">Html:</h3>
<pre class="code"><code>&lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;
&lt;figure&gt;
    &lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;
    &lt;figcaption class=&quot;text-center&quot;&gt;Lorem Ipsum&lt;/figcaption&gt;
&lt;/figure&gt;
</code></pre>
<div class="grid">
    <div class="col-12 col-md-6">
        <img class="img-responsive width-100" src="https://picsum.photos/400" />
    </div>
    <div class="col-12 col-md-6">
        <figure>
            <img class="img-responsive width-100" src="https://picsum.photos/400" />
            <figcaption class="text-center">Lorem Ipsum</figcaption>
        </figure>
    </div>
</div>


<!-- components / panel -->
<h2 class="h3 margin-top-3">
    Panel
</h2>

<h3 class="h4">SCSS:</h3>
<pre class="code"><code>$crispy__panel__inner-padding: $crispy__padding;
$crispy__panel__inner-padding-breakpoints: $crispy__padding-breakpoints;
$crispy__panel__background-color: $crispy__color-grey-light;
</code></pre>

<h3 class="h4">Html:</h3>
<pre class="code"><code>&lt;div class=&quot;panel&quot;&gt;
    &lt;div class=&quot;panel__inner&quot;&gt;
        Lorem Ipsum
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
<div class="panel">
    <div class="panel__inner">
        Lorem Ipsum
    </div>
</div>


<!-- components / progress -->
<h2 class="h3 margin-top-3">
    Progress
</h2>

<h3 class="h4">SCSS:</h3>
<pre class="code"><code>$crispy__progress__height: 30px;
$crispy__progress__background-color: $crispy__color-primary;
$crispy__progress__border-width: 1px;
$crispy__progress__border-color: $crispy__color-border;
</code></pre>

<h3 class="h4">Html:</h3>
<pre class="code"><code>&lt;div class=&quot;progress&quot;&gt;
    &lt;div class=&quot;progress__inner&quot; style=&quot;width: 80%&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="progress">
    <div class="progress__inner" style="width: 80%">
    </div>
</div>


<!-- components / modal -->
<h2 class="h3 margin-top-3">
    Modal
</h2>

<h3 class="h4">SCSS:</h3>
<pre class="code"><code>$crispy__modal__max-width-breakpoints: (
    $crispy__md: 50%
);

$crispy__modal__margin-breakpoints: (
    $crispy__md: 0.75em
);

$crispy__modal__z-index: zIndex('modal');</code></pre>

<h3 class="h4">Html:</h3>
<pre class="code"><code>&lt;div class=&quot;modal modal--bottom width-100&quot;&gt;
    &lt;div class=&quot;panel&quot;&gt;
        &lt;div class=&quot;panel__inner&quot;&gt;
            Lorem Ipsum
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
<div style="position: relative; width: 100%; height: 200px; border: 1px dotted black;">
    <div class="modal modal--top-left">
        <div class="panel">
            <div class="panel__inner">
                .modal--top-left
            </div>
        </div>
    </div>
    <div class="modal modal--top-right">
        <div class="panel">
            <div class="panel__inner">
                .modal--top-right
            </div>
        </div>
    </div>
    <div class="modal">
        <div class="panel">
            <div class="panel__inner">
                .modal
            </div>
        </div>
    </div>
    <div class="modal modal--bottom-left">
        <div class="panel">
            <div class="panel__inner">
                .modal--bottom-left
            </div>
        </div>
    </div>
    <div class="modal modal--bottom-right">
        <div class="panel">
            <div class="panel__inner">
                .modal--bottom-right
            </div>
        </div>
    </div>
</div>


<!-- components / table -->
<h2 class="h3 margin-top-3">
    Table
</h2>

<h3 class="h4">SCSS:</h3>
<pre class="code"><code>$crispy__table__padding: $crispy__padding;
$crispy__table__padding-breakpoints: $crispy__padding-breakpoints;

$crispy__table__td__border: 1px solid $crispy__color-border;
$crispy__table__th__border-width: 2px !default;

$crispy__table__color: $crispy__color-text;
$crispy__table__striped__background-color: $crispy__color-grey-light;</code></pre>

<h3 class="h4">Html:</h3>
<pre class="code"><code>&lt;table class=&quot;table table--striped margin-bottom-2&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;name&lt;/th&gt;
            &lt;th&gt;age&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;Mr. Brown&lt;/td&gt;
            &lt;td&gt;43&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Mr. Magenta&lt;/td&gt;
            &lt;td&gt;32&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Mr. White&lt;/td&gt;
            &lt;td&gt;45&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;</code></pre>

<table class="table table--striped margin-bottom-2">
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mr. Brown</td>
            <td>43</td>
        </tr>
        <tr>
            <td>Mr. Magenta</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Mr. White</td>
            <td>45</td>
        </tr>
    </tbody>
</table>