Joran design system

Promo Card: Image 

<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>Ceci est un titre</h3>
        </header>
        <div class="c-promo-card__content">
            Ceci est un text ou chiffre mis en évidence
        </div>

        <div class="c-promo-card__link">
            <a href="https://www.vd.ch" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de titre de l&#39;élément</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>
 
<article class="o-card-link c-promo-card{% if variantModifier %} {{ variantModifier }}{% endif %}{% if styleModifier %} {{ styleModifier }}{% endif %}">
  {% if image %}
  <div class="c-promo-card__col-left">
    {% render '@svg-mail' %}
  </div>
  {% endif %}
  <div class="c-promo-card__col-right o-stack o-stack--small">
    <header class="c-promo-card__header">
      <h3>{{ title }}</h3>
    </header>
    <div class="c-promo-card__content">
      {{ text }}
    </div>
    {% if button %}
    <div class="c-promo-card__link">
      {% render '@button--transparent-alternate-arrow-right', button, true %}
    </div>
    {% endif %}
  </div>
</article>
 
{
  "title": "Ceci est un titre",
  "text": "Ceci est un text ou chiffre mis en évidence",
  "button": {
    "text": "Lire la suite",
    "hiddentext": "de titre de l'élément",
    "url": "https://www.vd.ch",
    "styleModifier": "o-card-link__link"
  },
  "image": true
}
  • Content: 
    /* ==========================================================================
   # _components.promo-card.css
   ========================================================================== */

.c-promo-card {
  @extend .u-break-inside-avoid;

  @apply
    flex
    flex-row
    justify-end
    bg-primary
  ;
}

.c-promo-card__col-left {
  @apply
    px-1
    py-4
    sm:px-4
    mt-1
    w-1/4
    sm:w-1/6
  ;

  > * {
    max-width: 3rem;
  }

  svg {
    @apply
      text-white
    ;
  }
}

.c-promo-card__col-right {
  @apply
    py-4
    px-1
    sm:px-4
    w-3/4
    sm:w-5/6
    border-t
    border-primary-800
  ;
}

.c-promo-card__header {
  @extend %h1;
}

.c-promo-card__header,
.c-promo-card__content {
  @apply
    text-white
  ;
}
  • URL: /components/raw/promo-card/_components.promo-card.css
  • Filesystem Path: src/components/04-Components/promo/promo-card/_components.promo-card.css
  • Size: 748 Bytes

No notes defined.