3 Components

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

3.1 Accordion

Description

Box with a toggle content

Example

Exemple de paragraphe

Exemple de sous-entête

Exemple de paragraphe

Markup

Compiled HTML
Template

<div class="accordion box pl1 pr1 pt1" data-multiselectable="true">
    <h3 class="accordion-subhead">
        <button id="tab1" class="accordion-subhead-button" aria-controls="panel1">Entête n<sup>o</sup> 1</button>
    </h3>
    <div id="panel1" aria-labelledby="tab1" class="accordion-body">
        <p>Exemple de paragraphe</p>
        <h3 class="accordion-subhead mt1 mb1">Exemple de sous-entête</h3>
        <p>Exemple de paragraphe</p>
    </div>
    <h3 class="accordion-subhead">
        <button id="tab2" class="accordion-subhead-button" aria-controls="panel2">Entête n<sup>o</sup> 2</button>
    </h3>
    <div id="panel2" aria-labelledby="tab2" class="accordion-body">
        <p>Exemple de paragraphe</p>
    </div>
    <h3 class="accordion-subhead">
        <button id="tab3" class="accordion-subhead-button" aria-controls="panel3">Entête n<sup>o</sup> 3</button>
    </h3>
    <div id="panel3" aria-labelledby="tab3" class="accordion-body">
        <p>Exemple de paragraphe</p>
    </div>
    <h3 class="accordion-subhead">
        <button id="tab4" class="accordion-subhead-button" aria-controls="panel4">Entête n<sup>o</sup> 4</button>
    </h3>
    <div id="panel4" aria-labelledby="tab4" class="accordion-body">
        <p>Exemple de paragraphe</p>
    </div>
</div>

<div class="accordion box pl1 pr1 pt1" data-multiselectable="true">
    <h3 class="accordion-subhead">
        <button id="tab1" class="accordion-subhead-button" aria-controls="panel1">Entête n<sup>o</sup> 1</button>
    </h3>
    <div id="panel1" aria-labelledby="tab1" class="accordion-body">
        <p>Exemple de paragraphe</p>
        <h3 class="accordion-subhead mt1 mb1">Exemple de sous-entête</h3>
        <p>Exemple de paragraphe</p>
    </div>
    <h3 class="accordion-subhead">
        <button id="tab2" class="accordion-subhead-button" aria-controls="panel2" >Entête n<sup>o</sup> 2</button>
    </h3>
    <div id="panel2" aria-labelledby="tab2" class="accordion-body">
        <p>Exemple de paragraphe</p>
    </div>
    <h3 class="accordion-subhead">
        <button id="tab3" class="accordion-subhead-button" aria-controls="panel3" >Entête n<sup>o</sup> 3</button>
    </h3>
    <div id="panel3" aria-labelledby="tab3" class="accordion-body">
        <p>Exemple de paragraphe</p>
    </div>
    <h3 class="accordion-subhead">
        <button id="tab4" class="accordion-subhead-button" aria-controls="panel4">Entête n<sup>o</sup> 4</button>
    </h3>
    <div id="panel4" aria-labelledby="tab4" class="accordion-body">
        <p>Exemple de paragraphe</p>
    </div>
</div>

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

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

Example of a block footer

Modifiers

.block-default

default theme color

Example of a block title

Example of a block content

Example of a block footer

.block-sport

default theme color

Example of a block title

Example of a block content

Example of a block footer

Markup

Compiled HTML
Template

<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.2.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

Compiled HTML
Template

<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.2.2 Block List with a pager

Example

Example of a block title

Exemple of footer

Markup

Compiled HTML
Template

<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.2.3 Block List can be used with article cards

Example

Example of a block title

Exemple of footer

Markup

Compiled HTML
Template

<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.3 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

Compiled HTML
Template

<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.4 Breaking News

Description

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

Example

Breaking News Important title of a new important article

Markup

Compiled HTML
Template

<section class="breakingnews">
    <a class="breakingnews-link" href="#">
        <span class="breakingnews-link-label">
            <svg width="30" height="30">
                <use xlink:href="#symbol-flash"></use>
            </svg>Breaking News
        </span>
        <strong class="breakingnews-link-title">Important title of a new important article</strong>
    </a>
    <button class="breakingnews-close"><svg width="10" height="10">
            <use xlink:href="#symbol-cross"></use>
        </svg></button>
</section>

<section class="breakingnews" >
    <a class="breakingnews-link" href="#">
        <span class="breakingnews-link-label">
            <svg width="30" height="30"><use xlink:href="#symbol-flash"></use></svg>Breaking News
        </span>
        <strong class="breakingnews-link-title">Important title of a new important article</strong>
    </a>
    <button class="breakingnews-close"><svg width="10" height="10"><use xlink:href="#symbol-cross"></use></svg></button>
</section>

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

3.5 Card

Description

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

Default styling

Des bouchons sur l’autoroute près de Vienne le 2 août 2014 — Philippe Desmazes AFP

élections

Elections short title

Modifiers

.color-default

theme default

élections

Elections short title

.color-planet

theme planet

élections

Elections short title

.card-lined.color-default

theme default + lined style

élections

Elections short title

Markup

Compiled HTML
Template

<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.6 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

Ordered list, item 1
Ordered list, item 2
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

Compiled HTML
Template

<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.7 Dowpdown

Description

Dropdown menu

Example

Markup

Compiled HTML
Template

<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 Footer

Description

Styles for basic footer.

Example

Markup

Compiled HTML
Template

<footer class="footerbar align-center">
    <a href="#">Choix de consentement</a> <span class="footerbar-copyright">© Copyright</span> <a href="#">20&nbsp;Minutes</a><span class="fs11"> - La fréquentation de 20&nbsp;Minutes est certifiée par l’ACPM </span>
</footer>

<footer class="footerbar align-center">
    <a href="#">Choix de consentement</a> <span class="footerbar-copyright">© Copyright</span> <a href="#">20&nbsp;Minutes</a><span class="fs11"> - La fréquentation de 20&nbsp;Minutes est certifiée par l’ACPM </span>
</footer>

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

3.9 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.

Example

Markup

Compiled HTML
Template

<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.10 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

Compiled HTML
Template

<!-- 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.10.1 Demo modal trigger button

Example

Markup

Compiled HTML
Template

<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.11 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.

Example

Markup

Compiled HTML
Template

<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.12 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.

Default styling

This is the label content

This is the content title

This is the summary content

Modifiers

.preview-cover

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

This is the label content

This is the content title

This is the summary content

.preview-stretch

In a flexbox, stretch or height 100%.

This is the label content

This is the content title

This is the summary content

.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.

This is the label content

This is the content title

This is the summary content

.preview-reduced

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

This is the label content

This is the content title

This is the summary content

.preview-inline

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

This is the label content

This is the content title

This is the summary content

Markup

Compiled HTML
Template

<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.13 Socialbar

Description

Display a set of social buttons.

Example

Markup

Compiled HTML
Template

<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.14 SymbolList

Description

List of links usualy used in dropdown

Example

Markup

Compiled HTML
Template

<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.15 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

Tab 1
Tab 2
Tab 3
Tab 4

This is an example of the 1^st panel

This panel is set to be open by default

This is an example of a disabled panel

This is an example of the 4^th panel

Markup

Compiled HTML
Template

<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.15.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

Compiled HTML
Template

<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.15.2 Tab Panel with block of cards

Example

Tab 1
Tab 2
Tab 3

Exemple of footer

Markup

Compiled HTML
Template

<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

Entête no 1

Exemple de sous-entête

Entête no 2

Entête no 3

Entête no 4

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is the content title

This is the content title

This is the content title

This is the content title

This is the content title

This is the content title