<div class="o-container o-stack o-stack--big c-result-list">
    <h2 class="c-search-result-list__heading">Résultats de la recherche</h2>

    <ol class="o-stack">

        <li>
            <article class="c-search-result-item">
                <h3 class="c-search-result-item__title"><a href="#nowhere">aut error illo</a></h3>
                <div class="c-search-result-item__content">Nisi enim quo. Necessitatibus in quos cumque nisi. Ab alias quod et quo. Reprehenderit numquam tempora numquam magni eos alias pariatur odit vitae. Debitis aut nam dolores voluptatem voluptatibus.</div>
                <footer class="c-search-result-item__breadcrumb">
                    <dl>
                        <dt class="u-visually-hidden">Emplacement</dt>
                        <dd>
                            <ul class="c-search-result-item__breadcrumb-list">

                                <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                <li class="c-search-result-item__breadcrumb-item">page 3</li>

                            </ul>
                        </dd>
                    </dl>
                </footer>
            </article>
        </li>

        <li>
            <article class="c-search-result-item">
                <h3 class="c-search-result-item__title"><a href="#nowhere">ex at ipsa</a></h3>
                <div class="c-search-result-item__content">Recusandae nostrum dicta eaque. Ipsum quae delectus eum quo culpa. Debitis fugit est. Suscipit ea quam impedit. Ducimus illo aperiam perferendis non ut aut repudiandae. Id cupiditate aperiam alias.</div>
                <footer class="c-search-result-item__breadcrumb">
                    <dl>
                        <dt class="u-visually-hidden">Emplacement</dt>
                        <dd>
                            <ul class="c-search-result-item__breadcrumb-list">

                                <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                <li class="c-search-result-item__breadcrumb-item">page 3</li>

                            </ul>
                        </dd>
                    </dl>
                </footer>
            </article>
        </li>

        <li>
            <article class="c-search-result-item">
                <h3 class="c-search-result-item__title"><a href="#nowhere">libero et sed</a></h3>
                <div class="c-search-result-item__content">Libero incidunt eum fuga ut consequuntur rerum. Aut et quasi qui necessitatibus. Sit omnis eius quis numquam. Est omnis aut.</div>
                <footer class="c-search-result-item__breadcrumb">
                    <dl>
                        <dt class="u-visually-hidden">Emplacement</dt>
                        <dd>
                            <ul class="c-search-result-item__breadcrumb-list">

                                <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                <li class="c-search-result-item__breadcrumb-item">page 3</li>

                            </ul>
                        </dd>
                    </dl>
                </footer>
            </article>
        </li>

        <li>
            <article class="c-search-result-item">
                <h3 class="c-search-result-item__title"><a href="#nowhere">qui dolorum eius</a></h3>
                <div class="c-search-result-item__content">Doloremque vero recusandae. Molestias aliquid in quia iusto debitis voluptatum.</div>
                <footer class="c-search-result-item__breadcrumb">
                    <dl>
                        <dt class="u-visually-hidden">Emplacement</dt>
                        <dd>
                            <ul class="c-search-result-item__breadcrumb-list">

                                <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                <li class="c-search-result-item__breadcrumb-item">page 3</li>

                            </ul>
                        </dd>
                    </dl>
                </footer>
            </article>
        </li>

        <li>
            <article class="c-search-result-item">
                <h3 class="c-search-result-item__title"><a href="#nowhere">a nostrum perferendis</a></h3>
                <div class="c-search-result-item__content">Facere rerum dolorum. Non est deserunt et quis placeat non. Eum quidem minus ab. Minus cupiditate facere ullam a.</div>
                <footer class="c-search-result-item__breadcrumb">
                    <dl>
                        <dt class="u-visually-hidden">Emplacement</dt>
                        <dd>
                            <ul class="c-search-result-item__breadcrumb-list">

                                <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                <li class="c-search-result-item__breadcrumb-item">page 3</li>

                            </ul>
                        </dd>
                    </dl>
                </footer>
            </article>
        </li>

        <li>
            <article class="c-search-result-item">
                <h3 class="c-search-result-item__title"><a href="#nowhere">corporis quae optio</a></h3>
                <div class="c-search-result-item__content">Sint voluptatum ducimus. Tempora odit dolore. Perferendis consequuntur delectus consequatur.</div>
                <footer class="c-search-result-item__breadcrumb">
                    <dl>
                        <dt class="u-visually-hidden">Emplacement</dt>
                        <dd>
                            <ul class="c-search-result-item__breadcrumb-list">

                                <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                <li class="c-search-result-item__breadcrumb-item">page 3</li>

                            </ul>
                        </dd>
                    </dl>
                </footer>
            </article>
        </li>

        <li>
            <article class="c-search-result-item">
                <h3 class="c-search-result-item__title"><a href="#nowhere">ut corrupti ipsa</a></h3>
                <div class="c-search-result-item__content">Esse et ut sunt in ut sit repudiandae perspiciatis. Dolor sed aut vel autem ex. Inventore molestias quo corrupti nisi molestiae. Temporibus officia exercitationem quis quidem est sapiente. Dignissimos doloremque eligendi error voluptatem natus impedit est pariatur voluptates.</div>
                <footer class="c-search-result-item__breadcrumb">
                    <dl>
                        <dt class="u-visually-hidden">Emplacement</dt>
                        <dd>
                            <ul class="c-search-result-item__breadcrumb-list">

                                <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                <li class="c-search-result-item__breadcrumb-item">page 3</li>

                            </ul>
                        </dd>
                    </dl>
                </footer>
            </article>
        </li>

        <li>
            <article class="c-search-result-item">
                <h3 class="c-search-result-item__title"><a href="#nowhere">ut ut nam</a></h3>
                <div class="c-search-result-item__content">Velit cupiditate a est quis qui vel sapiente quia excepturi. Est explicabo laboriosam adipisci tempora. Facere reiciendis sunt maiores ea error cupiditate voluptates distinctio impedit. Non architecto quis. Aut perspiciatis unde necessitatibus.</div>
                <footer class="c-search-result-item__breadcrumb">
                    <dl>
                        <dt class="u-visually-hidden">Emplacement</dt>
                        <dd>
                            <ul class="c-search-result-item__breadcrumb-list">

                                <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                <li class="c-search-result-item__breadcrumb-item">page 3</li>

                            </ul>
                        </dd>
                    </dl>
                </footer>
            </article>
        </li>

        <li>
            <article class="c-search-result-item">
                <h3 class="c-search-result-item__title"><a href="#nowhere">eos magni et</a></h3>
                <div class="c-search-result-item__content">Pariatur debitis quos reprehenderit voluptates quo ipsum quisquam. Deserunt enim eum quisquam aliquid. Enim incidunt voluptatem odit dolorum fuga vel voluptate iusto. Voluptate molestias porro quia architecto. Vel id aut commodi eius ut et sit. Similique hic provident non beatae veritatis voluptatibus voluptatem fuga.</div>
                <footer class="c-search-result-item__breadcrumb">
                    <dl>
                        <dt class="u-visually-hidden">Emplacement</dt>
                        <dd>
                            <ul class="c-search-result-item__breadcrumb-list">

                                <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                <li class="c-search-result-item__breadcrumb-item">page 3</li>

                            </ul>
                        </dd>
                    </dl>
                </footer>
            </article>
        </li>

        <li>
            <article class="c-search-result-item">
                <h3 class="c-search-result-item__title"><a href="#nowhere">et vitae vitae</a></h3>
                <div class="c-search-result-item__content">Perferendis unde esse excepturi eum in non delectus doloribus iure. A iusto eius iste ab nisi sequi veniam delectus ipsam. Doloremque fuga omnis voluptatem sequi animi voluptas et. Modi autem et optio. Accusantium ipsam consequatur qui atque libero cumque. Et non et molestiae.</div>
                <footer class="c-search-result-item__breadcrumb">
                    <dl>
                        <dt class="u-visually-hidden">Emplacement</dt>
                        <dd>
                            <ul class="c-search-result-item__breadcrumb-list">

                                <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                <li class="c-search-result-item__breadcrumb-item">page 3</li>

                            </ul>
                        </dd>
                    </dl>
                </footer>
            </article>
        </li>

    </ol>
</div>
<div class="o-container o-stack o-stack--big c-result-list">
    <h2 class="c-search-result-list__heading">Résultats de la recherche</h2>
    
    <ol class="o-stack">
        {% for result in results %}
        <li>
            {% render '@search-result-item', result, true %}
        </li>
        {% endfor %}
    </ol>
</div>
{
  "results": [
    {
      "title": "aut error illo",
      "content": "Nisi enim quo. Necessitatibus in quos cumque nisi. Ab alias quod et quo. Reprehenderit numquam tempora numquam magni eos alias pariatur odit vitae. Debitis aut nam dolores voluptatem voluptatibus."
    },
    {
      "title": "ex at ipsa",
      "content": "Recusandae nostrum dicta eaque. Ipsum quae delectus eum quo culpa. Debitis fugit est. Suscipit ea quam impedit. Ducimus illo aperiam perferendis non ut aut repudiandae. Id cupiditate aperiam alias."
    },
    {
      "title": "libero et sed",
      "content": "Libero incidunt eum fuga ut consequuntur rerum. Aut et quasi qui necessitatibus. Sit omnis eius quis numquam. Est omnis aut."
    },
    {
      "title": "qui dolorum eius",
      "content": "Doloremque vero recusandae. Molestias aliquid in quia iusto debitis voluptatum."
    },
    {
      "title": "a nostrum perferendis",
      "content": "Facere rerum dolorum. Non est deserunt et quis placeat non. Eum quidem minus ab. Minus cupiditate facere ullam a."
    },
    {
      "title": "corporis quae optio",
      "content": "Sint voluptatum ducimus. Tempora odit dolore. Perferendis consequuntur delectus consequatur."
    },
    {
      "title": "ut corrupti ipsa",
      "content": "Esse et ut sunt in ut sit repudiandae perspiciatis. Dolor sed aut vel autem ex. Inventore molestias quo corrupti nisi molestiae. Temporibus officia exercitationem quis quidem est sapiente. Dignissimos doloremque eligendi error voluptatem natus impedit est pariatur voluptates."
    },
    {
      "title": "ut ut nam",
      "content": "Velit cupiditate a est quis qui vel sapiente quia excepturi. Est explicabo laboriosam adipisci tempora. Facere reiciendis sunt maiores ea error cupiditate voluptates distinctio impedit. Non architecto quis. Aut perspiciatis unde necessitatibus."
    },
    {
      "title": "eos magni et",
      "content": "Pariatur debitis quos reprehenderit voluptates quo ipsum quisquam. Deserunt enim eum quisquam aliquid. Enim incidunt voluptatem odit dolorum fuga vel voluptate iusto. Voluptate molestias porro quia architecto. Vel id aut commodi eius ut et sit. Similique hic provident non beatae veritatis voluptatibus voluptatem fuga."
    },
    {
      "title": "et vitae vitae",
      "content": "Perferendis unde esse excepturi eum in non delectus doloribus iure. A iusto eius iste ab nisi sequi veniam delectus ipsam. Doloremque fuga omnis voluptatem sequi animi voluptas et. Modi autem et optio. Accusantium ipsam consequatur qui atque libero cumque. Et non et molestiae."
    }
  ]
}
  • Content:
    /* ==========================================================================
       # _components.search-result-list
       ========================================================================== */
    
    .c-search-result-list__heading {
      @extend %h1;
    
      @apply
        text-black
        mb-4
        md:mb-8
        lg:mb-16
        ;
    }
    
  • URL: /components/raw/search-result-list/_components.search-result-list.css
  • Filesystem Path: src/components/04-Components/search/search-result-list/_components.search-result-list.css
  • Size: 311 Bytes

No notes defined.