<div class="fast-fact fast-fact--dark ">
    <div class="fast-fact__stat">
        <div class="headline-group ">

            <span class="headline-group__head">50 ways</span>

        </div>

    </div>
    <div class="fast-fact__description">
        <p>It's really not my habit to intrude. Furthermore, I hope my meaning won't be lost or misconstrued.</p>
    </div>
</div>
{% if fast_fact is not empty %}
<div class="fast-fact {{ fast_fact.variant }} {{ variant }}">
  <div class="fast-fact__stat">
    {% include '@headline-group' with { hg: fast_fact.hg } %}
  </div>
  <div class="fast-fact__description">
    {{ fast_fact.content }}
  </div>
</div>
{% endif %}
{
  "fast_fact": {
    "hg": {
      "tag": "div",
      "headline": "50 ways"
    },
    "content": "<p>It's really not my habit to intrude. Furthermore, I hope my meaning won't be lost or misconstrued.</p>",
    "variant": "fast-fact--dark"
  }
}
  • Content:
    .fast-fact {
      padding: rr-gridbase(2);
      @include rr-break-directive(m) {
        padding: rr-gridbase(4);
      }
      border: rr-gridbase(1) color(davidson-red) solid;
      color: color(davidson-red);
    
      .headline-group {
        .headline-group__head {
          font-weight: 500;
          @include rr-font-compute(xl, medium);
          @include rr-break-directive(m) {
            font-size: rem(56px);
            line-height: 1.4;
          }
        }
      }
    
      .fast-fact__description {
        @include rr-break-directive(m) {
          @include rr-font-compute(xl, medium);
        }
        position: relative;
        padding-top: rr-gridbase(2);
        box-sizing: border-box;
    
        &::before {
          display: inline-block;
          position: absolute;
          top: -.3em;
          width: 40px;
          height: 2px;
          background-color: color(davidson-red);
          content: '';
        }
    
        p {
          @include rr-break-directive(m) {
            @include rr-font-compute(xl, medium);
          }
          margin-bottom: 0;
        }
      }
    }
    
    @mixin fast-fact-dark {
      background-color: color(davidson-red);
      color: color(davidson-white);
    
      .fast-fact__description {
        &::before {
          background-color: color(davidson-white);
        }
      }
    }
    
    .fast-fact.fast-fact--dark {
      @include fast-fact-dark();
    }
    
    .collection .fast-fact:first-of-type {
      @include fast-fact-dark();
    }
    
  • URL: /components/raw/fast-fact/fast-fact.scss
  • Filesystem Path: patterns/molecules/blocks/fast-fact/fast-fact.scss
  • Size: 1.3 KB

There are no notes for this item.