Purple

<div class="fact purple sibling-margins-off">
    <span class="d-block text-center factnumber make-counter">$1.25 million</span>
    <span class="d-block text-center">raised to fight climate change</span>
</div>
<div class="fact {{fact_color}} sibling-margins-off">
  <span class="d-block text-center factnumber make-counter">{{fact_number}}</span>
  <span class="d-block text-center">{{fact_desc}}</span>
</div>
{
  "fact_color": "purple",
  "fact_number": "$1.25 million",
  "fact_desc": "raised to fight climate change"
}
  • Content:
    $fact-fontsize:4rem !default;
    .fact {
      display:flex;
      flex-direction:column;
      justify-content:center;
      margin:0 auto;
      position:relative;
      width:100%;
      .factnumber {
        @include condensed-font;
        font-size:$fact-fontsize;
        line-height:1;
        &.make-counter {
          display:inline-flex !important;
          height:$fact-fontsize;
          justify-content:center;
        }
      }
      &.purple {
        .factnumber {
          color:var(--purple);
        }
      }
      &.orange {
        .factnumber {
          color:var(--orange);
        }
      }
      &.green {
        .factnumber {
          color:var(--green);
        }
      }
      &.blue {
        .factnumber {
          color:var(--blue);
        }
      }
    }
  • URL: /components/raw/fact/fact.scss
  • Filesystem Path: source/patterns/organisms/infographics/fact/fact.scss
  • Size: 646 Bytes

There are no notes for this item.