Joran design system

Search Result Item 

<article class="c-search-result-item">
    <h3 class="c-search-result-item__title"><a href="#nowhere">title</a></h3>
    <div class="c-search-result-item__content">Sed commodo neque mi, et gravida velit fringilla in. Praesent ultrices pellentesque lacus eu porta. Mauris sit amet gravida eros. Mauris accumsan non lacus at suscipit. Sed eget augue finibus, convallis velit id, pulvinar leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vel lacus mi.</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>
 
<article class="c-search-result-item">
    <h3 class="c-search-result-item__title"><a href="#nowhere">{{ title }}</a></h3>
    <div class="c-search-result-item__content">{{ content | safe }}</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">
                    {% for item in breadcrumb %}
                    <li class="c-search-result-item__breadcrumb-item">{{ item.name }}</li>
                    {% endfor %}
                </ul>
            </dd>
        </dl>
    </footer>
</article>
 
{
  "title": "title",
  "content": "Sed commodo neque mi, et gravida velit fringilla in. Praesent ultrices pellentesque lacus eu porta. Mauris sit amet gravida eros. Mauris accumsan non lacus at suscipit. Sed eget augue finibus, convallis velit id, pulvinar leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vel lacus mi.",
  "breadcrumb": [
    {
      "name": "page 1"
    },
    {
      "name": "page 2"
    },
    {
      "name": "page 3"
    }
  ]
}
  • Content: 
    /* ======================================================================
   # _components.search-result-item.css
   ====================================================================== */

.c-search-result-item {
  @apply
    flex
    flex-col
    bg-white
    rounded
    p-2
    md:p-4
    lg:p-6
    ;
}

.c-search-result-item__title {
  @extend %cta;

  @apply
    text-primary-cta
    ;
}

.c-search-result-item__breadcrumb {
  @extend %caption;

  @apply
    text-gray-500
    order-first
    mb-2
    ;
}

.c-search-result-item__breadcrumb-list {
  @apply
    flex
    flex-row
    flex-wrap
  ;
}

.c-search-result-item__breadcrumb-item + .c-search-result-item__breadcrumb-item::before {
  content: ">";

  @apply
    mx-1
        ;
}
  • URL: /components/raw/search-result-item/_components.search-result-item.css
  • Filesystem Path: src/components/04-Components/search/search-result-item/_components.search-result-item.css
  • Size: 746 Bytes

No notes defined.