3 Components

More complex elements composed or able to contains some others elements.

3.1 Blocks

Description

Colette comes with basic styles for block elements. Gives a white background, a full width, a relative position and align the text to the left. Can provides optionnal title and footer. The SVG in the title is optionnal too. You can add a 'box' class to Block, it will give it a border and paddings. It's optionnal too. It can be modified by -stretch, it'll be useful to make it stretch in height.

Default styling

Example of a block title

Example of a block content

Modifiers

.block-default

default theme color

Example of a block title

Example of a block content

.block-sport

default theme color

Example of a block title

Example of a block content

Markup
<div class="block ">
    <p class="block-title ">Example of a block title</p>
    <p class="pa1">Example of a block content</p>
    <div class="block-footer">
        <p>Example of a block footer</p>
    </div>
</div>
{#
 # @param str       blockTitle         (required)
 # @param str       blockTitleTag      (optional)
 # @param str       blockIcon          (optional)
 # @param array     blockClasses       (optional)
 # @param array     blockTitleClasses  (optional)
 #
 # @block block_header           (optional)
 # @block block_body             (optional)
 # @block block_footer           (optional)
 # @block block_footer_content   (optional)
 # @block block_classes          (optional)
 # @block block_attribute        (optional)
 # @block block_title_classes    (optional)
 # @block block_title_attributes (optional)
 #}
{%- set blockClasses = blockClasses|default([]) -%}
{%- if modifier_class %}{% set blockClasses = blockClasses|merge([modifier_class]) %}{% endif -%}

{% set blockTitleTag = blockTitleTag|default('p') %}
<div class="block {% block block_classes %}{{ blockClasses|default([])|join(' ') }}{% endblock %}" {% block block_attribute '' %}>
    {% block block_header %}
        <{{ blockTitleTag }} class="block-title {% block block_title_classes %}{{ blockTitleClasses|default([])|join(' ') }}{% endblock %}" {% block block_title_attributes %}{% endblock %}>{% if blockIcon is defined %}<svg height="11" width="11"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-{{ blockIcon }}"></use></svg>{% endif %}{{ blockTitle|raw }}</{{ blockTitleTag }}>
    {% endblock %}
    {% block block_body %}
        <p class="pa1">Example of a block content</p>
    {% endblock %}
    {% block block_footer %}
        <div class="block-footer">
            {#- It shouldn’t have space in this div if it is empty to respect `:empty` css pseudo-classe -#}
            {%- block block_footer_content -%}
                <p>Example of a block footer</p>
            {%- endblock -%}
        </div>
    {% endblock %}
</div>

Source: src/styl/_components/_block.styl, line 1

3.1.1 Block title and modifiers

Default styling

Example of a title

Modifiers

block-title-lined

title with bottom border instead of background color

Example of a title

Markup
<p class="block-title ">
    <svg height="11" width="11">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-clock"></use>
    </svg>
    Example of a title
</p>
<p class="block-title [modifier class]">
    <svg height="11" width="11"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-clock"></use></svg>
    Example of a title
</p>

Source: src/styl/_components/_block.styl, line 15

3.1.2 Block List with a pager

Example

Example of a block title

Markup
<div class="block ">
    <p class="block-title ">Example of a block title</p>
    <ul class="block-list">
        <li class="block-list-item"><a class="pl1 pr1" href="#">Paris (75000)</a></li>
        <li class="block-list-item"><a class="pl1 pr1" href="#">Marseille (13000)</a></li>
        <li class="block-list-item"><a class="pl1 pr1" href="#">Versailles (78000)</a></li>
        <li class="block-list-item"><a class="pl1 pr1" href="#">Caen (14000)</a></li>
    </ul>
    <div class="block-footer">
        <span class="float-left">Exemple of footer</span>
    </div>
</div>
{#
 # @extends block.twig
 #
 # template for content small block
 #}
{% extends 'block.twig' %}

{% set itemPerPage = itemPerPage|default(5) %}

{% block block_body %}
    <ul class="block-list" {% if list|length > itemPerPage %} data-item-per-page="{{ itemPerPage }}"{% endif %}>
        {% block block_body_content %}
            {% for item in list %}
                <li class="block-list-item" {{ loop.index > itemPerPage ? ' aria-hidden="true"'|raw }}><a class="pl1 pr1" href="#">{{ item }}</a></li>
            {% endfor %}
        {% endblock %}
    </ul>
{% endblock %}

{%- block block_footer_content -%}
    <span class="float-left">Exemple of footer</span>

    {%- if list|length > itemPerPage -%}
        {% include '../_elements/pager.twig' with {
            "classes": ['float-right'],
            "nbItems": list|length,
            "nbItemsPerPage": itemPerPage,
            "currentPage": 1,
            "js": true
        } only %}
    {%- endif -%}
{%- endblock -%}

Source: src/styl/_components/_block.styl, line 29

3.1.3 Block List can be used with article cards

Markup
<div class="block ">
    <p class="block-title ">Example of a block title</p>
    <ul class="block-list">
        <li class="block-list-item">
            <a class="card" href="#">
                <figure class="media " role="group">
                    <div class="media-wrap">
                        <img class="" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                    </div>
                </figure>
                <div class="teaser">
                    <p class="teaser-headline"> élections
                    </p>
                    <p class="teaser-title">Elections régionales cantal 2015</p>
                </div>
            </a>
        </li>
        <li class="block-list-item">
            <a class="card" href="#">
                <figure class="media " role="group">
                    <div class="media-wrap">
                        <img class="b-lazy" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" data-src="https://img.20mn.fr/9IR7-SzgSIidHDx0YJA3Pw/120x78_bouchons-autoroute-pres-vienne-2-aout-2014" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                    </div>
                </figure>
                <div class="teaser">
                    <p class="teaser-headline"> élections
                    </p>
                    <p class="teaser-title">Nunc consectetur facilisis nisl, ac convallis orci suscipit eget. Mauris eget faucibus dui. Ut ullamcorper dignissim orci, sit amet scelerisque justo laoreet vitae. Nam volutpat leo sollicitudin enim volutpat, porta semper orci commodo. Nunc hendrerit at quam at aliquet. Vestibulum eget arcu eros. Fusce commodo faucibus leo, ac sodales ante dictum sit amet.e</p>
                </div>
            </a>
        </li>
        <li class="block-list-item">
            <a class="card" href="#">
                <figure class="media " role="group">
                    <div class="media-wrap">
                        <img class="b-lazy" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" data-src="https://img.20mn.fr/9IR7-SzgSIidHDx0YJA3Pw/120x78_bouchons-autoroute-pres-vienne-2-aout-2014" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                    </div>
                </figure>
                <div class="teaser">
                    <p class="teaser-headline"> élections
                    </p>
                    <p class="teaser-title">Elections short title</p>
                </div>
            </a>
        </li>
    </ul>
    <div class="block-footer">
        <span class="float-left">Exemple of footer</span>
    </div>
</div>
{#
 # @extends block-list.twig
 #
 # template for content block with cards
 #}
{% extends 'block-list.twig' %}

{% block block_body_content %}
    {% for item in list %}
        <li class="block-list-item" {{ loop.index > itemPerPage ? ' aria-hidden="true"'|raw }}>
            {% include 'card.twig' with {
                'article': item,
                'classes': cardsClasses|default([]),
                'defaultFormat': formats.listing_low,
                'mediaFormats': [],
                'lazyloadImg': lazyloadImg,
                'theme': globalTheme,
                'isDated': isDated,
                'priorityToSectionTitle': priorityToSectionTitle
            } only %}
        </li>
    {% endfor %}
{% endblock %}

Source: src/styl/_components/_block.styl, line 37

3.2 Box

Description

A box is a skin for block present on the body background. It can be used on a simple div on a component block or preview (on homepage or listing pages) or on the content container (content view).

Default styling

Example of a content box

Modifiers

.box-borderless

box without white border

Example of a content box

.box-lined

box with left colored border (can use border-color-… helpers)

Example of a content box

Markup
<div class="box ">
    <p class="pa1">Example of a content box</p>
</div>
<div class="box {{ modifier_class }}">
    <p class="pa1">Example of a content box</p>
</div>

Source: src/styl/_components/_box.styl, line 1

3.3 Breaking News

Description

A banner with important title. Is usualy a link to this article.

Markup
<a href="#" class="breakingnews box">
    <span class="breakingnews-label">Breaking News</span>
    <strong class="breakingnews-title">Important title of a new important article</strong>
    <span class="breakingnews-cta">Read this article</span>
</a>
<a href="#" class="breakingnews box">
    <span class="breakingnews-label">Breaking News</span>
    <strong class="breakingnews-title">Important title of a new important article</strong>
    <span class="breakingnews-cta">Read this article</span>
</a>

Source: src/styl/_components/_breakingnews.styl, line 1

3.4 Card

Description

An article card is a teaser + media group It can be a link and modified by .color-* helpers

Modifiers

.color-default

theme default

.color-planet

theme planet

.card-lined.color-default

theme default + lined style

Markup
<a class="card" href="#">
    <figure class="media " role="group">
        <div class="media-wrap">
            <img class="" width="120" height="78" src="https://img.20mn.fr/9IR7-SzgSIidHDx0YJA3Pw/120x78_bouchons-autoroute-pres-vienne-2-aout-2014" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
        </div>
    </figure>
    <div class="teaser">
        <p class="teaser-headline"> élections
        </p>
        <p class="teaser-title">Elections short title</p>
    </div>
</a>
{# Card
 #
 # @param bool    isDated                (optional) (default true)
 # @param string  theme                  (optional) override theme
 # @param bool    lazyloadImg            (optional) image lazyload (default false)
 # @param array   classes                (optional) classes array added to each cards (defaut [])
 # @param string  attributes             (optional) (default '')
 # @param bool    priorityToSectionTitle (optional) (default false)
 # @param array   article                (required) content
 #       -> array  media    (optional)
 #       -> array  label    (optional)
 #           -> string   default     (required)
 #       -> array  title    (required)
 #           -> string   default     (required)
 #           -> string   shore       (optional)
 #       -> array  section  (required)
 #           -> string   theme       (optional)
 #       -> array  date     (optional)
 #           -> string   publication (optional)
 #       -> array  rank     (optional) ranking and scoring
 #       -> array  uri      (required)
 #           -> string   current     (required) uri
 #}
{%- set classes = classes|default([]) -%}
{%- if modifier_class %}{% set classes = classes|merge([modifier_class]) %}{% endif -%}
{%- set media = article.medias is defined ? article.medias.data|first : {} -%}
{%- set priorityToSectionTitle = priorityToSectionTitle|default(false) -%}
{%- set theme = theme is defined and theme is not empty ? theme : article.section.theme|default('default') -%}
<a class="{{ ['card']|merge(classes)|join(' ') }}" href="#">
    {%- include '../_elements/media.twig' with {
        'media': media,
        'classes': [],
        'rank': article.rank|default(null),
        'defaultFormat': '120x78',
        'mediaFormats': ['120x78'],
        'lazyloadImg': lazyloadImg|default(false),
    } only -%}
    <div class="teaser">
        <p class="teaser-headline">
            {% if isDated %}<time datetime="{{ article.date.publication }}">{{ article.date.publication|time_or_date }}</time> | {% endif %}
            {% if priorityToSectionTitle %}
                {{ article.section.title|default(article.label.default|default('')) }}
            {% else %}
                {{ article.label.default|default(article.section.title|default('')) }}
            {% endif %}
        </p>
        <p class="teaser-title">{{ article.title.short|default(article.title.default|smart_cut(75)) }}</p>
    </div>
</a>

Source: src/styl/_components/_card.styl, line 1

3.5 Content

Description

A contribued content container able to tyle every standard element and widget inside.

This class can be used on any block containing some contribued content.

Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph / Body text

Example of a small text

Example of a abbr

Example of a link

Example of a blockquote
on multiple lines

Example of a table
Odd row
Even row
We should think about styling tables' footer
  • List, item 1
  • List, item 2
  • List, item 3
    • List, item 1
    • List, item 2
    • List, item 3
      • List, item 1
      • List, item 2
      • List, item 3
  1. Ordered list, item 1
  2. Ordered list, item 2
  3. Ordered list, item 3
    1. Ordered list, item 1
    2. Ordered list, item 2
    3. Ordered list, item 3
      1. Ordered list, item 1
      2. Ordered list, item 2
      3. Ordered list, item 3
Markup
<section class="content">
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    <p>Paragraph / Body text</p>
    <p>Example of a <small>small text</small></p>
    <p>Example of a <abbr title="abbreviation">abbr</abbr></p>
    <p>Example of a <a href="#">link</a></p>

    <blockquote>
        <p>Example of a blockquote<br />on multiple lines</p>
    </blockquote>

    <table>
        <thead>
            <tr>
                <th>Example of a table</th>
            </tr>
        </thead>
        <toby>
            <tr>
                <td>Odd row</td>
            </tr>
            <tr>
                <td>Even row</td>
            </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>We should think about styling tables' footer</td>
                </tr>
            </tfoot>
    </table>

    <ul>
        <li>List, item 1</li>
        <li>List, item 2</li>
        <li>List, item 3
            <ul>
                <li>List, item 1</li>
                <li>List, item 2</li>
                <li>List, item 3
                    <ul>
                        <li>List, item 1</li>
                        <li>List, item 2</li>
                        <li>List, item 3</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

    <ol>
        <li>Ordered list, item 1</li>
        <li>Ordered list, item 2</li>
        <li>Ordered list, item 3
            <ol>
                <li>Ordered list, item 1</li>
                <li>Ordered list, item 2</li>
                <li>Ordered list, item 3
                    <ol>
                        <li>Ordered list, item 1</li>
                        <li>Ordered list, item 2</li>
                        <li>Ordered list, item 3</li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>
</section>
<section class="content">
    {% include '../_base/typography.twig' with {} only %}
</section>

Source: src/styl/_components/_content.styl, line 1

3.6 Dowpdown

Description

Dropdown menu

Example

Markup
<div class="dropDown">
    <button type="button" aria-expanded="false" class="btn dropDown-btn" aria-controls="dropDown">
        <span class="mask">Choose your pet</span>
        Cat
        <svg class="btn-picto btn-picto-right" height="14" width="14" aria-hidden="true" focusable="false">
            <use class="up" xlink:href="#symbol-arrow-up"></use>
            <use class="down" xlink:href="#symbol-arrow-down"></use>
        </svg>
    </button>
    <ul id="dropDown" class="symbolList dropDown-content">
        <li class="symbolList-item">
            <a href="#" class="symbolList-link">Dog</a>
        </li>
        <li class="symbolList-item">
            <a href="#" class="symbolList-link">
                <svg class="symbolList-symbol" height="13" width="11">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-tick"></use>
                </svg>
                Cat
            </a>
        </li>
        <li class="symbolList-item">
            <a href="#" class="symbolList-link">Lion</a>
        </li>
        <li class="symbolList-item">
            <a href="#" class="symbolList-link">Rabbit</a>
        </li>
    </ul>
</div>
<div class="dropDown">
    <button type="button" aria-expanded="false"  class="btn dropDown-btn" aria-controls="dropDown">
        <span class="mask">Choose your pet</span>
        Cat
        <svg class="btn-picto btn-picto-right" height="14" width="14" aria-hidden="true" focusable="false">
            <use class="up" xlink:href="#symbol-arrow-up"></use>
            <use class="down" xlink:href="#symbol-arrow-down"></use>
        </svg>
    </button>
    {% include 'symbolList.twig' with {
        'id': 'dropDown',
        'classes': ['dropDown-content'],
    } only %}
</div>

Source: src/styl/_components/_dropDown.styl, line 1

3.8 Inline Menu

Description

Set all elements of list in display flex, justify and align items center.

This class can be used to make a inline menu.

Markup
<ul class="inlinemenu ai-cntr jc-cntr">
    <li class="inlinemenu-item"><a href="#">Plan du site</a></li>
    <li class="inlinemenu-item"><a href="#">Notre charte</a></li>
    <li class="inlinemenu-item"><a href="#">Journal PDF</a></li>
    <li class="inlinemenu-item"><a href="#">Mentions légales</a></li>
    <li class="inlinemenu-item"><a href="#">CGU</a></li>
    <li class="inlinemenu-item"><a href="#">Protection des données personnelles</a></li>
    <li class="inlinemenu-item"><a href="#">Gestion des cookies</a></li>
    <li class="inlinemenu-item"><a href="#">Nous contacter</a></li>
</ul>

<ul class="inlinemenu ai-cntr jc-cntr">
    <li class="inlinemenu-item"><a href="#">Plan du site</a></li>
    <li class="inlinemenu-item"><a href="#">Notre charte</a></li>
    <li class="inlinemenu-item"><a href="#">Journal PDF</a></li>
    <li class="inlinemenu-item"><a href="#">Mentions légales</a></li>
    <li class="inlinemenu-item"><a href="#">CGU</a></li>
    <li class="inlinemenu-item"><a href="#">Protection des données personnelles</a></li>
    <li class="inlinemenu-item"><a href="#">Gestion des cookies</a></li>
    <li class="inlinemenu-item"><a href="#">Nous contacter</a></li>
</ul>

Source: src/styl/_components/_inlinemenu.styl, line 1

3.9 Modal

Description

Colette uses the accessible modal a11y-dialog.

By defaut modal is 90% of viewport width

For react project we use react-modal but CSS need some overwrite to match the overlay as a wrapper.

Default styling

Modifiers

.modal-window-auto

modal width related to content

.modal-window-small

modal width 440px

.modal-window-medium

modal width 600px

.modal-window-closeOutside

close button outside modal body

.modal-window-closeHidden

close button hidden

.modal-window-fixedHeight

modal with a fixed height at 70vh and an inner scroll

Markup
<!-- For demo, we overide some css of `.modal` properties to not make it overlay all the viewport -->
<div class="modal" style="height:50vh; max-height:25rem; position:relative; overflow:hidden;">
    <div class="modal-overlay" style="position:absolute;" data-a11y-dialog-hide="true"></div>
    <div class="modal-window " role="dialog" open="">
        <button type="button" class="modal-close btnIcon" data-a11y-dialog-hide="true"><svg height="12" width="12">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-cross"></use>
            </svg></button>
        <div class="modal-content box pa3" style="max-height:20rem;">This is an accessible modal</div>
    </div>
</div>
<!-- For demo, we overide some css of `.modal` properties to not make it overlay all the viewport -->
<div class="modal" style="height:50vh; max-height:25rem; position:relative; overflow:hidden;" >
    <div class="modal-overlay" style="position:absolute;" data-a11y-dialog-hide="true"></div>
    <div class="modal-window {{modifier_class}}" role="dialog" open="">
        <button type="button" class="modal-close btnIcon" data-a11y-dialog-hide="true"><svg height="12" width="12"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-cross"></use></svg></button>
        <div class="modal-content box pa3" style="max-height:20rem;">This is an accessible modal</div>
    </div>
</div>

Source: src/styl/_components/_modal.styl, line 1

3.9.1 Demo modal trigger button

Example

Markup
<button type="button" id="open-modal-btn" class="btn" data-a11y-dialog-show="accessible-modal">open modal</button>
<button type="button" id="open-modal-btn" class="btn" data-a11y-dialog-show="accessible-modal">open modal</button>

Source: src/styl/_components/_modal.styl, line 21

3.10 Navbar

Description

Display a navigation bar at the top of the page. Colette comes with a headroom.js dependency to handle navbar show/hide behavior on scroll.

Markup
<nav class="navbar" style="position:static">
    <a href="#" class="navbar-brand">
        <svg width="30" height="30">
            <use xlink:href="#symbol-logo"></use>
        </svg>
        <span class="mask">Retour à l'accueil</span>
    </a>
    <ul class="float-right">
        <li>
            <a href="#">
                <svg width="30" height="30">
                    <use xlink:href="#symbol-user"></use>
                </svg>
                <span class="mask">Icononly</span>
            </a>
        </li>
        <li>
            <a href="#">
                <svg width="30" height="30">
                    <use xlink:href="#symbol-user"></use>
                </svg>
                <span class="pl1">Icon + text</span>
            </a>
        </li>
    </ul>
</nav>
<nav class="navbar" style="position:static">
    <a href="#" class="navbar-brand">
        <svg width="30" height="30"><use xlink:href="#symbol-logo"></use></svg>
        <span class="mask">Retour à l'accueil</span>
    </a>
    <ul class="float-right">
        <li>
            <a href="#">
                <svg width="30" height="30"><use xlink:href="#symbol-user"></use></svg>
                <span class="mask">Icononly</span>
            </a>
        </li>
        <li>
            <a href="#">
                <svg width="30" height="30"><use xlink:href="#symbol-user"></use></svg>
                <span class="pl1" >Icon + text</span>
            </a>
        </li>
    </ul>
</nav>

Source: src/styl/_components/_navbar.styl, line 1

3.11 Preview

Description

An article preview is a .box with .preview class component that includes media group, a teaser and a footer. It can be modified by -stretch, it'll be useful to make it stretch in height. Can contain optional related links.

Modifiers

.preview-cover

The image's height is set to 36rem and the title is bigger.

.preview-stretch

In a flexbox, stretch or height 100%.

.preview-forward

The image occupies all the space, and the texts pass over it and are white with shadow.
If picto is visible (skin-video...), it is centered horizontally and vertically.

.preview-reduced

A minimalist layout, without bg color, which contains only the label and title (which is limited in height).

.preview-inline

The image is in square format, and aligned with the text. The description is hidden.

Markup
<article class="preview box mb2">
    <a href="#">
        <figure class="media " role="group">
            <div class="media-wrap">
                <img class="" width="478" height="190" src="https://img.20mn.fr/9IR7-SzgSIidHDx0YJA3Pw/478x190_bouchons-autoroute-pres-vienne-2-aout-2014" alt="" />
            </div>
        </figure>


        <div class="teaser">
            <div class="teaser-headline color-default">This is the label content</div>
            <h2 class="teaser-title">This is the content title</h2>

            <p class="teaser-summary">This is the summary content</p>

        </div>
    </a>
    <ul class="preview-related">
        <li><a class="preview-related-link" href="#">
                <svg height="11" width="11">
                    <use xlink:href="#symbol-arrow-right"></use>
                </svg>
                Related link
            </a></li>
        <li><a class="preview-related-link" href="#">
                <svg height="11" width="11">
                    <use xlink:href="#symbol-arrow-right"></use>
                </svg>
                Related link
            </a></li>
    </ul>
    <div class="preview-footer pa1">
        This is the content footer
    </div>
</article>
{# Preview
 # Default template
 # @param array       article         (required)
 #      -> array    classes (optional)
 #      -> array    list    (optional)
 #          ->  string  label   (required)
 #      -> sting    footer   (required)
 #}
{%- set classes = classes|default([]) -%}
{%- if modifier_class -%}{% set classes = classes|merge([modifier_class]) %}{% endif -%}
{%- set media = medias is defined ? medias.data|first : {} -%}
{% set mediaFormats = mediaFormats is defined ? mediaFormats : [] %}

<article class="preview{{ ' ' ~ classes|default([])|join(' ') }}">
    <a href="#">
        {% include '../_elements/media.twig' with {
            'media': media,
            'classes': mediaClasses|default([]),
            'defaultFormat': defaultFormat,
            'formats': mediaFormats,
            'sizes': mediaSizes|default([])
        } only %}
        {% include '../_elements/teaser.twig' with {
            'title': title,
            'titleTag': titleTag,
            'theme': theme,
            'label': label,
            'summary': summary,
            'magazine': magazine is defined ? magazine,
        } only %}
    </a>
    <ul class="preview-related">
        {% for item in list %}
            <li><a class="preview-related-link" href="#">
                <svg height="11" width="11"><use xlink:href="#symbol-arrow-right"></use></svg>
                {{ item.label }}
            </a></li>
        {% endfor %}
    </ul>
    <div class="preview-footer pa1">
        {{ footer }}
    </div>
</article>

Source: src/styl/_components/_preview.styl, line 1

3.12 Socialbar

Description

Display a set of social buttons.

Markup
<ul class="socialbar">
    <li>
        <a class="btnIcon btnSkin-messenger" href="#" target="_blank">
            <svg height="16" width="16">
                <use xlink:href="#symbol-social-messenger"></use>
            </svg>
            <span class="mask">Messenger</span>
        </a>
    </li>
    <li>
        <a class="btnIcon btnSkin-facebook" href="#" target="_blank">
            <svg height="16" width="16">
                <use xlink:href="#symbol-social-facebook"></use>
            </svg>
            <span class="mask">Facebook</span>
        </a>
    </li>
    <li>
        <a class="btnIcon btnSkin-twitter" href="#" target="_blank">
            <svg height="16" width="16">
                <use xlink:href="#symbol-social-twitter"></use>
            </svg>
            <span class="mask">Twitter</span>
        </a>
    </li>
    <li>
        <a class="btnIcon btnSkin-linkedin" href="#" target="_blank">
            <svg height="16" width="16">
                <use xlink:href="#symbol-social-linkedin"></use>
            </svg>
            <span class="mask">LinkedIn</span>
        </a>
    </li>
    <li>
        <a class="btnIcon btnSkin-googleplus" href="#" target="_blank">
            <svg height="16" width="16">
                <use xlink:href="#symbol-social-googleplus"></use>
            </svg>
            <span class="mask">Google Plus</span>
        </a>
    </li>
    <li>
        <a class="btnIcon btnSkin-pinterest" href="#" target="_blank">
            <svg height="16" width="16">
                <use xlink:href="#symbol-social-pinterest"></use>
            </svg>
            <span class="mask">Pinterest</span>
        </a>
    </li>
    <li>
        <a class="btnIcon btnSkin-whatsapp" href="#" target="_blank">
            <svg height="16" width="16">
                <use xlink:href="#symbol-social-whatsapp"></use>
            </svg>
            <span class="mask">What's App</span>
        </a>
    </li>
    <li>
        <a class="btnIcon btnSkin-flipboard" href="#" target="_blank">
            <svg height="16" width="16">
                <use xlink:href="#symbol-social-flipboard"></use>
            </svg>
            <span class="mask">Flipboard</span>
        </a>
    </li>
    <li>
        <a class="btnIcon btnSkin-sms" href="#" target="_blank">
            <svg height="16" width="16">
                <use xlink:href="#symbol-social-sms"></use>
            </svg>
            <span class="mask">SMS</span>
        </a>
    </li>
</ul>
<ul class="socialbar">
    {% for key, name in socials %}
    <li>
        <a class="btnIcon btnSkin-{{ key }}" href="#" target="_blank">
            <svg height="16" width="16"><use xlink:href="#symbol-social-{{ key }}"></use></svg>
            <span class="mask">{{ name }}</span>
        </a>
    </li>
    {% endfor %}
</ul>

Source: src/styl/_components/_socialbar.styl, line 1

3.13 SymbolList

Description

List of links usualy used in dropdown

Markup
<ul id="" class="symbolList ">
    <li class="symbolList-item">
        <a href="#" class="symbolList-link">Dog</a>
    </li>
    <li class="symbolList-item">
        <a href="#" class="symbolList-link">
            <svg class="symbolList-symbol" height="13" width="11">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-tick"></use>
            </svg>
            Cat
        </a>
    </li>
    <li class="symbolList-item">
        <a href="#" class="symbolList-link">Lion</a>
    </li>
    <li class="symbolList-item">
        <a href="#" class="symbolList-link">Rabbit</a>
    </li>
</ul>
{%- set classes = classes|default([]) -%}
{%- if modifier_class %}{% set classes = classes|merge([modifier_class]) %}{% endif -%}
<ul id="{{ id }}" class="symbolList {{ classes|join(' ') }}">
    <li class="symbolList-item">
        <a href="#" class="symbolList-link">Dog</a>
    </li>
    <li class="symbolList-item">
        <a href="#" class="symbolList-link">
            <svg class="symbolList-symbol" height="13" width="11"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-tick"></use></svg>
            Cat
        </a>
    </li>
    <li class="symbolList-item">
        <a href="#" class="symbolList-link">Lion</a>
    </li>
    <li class="symbolList-item">
        <a href="#" class="symbolList-link">Rabbit</a>
    </li>
</ul>

Source: src/styl/_components/_symbolList.styl, line 1

3.14 Tab Panel

Description

Basic HTML structure with tab and panels

Can use .color-… helpers on list

Default open tab should be set by data-open="true" attribute.

Example

This is an example of the 1st panel

This panel is set to be open by default

This is an example of a disabled panel

This is an example of the 4th panel

Markup
<div class="tabpanel box" data-loading>
    <ul class="tabpanel-list color-default" role="tablist">
        <li class="tabpanel-list-tab" role="tab" aria-controls="tab-1">Tab 1</li>
        <li class="tabpanel-list-tab" role="tab" aria-controls="tab-2" data-open="true">Tab 2</li>
        <li class="tabpanel-list-tab" role="tab" aria-controls="tab-3" aria-disabled="true">Tab 3</li>
        <li class="tabpanel-list-tab" role="tab" aria-controls="tab-4">Tab 4</li>
    </ul>
    <div class="tabpanel-body pa1" role="tabpanel" id="tab-1">
        <p>This is an example of the 1<sup>st</sup> panel</p>
    </div>
    <div class="tabpanel-body pa1" role="tabpanel" id="tab-2" data-open="true">
        <p>This panel is set to be open by default</p>
    </div>
    <div class="tabpanel-body pa1" role="tabpanel" id="tab-3">
        <p>This is an example of a disabled panel</p>
    </div>
    <div class="tabpanel-body pa1" role="tabpanel" id="tab-4">
        <p>This is an example of the 4<sup>th</sup> panel</p>
    </div>
</div>

{%- set classes = classes|default([]) -%}
{%- if modifier_class -%}{% set classes = classes|merge([modifier_class]) %}{% endif -%}

<div class="tabpanel{{ ' ' ~ classes|join(' ') }}" data-loading>
    <ul class="tabpanel-list color-default" role="tablist">
        {% for tab in tabs -%}
            <li class="tabpanel-list-tab" role="tab" aria-controls="{{ prefixId ~ loop.index }}"{{ (tab.open) ? ' data-open="true"'|raw }}{{ (tab.disabled) ? ' aria-disabled="true"'|raw }}>{{ tab.title }}</li>
        {%- endfor %}
    </ul>
    {% block tab_panels %}
        {% for tab in tabs -%}
            <div class="tabpanel-body{{ ' ' ~ panelsClasses|default([])|join(' ') }}" role="tabpanel" id="{{ prefixId ~ loop.index }}"{{ (tab.open) ? ' data-open="true"'|raw }}>
                {{ tab.body|raw }}
            </div>
        {%- endfor %}
    {% endblock %}
</div>

Source: src/styl/_components/_tabpanel.styl, line 1

3.14.1 Fake tab Panel

Description

Same UI but it’s real navigation, with anchors and not javascript driven panels.

Current Link should be set by aria-current="page" attribute.

Example

Content of fake pannel

Markup
<div class="tabpanel box">
    <nav class="tabpanel-list color-default" role="navigation"> <a href="#" class="tabpanel-list-tab" aria-current="page">Tab 1</a> <a href="#" class="tabpanel-list-tab">Tab 2</a> <a href="#" class="tabpanel-list-tab" aria-disabled="true">Tab 3</a> <a href="#" class="tabpanel-list-tab">Tab 4</a></nav>
    <div class="tabpanel-body pa1">
        <p>Content of fake pannel</p>
    </div>
</div>

{%- set classes = classes|default([]) -%}
{%- if modifier_class -%}{% set classes = classes|merge([modifier_class]) %}{% endif -%}

<div class="tabpanel{{ ' ' ~ classes|join(' ') }}">
    <nav class="tabpanel-list color-default" role="navigation">
        {% for tab in tabs %}
            <a href="#" class="tabpanel-list-tab" {{ (tab.open) ? ' aria-current="page"'|raw }}{{ (tab.disabled) ? ' aria-disabled="true"'|raw }}>{{ tab.title }}</a>
        {%- endfor %}
    </nav>
    {% block tab_panels %}
        {% for tab in tabs -%}
            {% if tab.open %}
                <div class="tabpanel-body{{ ' ' ~ panelsClasses|default([])|join(' ') }}">
                    {{ tab.body|raw }}
                </div>
            {% endif %}
        {%- endfor %}
    {% endblock %}
</div>

Source: src/styl/_components/_tabpanel.styl, line 13

3.14.2 Tab Panel with block of cards

Markup
<div class="tabpanel box" data-loading>
    <ul class="tabpanel-list color-default" role="tablist">
        <li class="tabpanel-list-tab" role="tab" aria-controls="tabblock-1" data-open="true">Tab 1</li>
        <li class="tabpanel-list-tab" role="tab" aria-controls="tabblock-2">Tab 2</li>
        <li class="tabpanel-list-tab" role="tab" aria-controls="tabblock-3">Tab 3</li>
    </ul>
    <div class="block tabpanel-body " id="tabblock-1">
        <ul class="block-list" data-item-per-page="5">
            <li class="block-list-item">
                <a class="card" href="#">
                    <figure class="media " role="group">
                        <div class="media-wrap">
                            <img class="" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                        </div>
                    </figure>
                    <div class="teaser">
                        <p class="teaser-headline"> élections
                        </p>
                        <p class="teaser-title">Elections short title</p>
                    </div>
                </a>
            </li>
            <li class="block-list-item">
                <a class="card" href="#">
                    <figure class="media " role="group">
                        <div class="media-wrap">
                            <img class="b-lazy" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" data-src="https://img.20mn.fr/9IR7-SzgSIidHDx0YJA3Pw/120x78_bouchons-autoroute-pres-vienne-2-aout-2014" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                        </div>
                    </figure>
                    <div class="teaser">
                        <p class="teaser-headline"> élections
                        </p>
                        <p class="teaser-title">Elections short title</p>
                    </div>
                </a>
            </li>
            <li class="block-list-item">
                <a class="card" href="#">
                    <figure class="media " role="group">
                        <div class="media-wrap">
                            <img class="b-lazy" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" data-src="https://img.20mn.fr/9IR7-SzgSIidHDx0YJA3Pw/120x78_bouchons-autoroute-pres-vienne-2-aout-2014" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                        </div>
                    </figure>
                    <div class="teaser">
                        <p class="teaser-headline"> élections
                        </p>
                        <p class="teaser-title">Elections short title</p>
                    </div>
                </a>
            </li>
            <li class="block-list-item">
                <a class="card" href="#">
                    <figure class="media " role="group">
                        <div class="media-wrap">
                            <img class="" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                        </div>
                    </figure>
                    <div class="teaser">
                        <p class="teaser-headline"> élections
                        </p>
                        <p class="teaser-title">Elections short title</p>
                    </div>
                </a>
            </li>
            <li class="block-list-item">
                <a class="card" href="#">
                    <figure class="media " role="group">
                        <div class="media-wrap">
                            <img class="b-lazy" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" data-src="https://img.20mn.fr/9IR7-SzgSIidHDx0YJA3Pw/120x78_bouchons-autoroute-pres-vienne-2-aout-2014" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                        </div>
                    </figure>
                    <div class="teaser">
                        <p class="teaser-headline"> élections
                        </p>
                        <p class="teaser-title">Elections short title</p>
                    </div>
                </a>
            </li>
            <li class="block-list-item" aria-hidden="true">
                <a class="card" href="#">
                    <figure class="media " role="group">
                        <div class="media-wrap">
                            <img class="b-lazy" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" data-src="https://img.20mn.fr/9IR7-SzgSIidHDx0YJA3Pw/120x78_bouchons-autoroute-pres-vienne-2-aout-2014" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                        </div>
                    </figure>
                    <div class="teaser">
                        <p class="teaser-headline"> élections
                        </p>
                        <p class="teaser-title">Elections short title</p>
                    </div>
                </a>
            </li>
            <li class="block-list-item" aria-hidden="true">
                <a class="card" href="#">
                    <figure class="media " role="group">
                        <div class="media-wrap">
                            <img class="" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                        </div>
                    </figure>
                    <div class="teaser">
                        <p class="teaser-headline"> élections
                        </p>
                        <p class="teaser-title">Elections short title</p>
                    </div>
                </a>
            </li>
            <li class="block-list-item" aria-hidden="true">
                <a class="card" href="#">
                    <figure class="media " role="group">
                        <div class="media-wrap">
                            <img class="b-lazy" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" data-src="https://img.20mn.fr/9IR7-SzgSIidHDx0YJA3Pw/120x78_bouchons-autoroute-pres-vienne-2-aout-2014" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                        </div>
                    </figure>
                    <div class="teaser">
                        <p class="teaser-headline"> élections
                        </p>
                        <p class="teaser-title">Elections short title</p>
                    </div>
                </a>
            </li>
            <li class="block-list-item" aria-hidden="true">
                <a class="card" href="#">
                    <figure class="media " role="group">
                        <div class="media-wrap">
                            <img class="b-lazy" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" data-src="https://img.20mn.fr/9IR7-SzgSIidHDx0YJA3Pw/120x78_bouchons-autoroute-pres-vienne-2-aout-2014" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                        </div>
                    </figure>
                    <div class="teaser">
                        <p class="teaser-headline"> élections
                        </p>
                        <p class="teaser-title">Elections short title</p>
                    </div>
                </a>
            </li>
            <li class="block-list-item" aria-hidden="true">
                <a class="card" href="#">
                    <figure class="media " role="group">
                        <div class="media-wrap">
                            <img class="" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                        </div>
                    </figure>
                    <div class="teaser">
                        <p class="teaser-headline"> élections
                        </p>
                        <p class="teaser-title">Elections short title</p>
                    </div>
                </a>
            </li>
            <li class="block-list-item" aria-hidden="true">
                <a class="card" href="#">
                    <figure class="media " role="group">
                        <div class="media-wrap">
                            <img class="b-lazy" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" data-src="https://img.20mn.fr/9IR7-SzgSIidHDx0YJA3Pw/120x78_bouchons-autoroute-pres-vienne-2-aout-2014" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                        </div>
                    </figure>
                    <div class="teaser">
                        <p class="teaser-headline"> élections
                        </p>
                        <p class="teaser-title">Elections short title</p>
                    </div>
                </a>
            </li>
            <li class="block-list-item" aria-hidden="true">
                <a class="card" href="#">
                    <figure class="media " role="group">
                        <div class="media-wrap">
                            <img class="b-lazy" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" data-src="https://img.20mn.fr/9IR7-SzgSIidHDx0YJA3Pw/120x78_bouchons-autoroute-pres-vienne-2-aout-2014" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                        </div>
                    </figure>
                    <div class="teaser">
                        <p class="teaser-headline"> élections
                        </p>
                        <p class="teaser-title">Elections short title</p>
                    </div>
                </a>
            </li>
        </ul>
        <div class="block-footer">
            <span class="float-left">Exemple of footer</span>
            <div class="pager float-right" role="navigation" aria-label="Pagination">
                <button class="pager-prev" disabled="disabled">
                    <svg height="13" width="13">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-arrow-left"></use>
                    </svg>
                    <span class="mask">Previous</span>
                </button>
                <span class="pager-count">
                    <span class="pager-current">1</span> on <span class="pager-max">3</span>
                </span>
                <button class="pager-next">
                    <svg height="13" width="13">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-arrow-right"></use>
                    </svg>
                    <span class="mask">Next</span>
                </button>
            </div>
        </div>
    </div>
    <div class="block tabpanel-body " id="tabblock-2">
        <ul class="block-list">
            <li class="block-list-item">
                <a class="card" href="#">
                    <figure class="media " role="group">
                        <div class="media-wrap">
                            <img class="" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                        </div>
                    </figure>
                    <div class="teaser">
                        <p class="teaser-headline"> élections
                        </p>
                        <p class="teaser-title">Elections short title</p>
                    </div>
                </a>
            </li>
            <li class="block-list-item">
                <a class="card" href="#">
                    <figure class="media " role="group">
                        <div class="media-wrap">
                            <img class="b-lazy" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" data-src="https://img.20mn.fr/9IR7-SzgSIidHDx0YJA3Pw/120x78_bouchons-autoroute-pres-vienne-2-aout-2014" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                        </div>
                    </figure>
                    <div class="teaser">
                        <p class="teaser-headline"> élections
                        </p>
                        <p class="teaser-title">Elections short title</p>
                    </div>
                </a>
            </li>
            <li class="block-list-item">
                <a class="card" href="#">
                    <figure class="media " role="group">
                        <div class="media-wrap">
                            <img class="b-lazy" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" data-src="https://img.20mn.fr/9IR7-SzgSIidHDx0YJA3Pw/120x78_bouchons-autoroute-pres-vienne-2-aout-2014" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                        </div>
                    </figure>
                    <div class="teaser">
                        <p class="teaser-headline"> élections
                        </p>
                        <p class="teaser-title">Elections short title</p>
                    </div>
                </a>
            </li>
        </ul>
        <div class="block-footer">
            <span class="float-left">Exemple of footer</span>
        </div>
    </div>
    <div class="block tabpanel-body " id="tabblock-3">
        <ul class="block-list">
            <li class="block-list-item">
                <a class="card" href="#">
                    <figure class="media " role="group">
                        <div class="media-wrap">
                            <img class="" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                        </div>
                    </figure>
                    <div class="teaser">
                        <p class="teaser-headline"> élections
                        </p>
                        <p class="teaser-title">Elections short title</p>
                    </div>
                </a>
            </li>
            <li class="block-list-item">
                <a class="card" href="#">
                    <figure class="media " role="group">
                        <div class="media-wrap">
                            <img class="b-lazy" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" data-src="https://img.20mn.fr/9IR7-SzgSIidHDx0YJA3Pw/120x78_bouchons-autoroute-pres-vienne-2-aout-2014" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                        </div>
                    </figure>
                    <div class="teaser">
                        <p class="teaser-headline"> élections
                        </p>
                        <p class="teaser-title">Elections short title</p>
                    </div>
                </a>
            </li>
            <li class="block-list-item">
                <a class="card" href="#">
                    <figure class="media " role="group">
                        <div class="media-wrap">
                            <img class="b-lazy" width="120" height="78" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='78'%3E%3C/svg%3E" data-src="https://img.20mn.fr/9IR7-SzgSIidHDx0YJA3Pw/120x78_bouchons-autoroute-pres-vienne-2-aout-2014" alt="Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP" />
                        </div>
                    </figure>
                    <div class="teaser">
                        <p class="teaser-headline"> élections
                        </p>
                        <p class="teaser-title">Elections short title</p>
                    </div>
                </a>
            </li>
        </ul>
        <div class="block-footer">
            <span class="float-left">Exemple of footer</span>
        </div>
    </div>
</div>
{% extends 'tabpanel.twig' %}

{% block tab_panels %}
    {% for tab in tabs -%}
        {% embed 'block-list-with-cards.twig' with tab.body|merge({
            id: prefixId ~ loop.index,
            lazyloadImg: true,
        }) only %}
            {% block block_classes 'tabpanel-body ' ~ parent() %}
            {% block block_attribute %}
                id="{{ id }}"
                {{ tab.open ? ' data-open="true"' }}
                {{ parent() }}
            {% endblock %}
            {% block block_header '' %}
        {% endembed %}
    {%- endfor %}
{% endblock %}

Source: src/styl/_components/_tabpanel.styl, line 24