<figure class="figure">
    <picture class="figure-img">
        <source media="(min-width: 60em)" srcset="http://placehold.it/1600x1067/ACCBE8/ffffff?text=eXtra Large|1600x1067">
        <source media="(min-width: 40em)" srcset="http://placehold.it/960x640/ACCBE8/ffffff?text=Large|960x640">
        <source media="(min-width: 20em)" srcset="http://placehold.it/640x427/F1BF9F/ffffff?text=Medium|640x427">
        <img class="img-fluid" src="https://placehold.it/960x640/ea09ff/000001?text=Default|960x640" alt="">
    </picture>
    <figcaption class="figure-caption">Ceci est une légende<span class="vd-figure-credits">Crédit photo</span></figcaption>
</figure>
<figure class="figure{% if styleModifier %} {{ styleModifier }}{% endif %}">
  {% if url -%}<a href="{{ url }}"{% if title %} title="{{ title }}"{% endif %}>{% endif -%}
    {%- if image.source -%}
    <picture class="figure-img">
      {% for item in image.source -%}
      <source media="{{ item.media }}" srcset="{{ item.srset }}">
      {%- endfor %}
      {% render '@image--fluid', image -%}
    </picture>
    {%- else -%}
    {%- render '@image--fluid', image.default -%}
    {%- endif %}
  {% if url -%}</a>{% endif -%}
  {% if caption -%}
  <figcaption class="figure-caption">{{ caption.text }}{% if caption.credit %}<span class="vd-figure-credits">{{ caption.credit }}</span>{% endif %}</figcaption>
  {%- endif %}
</figure>
{
  "category": "Category",
  "caption": {
    "text": "Ceci est une légende",
    "credit": "Crédit photo"
  },
  "image": {
    "srcset": false,
    "class": "img-fluid",
    "source": [
      {
        "media": "(min-width: 60em)",
        "srset": "http://placehold.it/1600x1067/ACCBE8/ffffff?text=eXtra Large|1600x1067"
      },
      {
        "media": "(min-width: 40em)",
        "srset": "http://placehold.it/960x640/ACCBE8/ffffff?text=Large|960x640"
      },
      {
        "media": "(min-width: 20em)",
        "srset": "http://placehold.it/640x427/F1BF9F/ffffff?text=Medium|640x427"
      }
    ],
    "src": "https://placehold.it/960x640/ea09ff/000001?text=Default|960x640"
  }
}
  • Content:
    /**
     * Remove margin between caption and image
     */
    .figure-img {
      margin-bottom: 0;
    }
    
    /**
     * Style figure caption
     */
    .figure-caption {
      font-style: italic;
      color: $gray-500;
      text-align: left;
    }
    
    /**
     * Style for credits inside figcaption
     */
    .vd-figure-credits {
      display: block;
      font-size: 80%;
      font-weight: 500;
      font-style: normal;
      color: $body-color;
    
      &:before {
        content: "/\0000a0";
      }
    }
    
    .vd-figure-img-container {
      position: relative;
    }
    
  • URL: /components/raw/figure/_figure.scss
  • Filesystem Path: src/components/02-molecules/media/figure/_figure.scss
  • Size: 468 Bytes

No notes defined.