tentakelfabrik
/
crispy-css
1
0
Fork 0
Code Issues 1 Pull Requests 0 Releases 1 Wiki Activity
Lightweight CSS Framework for Building Apps and Websites https://crispy-css.com
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 Commits
2 Branches
1.9 MiB
 
 
 
Tree: 03f24b040c
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '03f24b040c'
${ noResults }
crispy-css/dist/examples/components.html

240 lines
24 KiB
Raw Blame History

<!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Components | Crispy CSS</title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body><header id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid"><div class="col-12 col-md-4"><a href="/" class="text-color-white text-bold"><svg class="icon text-size-mega" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg> Crispy CSS</a></div><div class="col-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Components</h1></header><h2 class="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.3em 0.8em;
$crispy__button__padding-breakpoints: (
$crispy__md: 0.4em 1.2em
);
</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><h2 class="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__padding: $crispy__padding;
$crispy__code__padding-breakpoints: $crispy__padding-breakpoints;
$crispy__code__margin: $crispy__margin;
$crispy__code__border: $crispy__border;
$crispy__code__background-color: $crispy__color-grey-light;
</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><h2 class="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><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"/></div><div class="field field--valid"><label class="field__label">Text <input class="field__text"/></label><div class="field__panel">error item 1</div></div><div class="field field--error"><label class="field__label">Text <input 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><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><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><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><h2 class="margin-top-3">Group</h2><h3 class="h4">Scss:</h3><pre class="code"><code>$crispy__group__margin: 0.3em !default;
$crispy__group__character: '/' !default;
$crispy__group__character-margin: 0 $crispy__group__margin 0 !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><h2 class="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><h2 class="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><h2 class="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><h2 class="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><h2 class="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><h2 class="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><h2 class="margin-top-3">Table</h2><h3 class="h4">Scss:</h3><pre class="code"><code>$crispy__table__padding: $crispy__padding !default;
$crispy__table__padding-breakpoints: $crispy__padding-breakpoints !default;
$crispy__table__td__border: 1px solid $crispy__color-border !default;
$crispy__table__th__border-width: 2px !default;
$crispy__table__color: $crispy__color-text !default;
$crispy__table__striped__background-color: $crispy__color-grey-light !default;</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></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer></body></html>