Joran design system

Arrow: Down 

<span class="c-arrow" role="presentation"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 16">
        <path d="M7 1v14m6-6l-6 6M1 9l6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
</span>
 
<span class="c-arrow{% if styleVariant %} {{ styleVariant }}{% endif %}{% if styleModifier %} {{ styleModifier }}{% endif %}" role="presentation">{% render '@svg-arrow-down' %}</span>
 
{
  "text": "Voir plus loin"
}
  • Content: 
    /* ======================================================================
   # _components.arrow.css
   ====================================================================== */

.c-arrow {
  @extend .u-print-hidden;

  @apply
    h-12
    w-12
    text-white
    text-center
    font-extrabold
    flex
    items-center
    justify-center
    rounded-full
    bg-white
    bg-opacity-50
    shadow
    transition
    ;
}

.c-arrow svg {
  @apply
    h-6
    fill-current
    ;
}
  • URL: /components/raw/arrow/_components.arrow.css
  • Filesystem Path: src/components/04-Components/arrow/_components.arrow.css
  • Size: 480 Bytes

No notes defined.