Joran design system

Highlight: Heading Only 

<div class="c-highlight" aria-label="Contenu mis en évidence">
    <div class="o-stack">
        <div class="o-container c-content">

            <div class="c-content__item">
                <h2 class="c-content__heading-text">Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless</h2>
            </div>

        </div>

    </div>
</div>
 
<div class="c-highlight" aria-label="Contenu mis en évidence">
  <div class="o-stack">
    {% render '@content--with-heading', content %}
    {% if button %}
      <div class="o-container c-content">
        <div class="c-content__item">
          {% render '@button--default-arrow-right' %}
        </div>
      </div>
    {% endif %}
  </div>
</div>
 
{
  "content": {
    "content": false,
    "heading": "Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless"
  }
}
  • Content: 
    /* ======================================================================
   # _components.highlight.css
   ====================================================================== */

.c-highlight {
  @extend .u-break-inside-avoid;

  @apply
    py-24
    bg-primary-100
  ;

  @media print {
    @apply
      py-12
    ;
  }
}
  • URL: /components/raw/highlight/_components.highlight.css
  • Filesystem Path: src/components/04-Components/highlight/_components.highlight.css
  • Size: 327 Bytes

No notes defined.