SIA Web Design Library

Flourishes

No notes defined.

<!-- Default -->



<!-- Leaf Deco -->
<span class='o-leaf-deco o-leaf-deco--tight' aria-hidden='true'>
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span>


<!-- Caron Deco -->
<span class='o-caron-deco o-caron-deco--normal' aria-hidden='true'>
    <span></span><span></span><span></span><br />
    <span></span><span></span><br />
    <span></span>
</span>


<!-- Themed Rainbow -->
<span class='o-themed-rainbow-deco o-themed-rainbow-deco--hairline o-themed-rainbow-deco--4-lines' aria-hidden='true'>
    <span></span><span></span><span></span><span></span></span>


<!-- Default -->


<!-- Leaf Deco -->
<span class='{{ get_component_class( 'leaf-deco', display, 'o' ) }}' aria-hidden='true'>
    {% for i in 0..count %}<span></span>{% endfor %}
</span>

<!-- Caron Deco -->
<span class='{{ get_component_class( 'caron-deco', display, 'o' ) }}' aria-hidden='true'>
    {% for i in 0..2 %}<span></span>{% endfor %}<br />
    {% for i in 0..1 %}<span></span>{% endfor %}<br />
    <span></span>
</span>

<!-- Themed Rainbow -->
{% set limit = 1 + random(3) %}
<span class='{{ get_component_class( 'themed-rainbow-deco', display, 'o' ) }} o-themed-rainbow-deco--{{ limit + 1 }}-lines' aria-hidden='true'>
    {% for i in 0..limit %}<span></span>{% endfor %}
</span>
 
/* Default: No context defined. */


/* Leaf Deco */
{
  "display": {
    "modifiers": [
      "tight"
    ]
  },
  "count": 10
}


/* Caron Deco */
{
  "display": {
    "modifiers": [
      "normal"
    ]
  }
}


/* Themed Rainbow */
{
  "display": {
    "modifiers": [
      "hairline"
    ]
  }
}