Foehn Design System

Figure: Picture 

<figure class="figure">
    <picture class="figure-img">
        <source media="(min-width: 60em)" srcset="../../assets/img/picture-1600x1067.jpg">
        <source media="(min-width: 40em)" srcset="../../assets/img/picture-960x640.jpg">
        <source media="(min-width: 20em)" srcset="../../assets/img/picture-540x360.jpg">
        <img class="img-fluid" src="/assets/img/picture-960x640.jpg" 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": "../../assets/img/picture-1600x1067.jpg"
      },
      {
        "media": "(min-width: 40em)",
        "srset": "../../assets/img/picture-960x640.jpg"
      },
      {
        "media": "(min-width: 20em)",
        "srset": "../../assets/img/picture-540x360.jpg"
      }
    ],
    "src": "/assets/img/picture-960x640.jpg"
  }
}
  • 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.