Joran design system

Promo List 

<div class="o-container o-container--large c-promo-list">
    <h2 class="u-visually-hidden">Données mises en évidences</h2>
    <ul class="c-promo-list__grid">

        <li class="c-promo-list__grid-item">
            <article class="o-card-link c-promo-card">

                <div class="c-promo-card__col-left">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M8.2 11.8L19 .9m0 0l-6.4 18c-.1.3-.4.4-.7.3l-.3-.3-3.4-7-6.9-3.6C1 8.2.9 7.9 1 7.6c.1-.1.1-.2.3-.3L19 .9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                </div>

                <div class="c-promo-card__col-right o-stack o-stack--small">
                    <header class="c-promo-card__header">
                        <h3>400</h3>
                    </header>
                    <div class="c-promo-card__content">
                        Nombre de visiteurs moyen par jour
                    </div>

                </div>
            </article>

        </li>

        <li class="c-promo-list__grid-item">
            <article class="o-card-link c-promo-card">

                <div class="c-promo-card__col-left">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M8.2 11.8L19 .9m0 0l-6.4 18c-.1.3-.4.4-.7.3l-.3-.3-3.4-7-6.9-3.6C1 8.2.9 7.9 1 7.6c.1-.1.1-.2.3-.3L19 .9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                </div>

                <div class="c-promo-card__col-right o-stack o-stack--small">
                    <header class="c-promo-card__header">
                        <h3>Des images !</h3>
                    </header>
                    <div class="c-promo-card__content">
                        Il est possible de mettre des images
                    </div>

                    <div class="c-promo-card__link">
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Des images !</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>

                </div>
            </article>

        </li>

        <li class="c-promo-list__grid-item">
            <article class="o-card-link c-promo-card">

                <div class="c-promo-card__col-left">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M8.2 11.8L19 .9m0 0l-6.4 18c-.1.3-.4.4-.7.3l-.3-.3-3.4-7-6.9-3.6C1 8.2.9 7.9 1 7.6c.1-.1.1-.2.3-.3L19 .9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                </div>

                <div class="c-promo-card__col-right o-stack o-stack--small">
                    <header class="c-promo-card__header">
                        <h3>32 kg</h3>
                    </header>
                    <div class="c-promo-card__content">
                        le poid du jambon au concours du comptoire du Nord Vaudois
                    </div>

                    <div class="c-promo-card__link">
                        <a href="http://marilyne.biz" class="c-button c-button--transparent-alt o-card-link__link"><span>lire la suite<span class="u-visually-hidden"> de le poid du jambon au concours du comptoire du Nord Vaudois</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>

                </div>
            </article>

        </li>

        <li class="c-promo-list__grid-item">
            <article class="o-card-link c-promo-card">

                <div class="c-promo-card__col-right o-stack o-stack--small">
                    <header class="c-promo-card__header">
                        <h3>5&#39;000&#39;000</h3>
                    </header>
                    <div class="c-promo-card__content">
                        fourmis rouges
                    </div>

                </div>
            </article>

        </li>

        <li class="c-promo-list__grid-item">
            <article class="o-card-link c-promo-card">

                <div class="c-promo-card__col-left">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M8.2 11.8L19 .9m0 0l-6.4 18c-.1.3-.4.4-.7.3l-.3-.3-3.4-7-6.9-3.6C1 8.2.9 7.9 1 7.6c.1-.1.1-.2.3-.3L19 .9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                </div>

                <div class="c-promo-card__col-right o-stack o-stack--small">
                    <header class="c-promo-card__header">
                        <h3>1</h3>
                    </header>
                    <div class="c-promo-card__content">
                        Pour les gouverner tous
                    </div>

                    <div class="c-promo-card__link">
                        <a href="http://waldo.org" class="c-button c-button--transparent-alt o-card-link__link"><span>lire la suite<span class="u-visually-hidden"> de Pour les gouverner tous</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>

                </div>
            </article>

        </li>

        <li class="c-promo-list__grid-item">
            <article class="o-card-link c-promo-card">

                <div class="c-promo-card__col-left">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M8.2 11.8L19 .9m0 0l-6.4 18c-.1.3-.4.4-.7.3l-.3-.3-3.4-7-6.9-3.6C1 8.2.9 7.9 1 7.6c.1-.1.1-.2.3-.3L19 .9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                </div>

                <div class="c-promo-card__col-right o-stack o-stack--small">
                    <header class="c-promo-card__header">
                        <h3>7 milliards</h3>
                    </header>
                    <div class="c-promo-card__content">
                        Population mondiale
                    </div>

                    <div class="c-promo-card__link">
                        <a href="https://alana.name" class="c-button c-button--transparent-alt o-card-link__link"><span>lire la suite<span class="u-visually-hidden"> de 7 milliards</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>

                </div>
            </article>

        </li>

        <li class="c-promo-list__grid-item">
            <article class="o-card-link c-promo-card">

                <div class="c-promo-card__col-right o-stack o-stack--small">
                    <header class="c-promo-card__header">
                        <h3>1000 mots</h3>
                    </header>
                    <div class="c-promo-card__content">
                        Curabitur auctor urna magna, eget ultrices lacus semper et. Nunc at nulla hendrerit, tincidunt erat vel, feugiat tortor. Nam iaculis nisi ut felis rutrum blandit. Maecenas rutrum condimentum erat, et molestie velit viverra nec. Sed ullamcorper tortor congue purus venenatis, at porttitor felis pharetra. Sed sollicitudin id tortor vel faucibus. Donec laoreet leo a venenatis fringilla. Aliquam consequat dignissim massa eget mollis. In posuere magna ut ex pulvinar egestas.
                    </div>

                    <div class="c-promo-card__link">
                        <a href="https://coucou.com" class="c-button c-button--transparent-alt o-card-link__link"><span>lire la suite<span class="u-visually-hidden"> de 1000 mots</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>

                </div>
            </article>

        </li>

        <li class="c-promo-list__grid-item">
            <article class="o-card-link c-promo-card">

                <div class="c-promo-card__col-left">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M8.2 11.8L19 .9m0 0l-6.4 18c-.1.3-.4.4-.7.3l-.3-.3-3.4-7-6.9-3.6C1 8.2.9 7.9 1 7.6c.1-.1.1-.2.3-.3L19 .9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                </div>

                <div class="c-promo-card__col-right o-stack o-stack--small">
                    <header class="c-promo-card__header">
                        <h3>Aliquid nostrum vitae qui.</h3>
                    </header>
                    <div class="c-promo-card__content">

                    </div>

                </div>
            </article>

        </li>

        <li class="c-promo-list__grid-item">
            <article class="o-card-link c-promo-card">

                <div class="c-promo-card__col-left">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M8.2 11.8L19 .9m0 0l-6.4 18c-.1.3-.4.4-.7.3l-.3-.3-3.4-7-6.9-3.6C1 8.2.9 7.9 1 7.6c.1-.1.1-.2.3-.3L19 .9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                </div>

                <div class="c-promo-card__col-right o-stack o-stack--small">
                    <header class="c-promo-card__header">
                        <h3></h3>
                    </header>
                    <div class="c-promo-card__content">
                        Ea et dolor ea non.
                    </div>

                </div>
            </article>

        </li>

    </ul>
</div>
 
<div class="o-container o-container--large c-promo-list">
  <h2 class="u-visually-hidden">{{ title }}</h2>
  <ul class="c-promo-list__grid">
    {% for promo in promos %}
      <li class="c-promo-list__grid-item">
        {% render '@promo-card', promo %}
      </li>
    {% endfor %}
  </ul>
</div>
 
{
  "title": "Données mises en évidences",
  "promos": [
    {
      "title": "400",
      "text": "Nombre de visiteurs moyen par jour",
      "image": {
        "src": "https://source.unsplash.com/500x500?panel",
        "alt": "ipsam alias et"
      }
    },
    {
      "title": "Des images !",
      "text": "Il est possible de mettre des images",
      "image": {
        "src": "https://source.unsplash.com/500x500?Mouse",
        "alt": "eos culpa qui"
      },
      "button": {
        "text": "Lire la suite",
        "hiddentext": "de Des images !",
        "styleModifier": "o-card-link__link"
      }
    },
    {
      "title": "32 kg",
      "text": "le poid du jambon au concours du comptoire du Nord Vaudois",
      "image": {
        "src": "https://source.unsplash.com/500x500?Alabama",
        "alt": "veritatis odit suscipit"
      },
      "button": {
        "text": "lire la suite",
        "hiddentext": "de le poid du jambon au concours du comptoire du Nord Vaudois",
        "url": "http://marilyne.biz",
        "styleModifier": "o-card-link__link"
      }
    },
    {
      "title": "5'000'000",
      "text": "fourmis rouges"
    },
    {
      "title": "1",
      "text": "Pour les gouverner tous",
      "image": {
        "src": "https://source.unsplash.com/500x500?Baby",
        "alt": "non facilis ipsam"
      },
      "button": {
        "text": "lire la suite",
        "hiddentext": "de Pour les gouverner tous",
        "url": "http://waldo.org",
        "styleModifier": "o-card-link__link"
      }
    },
    {
      "title": "7 milliards",
      "text": "Population mondiale",
      "image": {
        "src": "https://source.unsplash.com/500x500?Soft",
        "alt": "voluptatibus nisi excepturi"
      },
      "button": {
        "text": "lire la suite",
        "hiddentext": "de 7 milliards",
        "url": "https://alana.name",
        "styleModifier": "o-card-link__link"
      }
    },
    {
      "title": "1000 mots",
      "text": "Curabitur auctor urna magna, eget ultrices lacus semper et. Nunc at nulla hendrerit, tincidunt erat vel, feugiat tortor. Nam iaculis nisi ut felis rutrum blandit. Maecenas rutrum condimentum erat, et molestie velit viverra nec. Sed ullamcorper tortor congue purus venenatis, at porttitor felis pharetra. Sed sollicitudin id tortor vel faucibus. Donec laoreet leo a venenatis fringilla. Aliquam consequat dignissim massa eget mollis. In posuere magna ut ex pulvinar egestas.",
      "button": {
        "text": "lire la suite",
        "hiddentext": "de 1000 mots",
        "url": "https://coucou.com",
        "styleModifier": "o-card-link__link"
      }
    },
    {
      "title": "Aliquid nostrum vitae qui.",
      "image": {
        "src": "https://source.unsplash.com/500x500?Metal",
        "alt": "et officiis dolorem"
      }
    },
    {
      "text": "Ea et dolor ea non.",
      "image": {
        "src": "https://source.unsplash.com/500x500?plum",
        "alt": "eum reiciendis ipsam"
      }
    }
  ]
}
  • Content: 
    /* ==========================================================================
   # _settings.promo-list.css
   ========================================================================== */

.c-promo-list {
  @apply
    rounded
    bg-primary
    text-white
    ;
}

.c-promo-list__grid {
  @apply
    flex
    flex-col
    flex-wrap
    md:flex-row
  ;

  @media print {
    @apply flex-row;
  }
}

.c-promo-list__grid-item {
  @apply
    md:w-1/2
    p-4
    ;

  @media print {
    @apply w-1/2;
  }
}
  • URL: /components/raw/promo-list/_components.promo-list.css
  • Filesystem Path: src/components/04-Components/promo/promo-list/_components.promo-list.css
  • Size: 504 Bytes

No notes defined.