Faq

Ready

HTML
View
Context
Info
Notes


        
        <h2 class="visually-hidden">Foire aux questions</h2>

<div class="vd-bg-pattern-bars-gray clearfix my-3 py-4 px-3">
    <h4 class="mt-0">Rechercher dans les questions</h4>

    <form class="input-group vd-search-form-regular" action="#" role="search">
        <label class="visually-hidden" for="search-form" id="search-form-label">Rechercher dans les questions</label>
        <input id="search-form" type="text" class="form-control" placeholder="Rechercher" aria-describedby="search-form-label">
        <span class="input-group-btn">
            <button class="btn btn-dark" type="submit" aria-label="Rechercher"><i class="fas fa-search" aria-hidden="true"></i></button>
        </span>
    </form>

</div>

<h3>Questions</h3>

<ul class="vd-list-links">

    <li><a href="#faq-Odi...">Odit quia perspiciatis doloremque sapiente laborum. ?</a></li>

    <li><a href="#faq-Tot...">Totam eius eius accusantium rem praesentium a ducimus perspiciatis. ?</a></li>

    <li><a href="#faq-Adi...">Adipisci quod quia provident tempore. ?</a></li>

    <li><a href="#faq-Est...">Est reprehenderit cupiditate repellendus at ipsam. ?</a></li>

    <li><a href="#faq-Sed...">Sed provident cum quia error molestias. ?</a></li>

    <li><a href="#faq-Bla...">Blanditiis distinctio mollitia dolor recusandae iusto beatae. ?</a></li>

    <li><a href="#faq-Dol...">Dolore quo sint. ?</a></li>

    <li><a href="#faq-Con...">Consectetur quod sequi. ?</a></li>

    <li><a href="#faq-Mol...">Molestias quia tenetur velit ullam dolorum. ?</a></li>

    <li><a href="#faq-Rep...">Repellat excepturi est quo. ?</a></li>

</ul>

<h3 class="visually-hidden">Réponses</h3>

<article id="faq-Odi...">
    <h4>Odit quia perspiciatis doloremque sapiente laborum. xx</h4>
    <p>Nihil consequuntur eveniet nobis sed hic quam ratione. Quae quaerat quasi soluta dolores labore fuga sint molestiae suscipit. Alias veritatis dolor nulla quae dolores minima velit temporibus aut.
        Beatae repellendus quo similique nemo rem animi. Dicta non modi consequuntur occaecati quidem totam sit. Tempore reprehenderit delectus temporibus totam ipsam quam alias eaque nam.
        Quidem ratione eos voluptate in libero itaque. Quod provident accusantium qui ratione quasi eaque non maiores. Quas tenetur similique impedit cumque sequi omnis dolorem.</p>
    <footer>
        <dl class="row small text-secondary">
            <dt class="col-lg-1 col-sm-2">Categories</dt>
            <dd class="col-lg-11 col-sm-10">
                <a href="#">Lorem ipsum</a>,
                <a href="#">Dolor</a>,
                <a href="#">Sit amet</a>
            </dd>
            <dt class="col-lg-1 col-sm-2">Auteur</dt>
            <dd class="col-lg-11 col-sm-10">Césaire Rousseau</dd>
        </dl>
        <p>
            <a href="#" class="btn btn-secondary">Haut <span class="fas fa-chevron-up"></span></a>
        </p>
    </footer>
</article>

<article id="faq-Tot...">
    <h4>Totam eius eius accusantium rem praesentium a ducimus perspiciatis. xx</h4>
    <p>Corporis tenetur iste velit porro quos. Cum praesentium ducimus placeat ullam molestias dolor. Doloremque ratione excepturi cumque molestias voluptate eum assumenda explicabo dignissimos.
        Modi eum labore commodi ipsum odio accusantium harum at enim. Error tenetur veritatis culpa culpa. Laudantium nostrum alias unde alias mollitia laborum inventore vitae.
        Ipsam ratione culpa totam in sint excepturi quidem possimus. Laudantium explicabo quo nostrum. Eius alias beatae ratione velit nisi sed aspernatur.</p>
    <footer>
        <dl class="row small text-secondary">
            <dt class="col-lg-1 col-sm-2">Categories</dt>
            <dd class="col-lg-11 col-sm-10">
                <a href="#">Lorem ipsum</a>,
                <a href="#">Dolor</a>,
                <a href="#">Sit amet</a>
            </dd>
            <dt class="col-lg-1 col-sm-2">Auteur</dt>
            <dd class="col-lg-11 col-sm-10">Angèle Fontaine</dd>
        </dl>
        <p>
            <a href="#" class="btn btn-secondary">Haut <span class="fas fa-chevron-up"></span></a>
        </p>
    </footer>
</article>

<article id="faq-Adi...">
    <h4>Adipisci quod quia provident tempore. xx</h4>
    <p>Numquam repudiandae ipsam accusantium amet illo. Est illo odio totam in officia ea. Enim libero commodi voluptates blanditiis possimus voluptatibus.
        Ab atque repellendus ut eum laboriosam voluptas. Dolores occaecati nulla cupiditate necessitatibus labore consequuntur dolores nulla. Voluptates illo voluptas necessitatibus sint eveniet.
        Nam ratione nihil ullam porro fugit nemo fuga minus. Sed recusandae ex. Hic laudantium placeat maxime alias.</p>
    <footer>
        <dl class="row small text-secondary">
            <dt class="col-lg-1 col-sm-2">Categories</dt>
            <dd class="col-lg-11 col-sm-10">
                <a href="#">Lorem ipsum</a>,
                <a href="#">Dolor</a>,
                <a href="#">Sit amet</a>
            </dd>
            <dt class="col-lg-1 col-sm-2">Auteur</dt>
            <dd class="col-lg-11 col-sm-10">Denise Roy</dd>
        </dl>
        <p>
            <a href="#" class="btn btn-secondary">Haut <span class="fas fa-chevron-up"></span></a>
        </p>
    </footer>
</article>

<article id="faq-Est...">
    <h4>Est reprehenderit cupiditate repellendus at ipsam. xx</h4>
    <p>Dolorem veritatis sapiente amet neque unde omnis illo. Repellendus aut magnam facere tenetur. Quas recusandae id nulla odio fugiat exercitationem.
        Soluta accusamus fugit numquam corrupti minus magni at molestias. Aliquid aperiam quos repudiandae exercitationem aperiam. Explicabo quia repellat.
        Maxime fugit dolorem numquam. Magnam quod inventore iusto. Dolor excepturi veniam praesentium sint omnis reprehenderit.</p>
    <footer>
        <dl class="row small text-secondary">
            <dt class="col-lg-1 col-sm-2">Categories</dt>
            <dd class="col-lg-11 col-sm-10">
                <a href="#">Lorem ipsum</a>,
                <a href="#">Dolor</a>,
                <a href="#">Sit amet</a>
            </dd>
            <dt class="col-lg-1 col-sm-2">Auteur</dt>
            <dd class="col-lg-11 col-sm-10">Eva Barre</dd>
        </dl>
        <p>
            <a href="#" class="btn btn-secondary">Haut <span class="fas fa-chevron-up"></span></a>
        </p>
    </footer>
</article>

<article id="faq-Sed...">
    <h4>Sed provident cum quia error molestias. xx</h4>
    <p>Ipsam quod vitae. Qui a natus consequuntur sunt recusandae assumenda. Accusamus quidem autem voluptatibus aliquam velit quis odit ad.
        Dolorem necessitatibus consequuntur quaerat natus facere. Placeat aliquam et. Quibusdam quo perferendis dicta.
        Totam expedita doloremque rerum placeat. Natus rerum repellat pariatur et quo saepe incidunt qui magni. Ipsam aperiam magni.</p>
    <footer>
        <dl class="row small text-secondary">
            <dt class="col-lg-1 col-sm-2">Categories</dt>
            <dd class="col-lg-11 col-sm-10">
                <a href="#">Lorem ipsum</a>,
                <a href="#">Dolor</a>,
                <a href="#">Sit amet</a>
            </dd>
            <dt class="col-lg-1 col-sm-2">Auteur</dt>
            <dd class="col-lg-11 col-sm-10">Alcide Guillaume</dd>
        </dl>
        <p>
            <a href="#" class="btn btn-secondary">Haut <span class="fas fa-chevron-up"></span></a>
        </p>
    </footer>
</article>

<article id="faq-Bla...">
    <h4>Blanditiis distinctio mollitia dolor recusandae iusto beatae. xx</h4>
    <p>Voluptas quos quis. Minus ex reprehenderit fugiat excepturi dolorum veniam ratione sit neque. Veritatis totam error sed.
        Laboriosam ullam saepe pariatur possimus minus aut est. Voluptatem sit consectetur ratione ipsa voluptate repudiandae. Aut consectetur velit aliquid consectetur sint recusandae voluptas.
        Occaecati itaque est. Minus quia voluptatem sapiente ea quaerat suscipit sunt. Eaque corrupti voluptas nulla quidem consectetur.</p>
    <footer>
        <dl class="row small text-secondary">
            <dt class="col-lg-1 col-sm-2">Categories</dt>
            <dd class="col-lg-11 col-sm-10">
                <a href="#">Lorem ipsum</a>,
                <a href="#">Dolor</a>,
                <a href="#">Sit amet</a>
            </dd>
            <dt class="col-lg-1 col-sm-2">Auteur</dt>
            <dd class="col-lg-11 col-sm-10">Raymonde Giraud</dd>
        </dl>
        <p>
            <a href="#" class="btn btn-secondary">Haut <span class="fas fa-chevron-up"></span></a>
        </p>
    </footer>
</article>

<article id="faq-Dol...">
    <h4>Dolore quo sint. xx</h4>
    <p>Ea laboriosam laborum exercitationem et. In facilis itaque. Culpa tempora illum dolorum.
        Vitae rerum dicta consectetur aut quaerat voluptatem amet recusandae. Ex minima non repellat labore officiis odio. Doloremque sunt aspernatur reprehenderit laudantium voluptatibus veniam eaque.
        Amet eligendi rem natus. Cumque hic quis esse. Dolore perspiciatis incidunt tempore sunt laudantium.</p>
    <footer>
        <dl class="row small text-secondary">
            <dt class="col-lg-1 col-sm-2">Categories</dt>
            <dd class="col-lg-11 col-sm-10">
                <a href="#">Lorem ipsum</a>,
                <a href="#">Dolor</a>,
                <a href="#">Sit amet</a>
            </dd>
            <dt class="col-lg-1 col-sm-2">Auteur</dt>
            <dd class="col-lg-11 col-sm-10">Annette Garcia</dd>
        </dl>
        <p>
            <a href="#" class="btn btn-secondary">Haut <span class="fas fa-chevron-up"></span></a>
        </p>
    </footer>
</article>

<article id="faq-Con...">
    <h4>Consectetur quod sequi. xx</h4>
    <p>Saepe placeat nesciunt labore ipsum neque saepe voluptatem labore. Quia delectus voluptatem. Accusamus id corrupti.
        Error voluptatum voluptas repellat reprehenderit ratione quia expedita et sequi. Similique recusandae pariatur autem voluptas quia quia occaecati quas. Laudantium libero eveniet.
        Ad doloribus ut modi. Optio laborum ab beatae. Laboriosam enim culpa vitae recusandae.</p>
    <footer>
        <dl class="row small text-secondary">
            <dt class="col-lg-1 col-sm-2">Categories</dt>
            <dd class="col-lg-11 col-sm-10">
                <a href="#">Lorem ipsum</a>,
                <a href="#">Dolor</a>,
                <a href="#">Sit amet</a>
            </dd>
            <dt class="col-lg-1 col-sm-2">Auteur</dt>
            <dd class="col-lg-11 col-sm-10">Ernestine Giraud</dd>
        </dl>
        <p>
            <a href="#" class="btn btn-secondary">Haut <span class="fas fa-chevron-up"></span></a>
        </p>
    </footer>
</article>

<article id="faq-Mol...">
    <h4>Molestias quia tenetur velit ullam dolorum. xx</h4>
    <p>Omnis nostrum omnis laudantium accusantium sunt cupiditate consectetur quos. Ratione alias vero. Minima beatae accusamus debitis facere voluptates placeat quo repellendus iste.
        Rem debitis nam quasi a aliquam quia repellat natus excepturi. Maiores sint facere quibusdam veniam eum. Saepe at optio incidunt.
        Dolorem aspernatur mollitia odit. Deleniti minus tempora error aspernatur cumque esse. Magni nihil repellendus esse.</p>
    <footer>
        <dl class="row small text-secondary">
            <dt class="col-lg-1 col-sm-2">Categories</dt>
            <dd class="col-lg-11 col-sm-10">
                <a href="#">Lorem ipsum</a>,
                <a href="#">Dolor</a>,
                <a href="#">Sit amet</a>
            </dd>
            <dt class="col-lg-1 col-sm-2">Auteur</dt>
            <dd class="col-lg-11 col-sm-10">Pépin Giraud</dd>
        </dl>
        <p>
            <a href="#" class="btn btn-secondary">Haut <span class="fas fa-chevron-up"></span></a>
        </p>
    </footer>
</article>

<article id="faq-Rep...">
    <h4>Repellat excepturi est quo. xx</h4>
    <p>Facilis nihil fugit qui cupiditate consectetur eaque. Earum illum fugit quaerat magnam. Molestias vero facilis perspiciatis ullam et corporis saepe blanditiis pariatur.
        Ut cupiditate ipsum voluptate. Enim eius quibusdam dolore occaecati voluptas eum quis quae quisquam. Sed nam aspernatur temporibus ab enim.
        Error animi corrupti molestias adipisci odio occaecati. Rem vel fugit. Iste illo ab sapiente accusantium quibusdam officiis dicta.</p>
    <footer>
        <dl class="row small text-secondary">
            <dt class="col-lg-1 col-sm-2">Categories</dt>
            <dd class="col-lg-11 col-sm-10">
                <a href="#">Lorem ipsum</a>,
                <a href="#">Dolor</a>,
                <a href="#">Sit amet</a>
            </dd>
            <dt class="col-lg-1 col-sm-2">Auteur</dt>
            <dd class="col-lg-11 col-sm-10">Absalon Arnaud</dd>
        </dl>
        <p>
            <a href="#" class="btn btn-secondary">Haut <span class="fas fa-chevron-up"></span></a>
        </p>
    </footer>
</article>


        <h2{% if titleModifier %} class="{{ titleModifier }}"{% endif %}>Foire aux questions</h2>

<div class="vd-bg-pattern-bars-gray clearfix my-3 py-4 px-3">
  {% render '@search-form--regular', searchForm, true %}
</div>

<h3>Questions</h3>

<ul class="vd-list-links">
  {% for item in faqs %}
    <li><a href="#faq-{{ item.question | truncate(3) }}">{{ item.question }} ?</a></li>
  {% endfor %}
</ul>

<h3 class="visually-hidden">Réponses</h3>

{% for item in faqs %}
  {% render '@faq-item', item %}
{% endfor %}


        
            
            {
  "titleModifier": "visually-hidden",
  "searchForm": {
    "label": "Rechercher dans les questions",
    "titleModifier": "mt-0",
    "heading": {
      "text": "Rechercher dans les questions",
      "styleModifier": "mt-0"
    }
  },
  "faqs": [
    {
      "question": "Odit quia perspiciatis doloremque sapiente laborum.",
      "answer": "Nihil consequuntur eveniet nobis sed hic quam ratione. Quae quaerat quasi soluta dolores labore fuga sint molestiae suscipit. Alias veritatis dolor nulla quae dolores minima velit temporibus aut.\nBeatae repellendus quo similique nemo rem animi. Dicta non modi consequuntur occaecati quidem totam sit. Tempore reprehenderit delectus temporibus totam ipsam quam alias eaque nam.\nQuidem ratione eos voluptate in libero itaque. Quod provident accusantium qui ratione quasi eaque non maiores. Quas tenetur similique impedit cumque sequi omnis dolorem.",
      "author": "Césaire Rousseau"
    },
    {
      "question": "Totam eius eius accusantium rem praesentium a ducimus perspiciatis.",
      "answer": "Corporis tenetur iste velit porro quos. Cum praesentium ducimus placeat ullam molestias dolor. Doloremque ratione excepturi cumque molestias voluptate eum assumenda explicabo dignissimos.\nModi eum labore commodi ipsum odio accusantium harum at enim. Error tenetur veritatis culpa culpa. Laudantium nostrum alias unde alias mollitia laborum inventore vitae.\nIpsam ratione culpa totam in sint excepturi quidem possimus. Laudantium explicabo quo nostrum. Eius alias beatae ratione velit nisi sed aspernatur.",
      "author": "Angèle Fontaine"
    },
    {
      "question": "Adipisci quod quia provident tempore.",
      "answer": "Numquam repudiandae ipsam accusantium amet illo. Est illo odio totam in officia ea. Enim libero commodi voluptates blanditiis possimus voluptatibus.\nAb atque repellendus ut eum laboriosam voluptas. Dolores occaecati nulla cupiditate necessitatibus labore consequuntur dolores nulla. Voluptates illo voluptas necessitatibus sint eveniet.\nNam ratione nihil ullam porro fugit nemo fuga minus. Sed recusandae ex. Hic laudantium placeat maxime alias.",
      "author": "Denise Roy"
    },
    {
      "question": "Est reprehenderit cupiditate repellendus at ipsam.",
      "answer": "Dolorem veritatis sapiente amet neque unde omnis illo. Repellendus aut magnam facere tenetur. Quas recusandae id nulla odio fugiat exercitationem.\nSoluta accusamus fugit numquam corrupti minus magni at molestias. Aliquid aperiam quos repudiandae exercitationem aperiam. Explicabo quia repellat.\nMaxime fugit dolorem numquam. Magnam quod inventore iusto. Dolor excepturi veniam praesentium sint omnis reprehenderit.",
      "author": "Eva Barre"
    },
    {
      "question": "Sed provident cum quia error molestias.",
      "answer": "Ipsam quod vitae. Qui a natus consequuntur sunt recusandae assumenda. Accusamus quidem autem voluptatibus aliquam velit quis odit ad.\nDolorem necessitatibus consequuntur quaerat natus facere. Placeat aliquam et. Quibusdam quo perferendis dicta.\nTotam expedita doloremque rerum placeat. Natus rerum repellat pariatur et quo saepe incidunt qui magni. Ipsam aperiam magni.",
      "author": "Alcide Guillaume"
    },
    {
      "question": "Blanditiis distinctio mollitia dolor recusandae iusto beatae.",
      "answer": "Voluptas quos quis. Minus ex reprehenderit fugiat excepturi dolorum veniam ratione sit neque. Veritatis totam error sed.\nLaboriosam ullam saepe pariatur possimus minus aut est. Voluptatem sit consectetur ratione ipsa voluptate repudiandae. Aut consectetur velit aliquid consectetur sint recusandae voluptas.\nOccaecati itaque est. Minus quia voluptatem sapiente ea quaerat suscipit sunt. Eaque corrupti voluptas nulla quidem consectetur.",
      "author": "Raymonde Giraud"
    },
    {
      "question": "Dolore quo sint.",
      "answer": "Ea laboriosam laborum exercitationem et. In facilis itaque. Culpa tempora illum dolorum.\nVitae rerum dicta consectetur aut quaerat voluptatem amet recusandae. Ex minima non repellat labore officiis odio. Doloremque sunt aspernatur reprehenderit laudantium voluptatibus veniam eaque.\nAmet eligendi rem natus. Cumque hic quis esse. Dolore perspiciatis incidunt tempore sunt laudantium.",
      "author": "Annette Garcia"
    },
    {
      "question": "Consectetur quod sequi.",
      "answer": "Saepe placeat nesciunt labore ipsum neque saepe voluptatem labore. Quia delectus voluptatem. Accusamus id corrupti.\nError voluptatum voluptas repellat reprehenderit ratione quia expedita et sequi. Similique recusandae pariatur autem voluptas quia quia occaecati quas. Laudantium libero eveniet.\nAd doloribus ut modi. Optio laborum ab beatae. Laboriosam enim culpa vitae recusandae.",
      "author": "Ernestine Giraud"
    },
    {
      "question": "Molestias quia tenetur velit ullam dolorum.",
      "answer": "Omnis nostrum omnis laudantium accusantium sunt cupiditate consectetur quos. Ratione alias vero. Minima beatae accusamus debitis facere voluptates placeat quo repellendus iste.\nRem debitis nam quasi a aliquam quia repellat natus excepturi. Maiores sint facere quibusdam veniam eum. Saepe at optio incidunt.\nDolorem aspernatur mollitia odit. Deleniti minus tempora error aspernatur cumque esse. Magni nihil repellendus esse.",
      "author": "Pépin Giraud"
    },
    {
      "question": "Repellat excepturi est quo.",
      "answer": "Facilis nihil fugit qui cupiditate consectetur eaque. Earum illum fugit quaerat magnam. Molestias vero facilis perspiciatis ullam et corporis saepe blanditiis pariatur.\nUt cupiditate ipsum voluptate. Enim eius quibusdam dolore occaecati voluptas eum quis quae quisquam. Sed nam aspernatur temporibus ab enim.\nError animi corrupti molestias adipisci odio occaecati. Rem vel fugit. Iste illo ab sapiente accusantium quibusdam officiis dicta.",
      "author": "Absalon Arnaud"
    }
  ]
}

Handle: @faq
Preview:
- With layout
- Component only
Filesystem Path: src/components/03-organisms/faq/faq.html
References (2): @search-form--regular, @faq-item

No notes defined.