Foehn Design System

Faq 

<h2 class="sr-only">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-Vac...">Vacuus balbus alioqui tendo bos spes. ?</a></li>

    <li><a href="#faq-Cla...">Claudeo abbas cogo crebro quod ducimus amor. ?</a></li>

    <li><a href="#faq-Cru...">Crustulum atque abutor quo sursum voluptatibus delego audeo. ?</a></li>

    <li><a href="#faq-Deg...">Degusto cado vapulus sequi ipsam crur carus cultellus denuncio praesentium. ?</a></li>

    <li><a href="#faq-Cam...">Campana averto tot vesco aspernatur. ?</a></li>

    <li><a href="#faq-Abu...">Abundans denuo trepide. ?</a></li>

    <li><a href="#faq-Ver...">Versus trans crur libero cura accedo quos verumtamen approbo ratione. ?</a></li>

    <li><a href="#faq-Eaq...">Eaque vinitor sapiente. ?</a></li>

    <li><a href="#faq-Tab...">Tabella minus vado terra adfero uterque assumenda auctor vis. ?</a></li>

    <li><a href="#faq-Utr...">Utroque dedecor a victoria vindico volup adfero denuncio. ?</a></li>

</ul>

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

<article id="faq-Vac...">
    <h4>Vacuus balbus alioqui tendo bos spes. xx</h4>
    <p>Clam solio trado trepide constans utrum minima amplitudo audeo vinculum. Quia barba decipio vilitas vester aequus velum similique suus. Cultellus asper crustulum tabesco cito qui.
        Abeo voluntarius creta cenaculum aranea allatus deserunt demens. Considero adeo velum ustulo nulla deputo corroboro decor. Degusto tenuis complectus.
        Totus contra minima defendo corona totidem. Paulatim cito trado sonitus clamo admoveo. Sint rem quis deserunt ut deprecator iusto vito saepe.</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">Laverna Harris</dd>
        </dl>
        <p>
            <a href="#" class="btn btn-secondary">Haut <span class="fas fa-chevron-up"></span></a>
        </p>
    </footer>
</article>

<article id="faq-Cla...">
    <h4>Claudeo abbas cogo crebro quod ducimus amor. xx</h4>
    <p>Calco tabella perspiciatis credo coepi concedo chirographum addo. Comedo peior tui combibo credo. Cubitum cunae copia unde caput cetera delego.
        Cariosus carus cunae. Depromo conitor subnecto turba ater aestivus termes taceo. Pectus defendo perspiciatis tabula tergiversatio admiratio arcesso aliquam.
        Usitas non decor tui. Tempora bonus adeo ratione cornu necessitatibus vita cultellus cervus. Comes arcus voveo solio talis deludo confugo.</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">Freda Hand</dd>
        </dl>
        <p>
            <a href="#" class="btn btn-secondary">Haut <span class="fas fa-chevron-up"></span></a>
        </p>
    </footer>
</article>

<article id="faq-Cru...">
    <h4>Crustulum atque abutor quo sursum voluptatibus delego audeo. xx</h4>
    <p>Minima sum sumptus. Caste tabgo vespillo. Una deludo similique thesaurus thermae anser.
        Dolorum deserunt causa trepide conduco circumvenio catena minima vulticulus. Vallum vilitas consequatur. Repudiandae comparo tego cohibeo qui alioqui coniecto contra custodia.
        Valeo angelus varius ancilla toties vespillo usitas. Tempora error carus aequus corrupti audentia. Substantia optio pectus subito curia carbo carpo socius adversus tepesco.</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">Keenan Nitzsche</dd>
        </dl>
        <p>
            <a href="#" class="btn btn-secondary">Haut <span class="fas fa-chevron-up"></span></a>
        </p>
    </footer>
</article>

<article id="faq-Deg...">
    <h4>Degusto cado vapulus sequi ipsam crur carus cultellus denuncio praesentium. xx</h4>
    <p>Admitto arx recusandae tremo arbitro aeneus tenuis spero annus. Vester dedecor pecto speculum tenax succedo temeritas vinco adstringo sodalitas. Defessus colligo acies tandem vitae eum.
        Centum accommodo cunabula. Corona eaque tergo cohaero. Nostrum vir termes thalassinus tero cura trado bos.
        Ter defero denique viscus absum vicinus defessus. Sunt aeneus peior paulatim. Arbor comptus subiungo.</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">Mateo Kuphal</dd>
        </dl>
        <p>
            <a href="#" class="btn btn-secondary">Haut <span class="fas fa-chevron-up"></span></a>
        </p>
    </footer>
</article>

<article id="faq-Cam...">
    <h4>Campana averto tot vesco aspernatur. xx</h4>
    <p>Blandior damnatio vomica pariatur auditor deleniti tumultus non defetiscor coniecto. Succurro usus tepesco vetus deinde denique venustas assumenda ciminatio supplanto. Dolore taceo necessitatibus adamo.
        Bene tenetur aequus facilis. Aliqua comparo adulescens vacuus temeritas adsuesco. Comminor consequuntur maxime aro occaecati desino acies similique aduro viscus.
        Circumvenio ratione nisi. Baiulus audeo iste tego bellicus. Carbo terreo caelestis.</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">Easton Graham-Schuppe</dd>
        </dl>
        <p>
            <a href="#" class="btn btn-secondary">Haut <span class="fas fa-chevron-up"></span></a>
        </p>
    </footer>
</article>

<article id="faq-Abu...">
    <h4>Abundans denuo trepide. xx</h4>
    <p>Laboriosam audeo damno claro. Acies amplexus vero arceo ciminatio odit repellendus textus. Concido decipio sollers arx animi tametsi temporibus absque celer vesica.
        Sursum surgo thymbra xiphias coerceo tabesco. Angulus venustas amo ab canonicus tremo tergeo comitatus. Angelus admitto astrum dolor maxime combibo sum.
        Comptus utique vito arguo studio basium cattus. Tredecim amplitudo tabgo summisse. Vis ver tripudio comitatus sed antiquus considero ver delinquo.</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">Neha Vandervort</dd>
        </dl>
        <p>
            <a href="#" class="btn btn-secondary">Haut <span class="fas fa-chevron-up"></span></a>
        </p>
    </footer>
</article>

<article id="faq-Ver...">
    <h4>Versus trans crur libero cura accedo quos verumtamen approbo ratione. xx</h4>
    <p>Tenuis damnatio patrocinor velum venia claustrum curia denuo dedico dignissimos. Conforto sollicito conqueror error debeo. Decumbo turbo subvenio verus trucido umerus inventore averto.
        Circumvenio arca bis pauci comprehendo antepono fugiat cultellus caterva. Comminor patior aliquam sono advenio. Temptatio aveho curis laborum cumque creptio animus.
        A strues socius doloremque annus aggero congregatio amita. Cervus curiositas anser aperte solio dedecor. Tergo tres vesper agnitio venia crustulum.</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">Jermain Weissnat</dd>
        </dl>
        <p>
            <a href="#" class="btn btn-secondary">Haut <span class="fas fa-chevron-up"></span></a>
        </p>
    </footer>
</article>

<article id="faq-Eaq...">
    <h4>Eaque vinitor sapiente. xx</h4>
    <p>Demitto comes eum teres temeritas aiunt. Ater abduco defendo voluptate spargo aedificium tergiversatio. Utilis demum auditor supellex delinquo spargo absens cimentarius audeo neque.
        Dolorum cupressus admoneo adamo usus. Sto benigne modi accusator avaritia admiratio calamitas verbera cattus. Coerceo vilitas amicitia carmen tergo valens.
        Admitto quasi aer traho beneficium. Sollicito rem vesco. Umbra est defungo laboriosam copia accusantium ipsa necessitatibus vinculum.</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">Sage White</dd>
        </dl>
        <p>
            <a href="#" class="btn btn-secondary">Haut <span class="fas fa-chevron-up"></span></a>
        </p>
    </footer>
</article>

<article id="faq-Tab...">
    <h4>Tabella minus vado terra adfero uterque assumenda auctor vis. xx</h4>
    <p>Argentum clam absque admiratio calculus apparatus arguo. Solutio corona vestigium aveho tempora. Advoco colligo currus textus.
        Coepi canto desipio coepi asperiores taceo theologus avarus sustineo cibus. Amoveo spargo censura. Strues crustulum umbra adopto dicta aperiam asperiores circumvenio.
        Speciosus adamo ciminatio delectatio subseco est. Amoveo vigor cubitum denuncio perspiciatis adaugeo acerbitas. Vestrum studio beatus sint deduco conservo.</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">Adolphus Murray</dd>
        </dl>
        <p>
            <a href="#" class="btn btn-secondary">Haut <span class="fas fa-chevron-up"></span></a>
        </p>
    </footer>
</article>

<article id="faq-Utr...">
    <h4>Utroque dedecor a victoria vindico volup adfero denuncio. xx</h4>
    <p>Tonsor voluptatibus stipes. Asperiores spiritus venio pariatur solus quam. Curo magnam agnitio sui custodia vindico utrum.
        Solutio ullus valde. Debilito angelus articulus. Vallum attonbitus comitatus suggero cubitum repellendus comedo perspiciatis.
        Clarus similique cenaculum ulterius carpo degero solvo ceno ater. Asperiores ante patruus uredo confido. Ipsa accendo comes surgo derideo.</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">General Zemlak</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": "sr-only",
  "searchForm": {
    "label": "Rechercher dans les questions",
    "titleModifier": "mt-0",
    "heading": {
      "text": "Rechercher dans les questions",
      "styleModifier": "mt-0"
    }
  },
  "faqs": [
    {
      "question": "Vacuus balbus alioqui tendo bos spes.",
      "answer": "Clam solio trado trepide constans utrum minima amplitudo audeo vinculum. Quia barba decipio vilitas vester aequus velum similique suus. Cultellus asper crustulum tabesco cito qui.\nAbeo voluntarius creta cenaculum aranea allatus deserunt demens. Considero adeo velum ustulo nulla deputo corroboro decor. Degusto tenuis complectus.\nTotus contra minima defendo corona totidem. Paulatim cito trado sonitus clamo admoveo. Sint rem quis deserunt ut deprecator iusto vito saepe.",
      "author": "Laverna Harris"
    },
    {
      "question": "Claudeo abbas cogo crebro quod ducimus amor.",
      "answer": "Calco tabella perspiciatis credo coepi concedo chirographum addo. Comedo peior tui combibo credo. Cubitum cunae copia unde caput cetera delego.\nCariosus carus cunae. Depromo conitor subnecto turba ater aestivus termes taceo. Pectus defendo perspiciatis tabula tergiversatio admiratio arcesso aliquam.\nUsitas non decor tui. Tempora bonus adeo ratione cornu necessitatibus vita cultellus cervus. Comes arcus voveo solio talis deludo confugo.",
      "author": "Freda Hand"
    },
    {
      "question": "Crustulum atque abutor quo sursum voluptatibus delego audeo.",
      "answer": "Minima sum sumptus. Caste tabgo vespillo. Una deludo similique thesaurus thermae anser.\nDolorum deserunt causa trepide conduco circumvenio catena minima vulticulus. Vallum vilitas consequatur. Repudiandae comparo tego cohibeo qui alioqui coniecto contra custodia.\nValeo angelus varius ancilla toties vespillo usitas. Tempora error carus aequus corrupti audentia. Substantia optio pectus subito curia carbo carpo socius adversus tepesco.",
      "author": "Keenan Nitzsche"
    },
    {
      "question": "Degusto cado vapulus sequi ipsam crur carus cultellus denuncio praesentium.",
      "answer": "Admitto arx recusandae tremo arbitro aeneus tenuis spero annus. Vester dedecor pecto speculum tenax succedo temeritas vinco adstringo sodalitas. Defessus colligo acies tandem vitae eum.\nCentum accommodo cunabula. Corona eaque tergo cohaero. Nostrum vir termes thalassinus tero cura trado bos.\nTer defero denique viscus absum vicinus defessus. Sunt aeneus peior paulatim. Arbor comptus subiungo.",
      "author": "Mateo Kuphal"
    },
    {
      "question": "Campana averto tot vesco aspernatur.",
      "answer": "Blandior damnatio vomica pariatur auditor deleniti tumultus non defetiscor coniecto. Succurro usus tepesco vetus deinde denique venustas assumenda ciminatio supplanto. Dolore taceo necessitatibus adamo.\nBene tenetur aequus facilis. Aliqua comparo adulescens vacuus temeritas adsuesco. Comminor consequuntur maxime aro occaecati desino acies similique aduro viscus.\nCircumvenio ratione nisi. Baiulus audeo iste tego bellicus. Carbo terreo caelestis.",
      "author": "Easton Graham-Schuppe"
    },
    {
      "question": "Abundans denuo trepide.",
      "answer": "Laboriosam audeo damno claro. Acies amplexus vero arceo ciminatio odit repellendus textus. Concido decipio sollers arx animi tametsi temporibus absque celer vesica.\nSursum surgo thymbra xiphias coerceo tabesco. Angulus venustas amo ab canonicus tremo tergeo comitatus. Angelus admitto astrum dolor maxime combibo sum.\nComptus utique vito arguo studio basium cattus. Tredecim amplitudo tabgo summisse. Vis ver tripudio comitatus sed antiquus considero ver delinquo.",
      "author": "Neha Vandervort"
    },
    {
      "question": "Versus trans crur libero cura accedo quos verumtamen approbo ratione.",
      "answer": "Tenuis damnatio patrocinor velum venia claustrum curia denuo dedico dignissimos. Conforto sollicito conqueror error debeo. Decumbo turbo subvenio verus trucido umerus inventore averto.\nCircumvenio arca bis pauci comprehendo antepono fugiat cultellus caterva. Comminor patior aliquam sono advenio. Temptatio aveho curis laborum cumque creptio animus.\nA strues socius doloremque annus aggero congregatio amita. Cervus curiositas anser aperte solio dedecor. Tergo tres vesper agnitio venia crustulum.",
      "author": "Jermain Weissnat"
    },
    {
      "question": "Eaque vinitor sapiente.",
      "answer": "Demitto comes eum teres temeritas aiunt. Ater abduco defendo voluptate spargo aedificium tergiversatio. Utilis demum auditor supellex delinquo spargo absens cimentarius audeo neque.\nDolorum cupressus admoneo adamo usus. Sto benigne modi accusator avaritia admiratio calamitas verbera cattus. Coerceo vilitas amicitia carmen tergo valens.\nAdmitto quasi aer traho beneficium. Sollicito rem vesco. Umbra est defungo laboriosam copia accusantium ipsa necessitatibus vinculum.",
      "author": "Sage White"
    },
    {
      "question": "Tabella minus vado terra adfero uterque assumenda auctor vis.",
      "answer": "Argentum clam absque admiratio calculus apparatus arguo. Solutio corona vestigium aveho tempora. Advoco colligo currus textus.\nCoepi canto desipio coepi asperiores taceo theologus avarus sustineo cibus. Amoveo spargo censura. Strues crustulum umbra adopto dicta aperiam asperiores circumvenio.\nSpeciosus adamo ciminatio delectatio subseco est. Amoveo vigor cubitum denuncio perspiciatis adaugeo acerbitas. Vestrum studio beatus sint deduco conservo.",
      "author": "Adolphus Murray"
    },
    {
      "question": "Utroque dedecor a victoria vindico volup adfero denuncio.",
      "answer": "Tonsor voluptatibus stipes. Asperiores spiritus venio pariatur solus quam. Curo magnam agnitio sui custodia vindico utrum.\nSolutio ullus valde. Debilito angelus articulus. Vallum attonbitus comitatus suggero cubitum repellendus comedo perspiciatis.\nClarus similique cenaculum ulterius carpo degero solvo ceno ater. Asperiores ante patruus uredo confido. Ipsa accendo comes surgo derideo.",
      "author": "General Zemlak"
    }
  ]
}

No notes defined.