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.
117 Commits
2 Branches
1.9 MiB
Tree: 48b375bc4d
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '48b375bc4d'
${ noResults }
crispy-css/dist/example/components.html

248 lines
24 KiB
Raw Normal View History

adding
4 years ago
adding
4 years ago
​
adding
4 years ago
adding
4 years ago
adding
4 years ago
adding
4 years ago
adding
4 years ago
adding
4 years ago
adding
4 years ago
​
​
adding
4 years ago
​
​
adding
4 years ago
​
​
​
adding
4 years ago
adding
4 years ago
adding
4 years ago
adding
4 years ago
​
​
​
​
adding
4 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
adding
4 years ago
adding
4 years ago
​
​
​
​
​
​
adding
4 years ago
adding
4 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
adding
4 years ago
adding
4 years ago
​
​
​
​
​
adding
4 years ago
adding
4 years ago
​
​
​
​
​
adding
4 years ago
adding
4 years ago
​
​
​
​
​
​
​
​
​
​
​
​
adding
4 years ago
adding
4 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. <!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 class="page"><header id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><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;
  2. $crispy__button__font-weight: $crispy__font-weight;
  3. $crispy__button__font-size: $crispy__font-size;
  4. $crispy__button__font-size-breakpoints: $crispy__font-size-breakpoints;
  5. 

  6. $crispy__button__padding: 0.4em 0.8em;
  7. $crispy__button__padding-breakpoints: (
  8.     $crispy__md: 0.6em 1.2em
  9. );
  10. 

  11. $crispy__button__margin: $crispy__margin;
  12. $crispy__button__margin-breakpoints: $crispy__margin-breakpoints;
  13. </code></pre><h3 class="h4">Html:</h3><pre class="code margin-top-1"><code>&lt;button class=&quot;button&quot;&gt;&lt;/button&gt;
  14. &lt;button class=&quot;button text-size-medium&quot;&gt;&lt;/button&gt;
  15. &lt;button class=&quot;button text-size-large&quot;&gt;&lt;/button&gt;
  16. &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__border: $crispy__border;
  17. $crispy__code__background-color: $crispy__color-grey-light;
  18. 

  19. $crispy__code__padding: $crispy__padding;
  20. $crispy__code__padding-breakpoints: $crispy__padding-breakpoints;
  21. 

  22. $crispy__code__margin: $crispy__margin;
  23. $crispy__code__margin-breakpoints: $crispy__margin-breakpoints;
  24. </code></pre><h3 class="h4">Html:</h3><pre class="code margin-top-1"><code>&lt;pre class=&quot;code&quot;&gt;
  25.     &lt;code&gt;&lt;/code&gt;
  26. &lt;/pre&gt;
  27. </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;
  28. $crispy__field__border: $crispy__border;
  29. 

  30. $crispy__field__color--valid: $crispy__color-success;
  31. $crispy__field__color--error: $crispy__color-danger;
  32. 

  33. $crispy__field__border-color--focus: $crispy__color-primary;
  34. $crispy__field__border-color--valid: $crispy__color-success;
  35. $crispy__field__border-color--error: $crispy__color-danger;
  36. 

  37. $crispy__field__choice__checked__color: $crispy__color-success;
  38. $crispy__field__choice__unchecked__color: $crispy__color-danger;
  39. 

  40. $crispy__field__input__padding: 0.4em 0.6em;
  41. $crispy__field__input__color: $crispy__color-text;
  42. 

  43. $crispy__field__select__padding: 0.3em 0.5em;
  44. $crispy__field__panel__padding: 0.3em 0.6em;
  45. 

  46. $crispy__field__select__background-color: white;
  47. $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;
  48.     &lt;input class=&quot;field__text&quot; type=&quot;text&quot; /&gt;
  49. &lt;/div&gt;
  50. &lt;div class=&quot;field field--valid&quot;&gt;
  51.     &lt;label class=&quot;field__label&quot;&gt;
  52.         Text
  53.         &lt;input type=&quot;text&quot; class=&quot;field__text&quot; /&gt;
  54.     &lt;/label&gt;
  55.     &lt;div class=&quot;field__panel&quot;&gt;
  56.         error item 1
  57.     &lt;/div&gt;
  58. &lt;/div&gt;
  59. &lt;div class=&quot;field field--error&quot;&gt;
  60.     &lt;label class=&quot;field__label&quot;&gt;
  61.         Text
  62.         &lt;input type=&quot;text&quot; class=&quot;field__text&quot; /&gt;
  63.     &lt;/label&gt;
  64.     &lt;div class=&quot;field__panel&quot;&gt;
  65.         error item 1
  66.     &lt;/div&gt;
  67. &lt;/div&gt;
  68. &lt;div class=&quot;field&quot;&gt;
  69.     &lt;label class=&quot;field__label&quot;&gt;
  70.         Textarea
  71.         &lt;textarea class=&quot;field__text&quot;&gt;&lt;/textarea&gt;
  72.     &lt;/label&gt;
  73. &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;
  74.     &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;
  75.     &lt;label for=&quot;field__checkbox__1&quot; class=&quot;field__label&quot;&gt;
  76.         &lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
  77.             &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
  78.         &lt;/svg&gt;
  79.         &lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
  80.             &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot;&gt;&lt;/use&gt;
  81.         &lt;/svg&gt;
  82.         checkbox 1
  83.     &lt;/label&gt;
  84.     &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;
  85.     &lt;label for=&quot;field__checkbox__2&quot; class=&quot;field__label&quot;&gt;
  86.         &lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
  87.             &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
  88.         &lt;/svg&gt;
  89.         &lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
  90.             &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot;&gt;&lt;/use&gt;
  91.         &lt;/svg&gt;
  92.         checkbox 2
  93.     &lt;/label&gt;
  94. &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;
  95.     &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;
  96.     &lt;label for=&quot;field__radio__1&quot; class=&quot;field__label&quot;&gt;
  97.         &lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
  98.             &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
  99.         &lt;/svg&gt;
  100.         &lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
  101.             &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot; /&gt;
  102.         &lt;/svg&gt;
  103.         radio item 1
  104.     &lt;/label&gt;&lt;br /&gt;
  105.     &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;
  106.     &lt;label for=&quot;field__radio__2&quot; class=&quot;field__label&quot;&gt;
  107.         &lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
  108.             &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
  109.         &lt;/svg&gt;
  110.         &lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
  111.             &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot; /&gt;
  112.         &lt;/svg&gt;
  113.         radio item 2
  114.     &lt;/label&gt;
  115. &lt;/div&gt;
  116. &lt;div class=&quot;field field--error&quot;&gt;
  117.     &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;
  118.     &lt;label for=&quot;field__radio__3&quot; class=&quot;field__label&quot;&gt;
  119.         &lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
  120.             &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
  121.         &lt;/svg&gt;
  122.         &lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
  123.             &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot; /&gt;
  124.         &lt;/svg&gt;
  125.         radio item 1
  126.     &lt;/label&gt;&lt;br /&gt;
  127.     &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;
  128.     &lt;label for=&quot;field__radio__4&quot; class=&quot;field__label&quot;&gt;
  129.         &lt;svg class=&quot;icon text-size-medium field__choice__unchecked&quot; aria-hidden=&quot;true&quot;&gt;
  130.             &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-left&quot;&gt;&lt;/use&gt;
  131.         &lt;/svg&gt;
  132.         &lt;svg class=&quot;icon text-size-medium field__choice__checked&quot; aria-hidden=&quot;true&quot;&gt;
  133.             &lt;use xlink:href=&quot;symbol-defs.svg#icon-toggle-right&quot; /&gt;
  134.         &lt;/svg&gt;
  135.         radio item 2
  136.     &lt;/label&gt;
  137.     &lt;div class=&quot;field__panel&quot;&gt;
  138.         error item 1
  139.     &lt;/div&gt;
  140. &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;
  141.     &lt;label class=&quot;field__label&quot;&gt;
  142.         Select Item
  143.         &lt;select class=&quot;field__select&quot;&gt;
  144.             &lt;option&gt;select item 1&lt;/option&gt;
  145.             &lt;option&gt;select item 2&lt;/option&gt;
  146.             &lt;option&gt;select item 3&lt;/option&gt;
  147.         &lt;/select&gt;
  148.     &lt;/label&gt;
  149. &lt;/div&gt;
  150. &lt;div class=&quot;field field--error&quot;&gt;
  151.     &lt;label class=&quot;field__label&quot;&gt;
  152.         Select Item
  153.         &lt;select class=&quot;field__select&quot;&gt;
  154.             &lt;option&gt;select item 1&lt;/option&gt;
  155.             &lt;option&gt;select item 2&lt;/option&gt;
  156.             &lt;option&gt;select item 3&lt;/option&gt;
  157.         &lt;/select&gt;
  158.         &lt;div class=&quot;field__panel&quot;&gt;
  159.             error item 1
  160.         &lt;/div&gt;
  161.     &lt;/label&gt;
  162. &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;
  163. $crispy__group__character: '/' !default;
  164. $crispy__group__character-margin: 0 $crispy__group__margin 0 !default;</code></pre><h3 class="h4">Html:</h3><pre class="code"><code>&lt;nav&gt;
  165.     &lt;ul class=&quot;group group--hr&quot;&gt;
  166.         &lt;li class=&quot;group__item&quot;&gt;first item&lt;/li&gt;
  167.         &lt;li class=&quot;group__item&quot;&gt;second item&lt;/li&gt;
  168.         &lt;li class=&quot;group__item&quot;&gt;third item&lt;/li&gt;
  169.     &lt;/ul&gt;
  170. &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;
  171. </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;
  172.      &lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
  173. &lt;/svg&gt;
  174. &lt;svg class=&quot;icon&quot; aria-hidden=&quot;true&quot;&gt;
  175.      &lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
  176. &lt;/svg&gt;
  177. &lt;svg class=&quot;icon text-size-large&quot; aria-hidden=&quot;true&quot;&gt;
  178.      &lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
  179. &lt;/svg&gt;
  180. &lt;svg class=&quot;icon text-size-big&quot; aria-hidden=&quot;true&quot;&gt;
  181.      &lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
  182. &lt;/svg&gt;
  183. &lt;svg class=&quot;icon text-size-mega&quot; aria-hidden=&quot;true&quot;&gt;
  184.      &lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
  185. &lt;/svg&gt;
  186. &lt;svg class=&quot;icon icon-color-danger&quot; aria-hidden=&quot;true&quot;&gt;
  187.      &lt;use xlink:href=&quot;symbol-defs.svg#icon-flask&quot;&gt;&lt;/use&gt;
  188. &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;
  189. &lt;figure&gt;
  190.     &lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;
  191.     &lt;figcaption class=&quot;text-center&quot;&gt;Lorem Ipsum&lt;/figcaption&gt;
  192. &lt;/figure&gt;
  193. </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;
  194. $crispy__panel__inner-padding-breakpoints: $crispy__padding-breakpoints;
  195. $crispy__panel__background-color: $crispy__color-grey-light;
  196. </code></pre><h3 class="h4">Html:</h3><pre class="code"><code>&lt;div class=&quot;panel&quot;&gt;
  197.     &lt;div class=&quot;panel__inner&quot;&gt;
  198.         Lorem Ipsum
  199.     &lt;/div&gt;
  200. &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;
  201. $crispy__progress__background-color: $crispy__color-primary;
  202. $crispy__progress__border-width: 1px;
  203. $crispy__progress__border-color: $crispy__color-border;
  204. </code></pre><h3 class="h4">Html:</h3><pre class="code"><code>&lt;div class=&quot;progress&quot;&gt;
  205.     &lt;div class=&quot;progress__inner&quot; style=&quot;width: 80%&quot;&gt;&lt;/div&gt;
  206. &lt;/div&gt;
  207. </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: (
  208.     $crispy__md: 50%
  209. );
  210. 

  211. $crispy__modal__margin-breakpoints: (
  212.     $crispy__md: 0.75em
  213. );
  214. 

  215. $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;
  216.     &lt;div class=&quot;panel&quot;&gt;
  217.         &lt;div class=&quot;panel__inner&quot;&gt;
  218.             Lorem Ipsum
  219.         &lt;/div&gt;
  220.     &lt;/div&gt;
  221. &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;
  222. $crispy__table__padding-breakpoints: $crispy__padding-breakpoints !default;
  223. 

  224. $crispy__table__td__border: 1px solid $crispy__color-border !default;
  225. $crispy__table__th__border-width: 2px !default;
  226. 

  227. $crispy__table__color: $crispy__color-text !default;
  228. $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;
  229.     &lt;thead&gt;
  230.         &lt;tr&gt;
  231.             &lt;th&gt;name&lt;/th&gt;
  232.             &lt;th&gt;age&lt;/th&gt;
  233.         &lt;/tr&gt;
  234.     &lt;/thead&gt;
  235.     &lt;tbody&gt;
  236.         &lt;tr&gt;
  237.             &lt;td&gt;Mr. Brown&lt;/td&gt;
  238.             &lt;td&gt;43&lt;/td&gt;
  239.         &lt;/tr&gt;
  240.         &lt;tr&gt;
  241.             &lt;td&gt;Mr. Magenta&lt;/td&gt;
  242.             &lt;td&gt;32&lt;/td&gt;
  243.         &lt;/tr&gt;
  244.         &lt;tr&gt;
  245.             &lt;td&gt;Mr. White&lt;/td&gt;
  246.             &lt;td&gt;45&lt;/td&gt;
  247.         &lt;/tr&gt;
  248.     &lt;/tbody&gt;
  249. &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>