Joran design system

Figure: Default 

<figure class="c-figure">

    <img class="c-figure__media" src="https://source.unsplash.com/QDHhz4lPnkU" alt="Des basket et des fleurs" srcset="https://source.unsplash.com/QDHhz4lPnkU/320x210 320w,https://source.unsplash.com/QDHhz4lPnkU/540x360 540w,https://source.unsplash.com/QDHhz4lPnkU/720x480 720w,https://source.unsplash.com/QDHhz4lPnkU/960x640 960w,https://source.unsplash.com/QDHhz4lPnkU/1140x760 1140w,">

    <figcaption class="c-figure__caption">
        This is the caption
    </figcaption>
</figure>
 
<figure class="c-figure{%- if styleModifier %} {{ styleModifier }}{% endif -%}">
  {% if link -%}
    <a class="u-image-link" href="{{ link.url }}">
  {%- endif %}
      <img class="c-figure__media" 
           src="{{ src }}" 
           alt="{{ alt }}"
           {% if srcset %}
             srcset="
                     {%- for item in srcset -%}
                     {{ item.url}} {{item.width}},
                     {%- endfor -%}">
           {%- endif %}
    {% if link -%}
      </a>
    {%- endif %}
    {% if caption -%}
      <figcaption class="c-figure__caption">
        {{ caption }}
      </figcaption>
    {%- endif %}
</figure>
 
{
  "src": "https://source.unsplash.com/QDHhz4lPnkU",
  "srcset": [
    {
      "url": "https://source.unsplash.com/QDHhz4lPnkU/320x210",
      "width": "320w"
    },
    {
      "url": "https://source.unsplash.com/QDHhz4lPnkU/540x360",
      "width": "540w"
    },
    {
      "url": "https://source.unsplash.com/QDHhz4lPnkU/720x480",
      "width": "720w"
    },
    {
      "url": "https://source.unsplash.com/QDHhz4lPnkU/960x640",
      "width": "960w"
    },
    {
      "url": "https://source.unsplash.com/QDHhz4lPnkU/1140x760",
      "width": "1140w"
    }
  ],
  "alt": "Des basket et des fleurs",
  "caption": "This is the caption"
}
  • Content: 
    /* ======================================================================
   # _components.figure.css
   ====================================================================== */

.c-figure__media {
  @apply
    rounded
    bg-primary-600
    ;
}

.c-figure__caption {
  @extend %caption;
}
  • URL: /components/raw/figure/_components.figure.css
  • Filesystem Path: src/components/04-Components/figure/_components.figure.css
  • Size: 291 Bytes

No notes defined.