Joran design system

Content: Heading Only 

<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
    class="o-container c-content{% if styleVariant %} {{ styleVariant }}{% endif %}"
    >
    {% if heading %}
      <div class="c-content__item">
        <h2 class="c-content__heading-text">{{ heading }}</h2>
      </div>
    {% endif %}
    {% if content %}
      <div class="c-content__item o-prose">
        {{ content | safe }}
        {% if fulltext %}

          <div id="js-more-1" class="js-accordeon__fulltext">
            {{ fulltext | safe }}
          </div>

          <button aria-expanded="false"
                  aria-controls="js-more-1"
                  aria-pressed="false"
                  class="c-button c-button--transparent js-accordeon__toggle-btn"
                  hidden>
            <span class="js-accordeon__toggle-btn-text">Afficher plus</span>{% render '@svg-chevron-right' %}
          </button>

        {% endif %}
      </div>
    {% endif %}
</div>
 
{
  "content": false,
  "heading": "Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless"
}
  • Content: 
    /* ======================================================================
   # _components.content.css
   ====================================================================== */

.c-content {
  @apply
    flex
    flex-col
    md:items-center
    print:block
    print:w-3/4
  ;
}

.c-content .c-content__item {
  @apply
    flex-1
    md:w-2/3
    print:w-full
  ;
}

.c-content__heading-text {
  @extend %h2;

  @apply
    mb-8
    print:mb-4
  ;
}

/* -----------------------------------
 # Content heading left
 ----------------------------------- */

@screen md {
  .c-content--2-col {
    @apply
      flex-row
      items-start
    ;

    .c-content__heading-text {
      @apply
        mr-6
      ;
    }
  }
}

@screen print {
  .c-content--2-col {
    @apply
      flex-row
      items-start
    ;

    .c-content__heading-text {
      @apply
        mr-6
      ;
    }
  }
}

/* -----------------------------------
 # Intro
 ----------------------------------- */

.c-content--intro .c-content__heading-text {
  @extend %h1;

  @apply
    text-black
  ;
}
  • URL: /components/raw/content/_components.content.css
  • Filesystem Path: src/components/04-Components/content/_components.content.css
  • Size: 1.1 KB

No notes defined.