<div class="hero-slider">

    <figure>
        <img src="/images/article.jpg" alt="Pensel" class="slider-item">

        <figcaption>
            <p>Spesialbibliotekar Kirsti Langstøyl (f.v.), professor emeritus Terje Aarset og bibliotekleiar Henriette Hafsaas Tsakos ser over eit knippe av bøkene.</p>
        </figcaption>

    </figure>

    <figure>
        <img src="/images/article.jpg" alt="" class="slider-item">

        <figcaption>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque</p>
        </figcaption>

    </figure>

</div>
<div class="hero-slider">
  {% for item in items %}
  <figure>
    <img src="{{ item.src }}" alt="{{ item.alt }}" class="slider-item">
    {% if item.figcaption %}
    <figcaption>{{ item.figcaption | markdown }}</figcaption>
    {% endif %}
  </figure>
  {% endfor %}
</div>
{
  "items": [
    {
      "src": "/images/article.jpg",
      "alt": "Pensel",
      "figcaption": "Spesialbibliotekar Kirsti Langstøyl (f.v.), professor emeritus Terje Aarset og bibliotekleiar Henriette Hafsaas Tsakos ser over eit knippe av bøkene.\n"
    },
    {
      "src": "/images/article.jpg",
      "figcaption": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque\n"
    }
  ]
}
  • Handle: @component-hero-slider--figcaption
  • Preview:
  • Filesystem Path: source/patterns/02-components/hero-slider.twig

No notes defined.