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

239 lines
24 KiB
Raw Normal View History

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><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;
  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.3em 0.8em;
  7. $crispy__button__padding-breakpoints: (
  8.     $crispy__md: 0.4em 1.2em
  9. );
  10. </code></pre><h3 class="h4">Html:</h3><pre class="code margin-top-1"><code>&lt;button class=&quot;button&quot;&gt;&lt;/button&gt;
  11. &lt;button class=&quot;button text-size-medium&quot;&gt;&lt;/button&gt;
  12. &lt;button class=&quot;button text-size-large&quot;&gt;&lt;/button&gt;
  13. &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;
  14. $crispy__code__padding-breakpoints: $crispy__padding-breakpoints;
  15. $crispy__code__margin: $crispy__margin;
  16. $crispy__code__border: $crispy__border;
  17. $crispy__code__background-color: $crispy__color-grey-light;
  18. </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;
  19. $crispy__field__border: $crispy__border;
  20. 

  21. $crispy__field__color--valid: $crispy__color-success;
  22. $crispy__field__color--error: $crispy__color-danger;
  23. 

  24. $crispy__field__border-color--focus: $crispy__color-primary;
  25. $crispy__field__border-color--valid: $crispy__color-success;
  26. $crispy__field__border-color--error: $crispy__color-danger;
  27. 

  28. $crispy__field__choice__checked__color: $crispy__color-success;
  29. $crispy__field__choice__unchecked__color: $crispy__color-danger;
  30. 

  31. $crispy__field__input__padding: 0.4em 0.6em;
  32. $crispy__field__input__color: $crispy__color-text;
  33. 

  34. $crispy__field__select__padding: 0.3em 0.5em;
  35. $crispy__field__panel__padding: 0.3em 0.6em;
  36. 

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

  202. $crispy__modal__margin-breakpoints: (
  203.     $crispy__md: 0.75em
  204. );
  205. 

  206. $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;
  207.     &lt;div class=&quot;panel&quot;&gt;
  208.         &lt;div class=&quot;panel__inner&quot;&gt;
  209.             Lorem Ipsum
  210.         &lt;/div&gt;
  211.     &lt;/div&gt;
  212. &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;
  213. $crispy__table__padding-breakpoints: $crispy__padding-breakpoints !default;
  214. 

  215. $crispy__table__td__border: 1px solid $crispy__color-border !default;
  216. $crispy__table__th__border-width: 2px !default;
  217. 

  218. $crispy__table__color: $crispy__color-text !default;
  219. $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;
  220.     &lt;thead&gt;
  221.         &lt;tr&gt;
  222.             &lt;th&gt;name&lt;/th&gt;
  223.             &lt;th&gt;age&lt;/th&gt;
  224.         &lt;/tr&gt;
  225.     &lt;/thead&gt;
  226.     &lt;tbody&gt;
  227.         &lt;tr&gt;
  228.             &lt;td&gt;Mr. Brown&lt;/td&gt;
  229.             &lt;td&gt;43&lt;/td&gt;
  230.         &lt;/tr&gt;
  231.         &lt;tr&gt;
  232.             &lt;td&gt;Mr. Magenta&lt;/td&gt;
  233.             &lt;td&gt;32&lt;/td&gt;
  234.         &lt;/tr&gt;
  235.         &lt;tr&gt;
  236.             &lt;td&gt;Mr. White&lt;/td&gt;
  237.             &lt;td&gt;45&lt;/td&gt;
  238.         &lt;/tr&gt;
  239.     &lt;/tbody&gt;
  240. &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>