TyBs Patterns

Orange 

<div class="fact orange sibling-margins-off">
    <span class="d-block text-center factnumber make-counter">4 of 5</span>
    <span class="d-block text-center">dentists recommend OralB</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": "orange",
  "fact_number": "4 of 5",
  "fact_desc": "dentists recommend OralB"
}
  • 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.