T Capital

Typography 

<div class="p-5">
    <h1 class="h1 text-pink pt-3 pb-3 m-0">H1 heading 60px</h1>
    <h2 class="h2 text-pink pt-3 pb-3 m-0">H2 heading 35px</h2>
    <h3 class="h3 text-pink pt-3 pb-3 m-0">H3 heading 50px</h3>
    <h4 class="h4 text-pink pt-3 pb-3 m-0">H4 heading 30px</h4>
    <p class="lead pt-3 pb-3 m-0">Lead paragraph 28px</p>
    <p class=" pt-3 pb-3 m-0">Standard paragraph 20px</p>
    <p class="bold pt-3 pb-3 m-0">Standard paragraph bold 20px</p>
    <p class="medium pt-3 pb-3 m-0">Medium paragraph 18px</p>
    <p class="small pt-3 pb-3 m-0">Small paragraph 15px</p>
</div>
 
<div class="p-5">
    {{#if sizes}}
        {{#each sizes}}
            <{{ element }} class="{{ class }} pt-3 pb-3 m-0">{{{ text }}}</{{ element }}>
        {{/each}}
    {{/if}}
</div>
 
{
  "sizes": [
    {
      "text": "H1 heading 60px",
      "class": "h1 text-pink",
      "element": "h1"
    },
    {
      "text": "H2 heading 35px",
      "class": "h2 text-pink",
      "element": "h2"
    },
    {
      "text": "H3 heading 50px",
      "class": "h3 text-pink",
      "element": "h3"
    },
    {
      "text": "H4 heading 30px",
      "class": "h4 text-pink",
      "element": "h4"
    },
    {
      "text": "Lead paragraph 28px",
      "class": "lead",
      "element": "p"
    },
    {
      "text": "Standard paragraph 20px",
      "class": "",
      "element": "p"
    },
    {
      "text": "Standard paragraph bold 20px",
      "class": "bold",
      "element": "p"
    },
    {
      "text": "Medium paragraph 18px",
      "class": "medium",
      "element": "p"
    },
    {
      "text": "Small paragraph 15px",
      "class": "small",
      "element": "p"
    }
  ]
}
  • Content: 
    //  typography

h1, h2, h3, h4, h5, h6{
    font-family: $boldfont;
    font-weight: 700;
    line-height: 1;
    color: $pink;
}

h1, .h1, .display-1{
    font-size: 3.5rem;
    @include media-breakpoint-up(md){
        font-size: 6rem;
    }
}

h2, .h2, .display-2{
    font-size: 2.5rem;
    @include media-breakpoint-up(md){
        font-size: 4rem;
    }
}

h3, .h3, .display-3{
    font-size: 2.5rem;
    @include media-breakpoint-up(md){
        font-size: 2.5rem;
    }
}

h4, .h4, .display-4{
    font-size: 2rem;
    @include media-breakpoint-up(md){
        font-size: 2rem;
    }
}

h5, .h5, .display-5{
    font-size: 2rem;
    @include media-breakpoint-up(md){
        font-size: 2rem;
    }
}

//  classes

.lead{
    font-size: 2.8rem;
}

.medium{
    font-size: 1.8rem;
}

.small{
    font-size: 1.3rem;
}

.regular{
    font-family: $bodyfont;
    font-weight: 300;
}

.bold, b{
    font-family: $boldfont;
    font-weight: 700;
}

//  colours

$colours: $white, $black, $pink;
$colournames: 'white', 'black', 'pink';
@for $i from 1 through length($colours) {
    .text-#{nth($colournames, $i)}{
        color: #{nth($colours, $i)};
    }
}
  • URL: /components/raw/typography/typography.scss
  • Filesystem Path: src/components/01-global/typography/typography.scss
  • Size: 1.2 KB

No notes defined.