Text

<hgroup>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
</hgroup>

<pre><p>Paragraph</p></pre>

<strong>bolded /strong text</strong>
<p>paragraph text</p>
<small> small text</small>

<a href="">
    <p>a paragraph that's a link</p>
</a>
{{!-- <pre><h1>Headings</h1></pre> --}}
<hgroup>
    {{!-- <h1 class="hero">Hero 1</h1>
    <h2 class="hero">Hero 2</h2> --}}
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
</hgroup>

<pre><p>Paragraph</p></pre>

<strong>bolded /strong text</strong>
<p>paragraph text</p>
<small> small text</small>

<a href=""><p>a paragraph that's a link</p></a>
/* No context defined for this component. */
  • Content:
     h1,
     h2,
     h3,
     h4,
     h5,
     p,
     strong,
     small {
       text-align: center;
     }
    
     h1 {
       font-size: 50px;
       font-weight: 700;
       letter-spacing: 3.75px;
     }
    
     h2 {
       font-size: 25px;
       font-weight: 500;
     }
    
     h3 {
       font-size: 20px;
       font-weight: 500;
       letter-spacing: 2.21px;
     }
    
     h4 {
       font-size: 24px;
       font-weight: 700;
       text-align: center;
     }
    
     strong {
       font-size: 9.6px;
       font-weight: 500;
     }
    
     p {
       font-size: 16px;
       font-weight: normal;
       line-height: 25px;
     }
    
     small {
       font-size: 4px;
       font-weight: normal;
     }
    
     a,
     a:visited {
       color: currentColor;
       text-decoration: none;
     }
    
     @include respond-above(md) {
       h1 {
         font-size: 70px;
         letter-spacing: 5.5px;
       }
    
       h2 {
         font-size: 40px;
         line-height: 40px;
       }
    
       h3 {
         font-size: 16px;
         letter-spacing: 1.7px;
       }
    
       h4 {
         font-size: 29px;
         line-height: 40px;
       }
    
       strong {
         font-size: 10.5px;
       }
    
       p {
         font-size: 19px;
         line-height: 36px;
       }
    
       small {
         font-size: 8px;
       }
     }
    
     @include respond-above(lg) {
       h1 {
         font-size: 80px;
         letter-spacing: 6px;
       }
    
       h2 {
         font-size: 50px;
         line-height: 50px;
       }
    
       h3 {
         font-size: 20px;
         letter-spacing: 2.21px;
       }
    
       h4 {
         font-size: 32px;
         line-height: 40px;
       }
    
       strong {
         font-size: 12px;
       }
    
       p {
         font-size: 22px;
         line-height: 40px;
       }
    
       small {
         font-size: 8px;
       }
     }
    
     .french {
    
       h1 {
         font-size: 40px;
         letter-spacing: 2.75px;
       }
    
       h2 {
         font-size: 20px;
       }
    
       h3 {
         font-size: 16px;
         letter-spacing: 2.21px;
       }
    
       h4 {
         font-size: 19px;
       }
    
       strong {
         font-size: 9.6px;
       }
    
       p {
         font-size: 15px;
         line-height: 23px;
       }
    
       small {
         font-size: 4px;
       }
    
       a,
       a:visited {
         color: currentColor;
         text-decoration: none;
       }
    
       @include respond-above(md) {
         h1 {
           font-size: 56px;
           letter-spacing: 4.4px;
         }
    
         h2 {
           font-size: 32px;
           line-height: 32px;
         }
    
         h3 {
           font-size: 16px;
           letter-spacing: 1.7px;
         }
    
         h4 {
           font-size: 23px;
           line-height: 32px;
         }
    
         strong {
           font-size: 10.5px;
         }
    
         p {
           font-size: 17px;
           line-height: 33px;
         }
    
         small {
           font-size: 8px;
         }
       }
    
       @include respond-above(lg) {
         h1 {
           font-size: 60px;
           letter-spacing: 4.8px;
         }
    
         h2 {
           font-size: 40px;
           line-height: 40px;
         }
    
         h3 {
           font-size: 16px;
           letter-spacing: 1.51px;
         }
    
         h4 {
           font-size: 25px;
           line-height: 32px;
         }
    
         strong {
           font-size: 12px;
         }
    
         p {
           font-size: 17px;
           line-height: 32px;
         }
    
         small {
           font-size: 8px;
         }
       }
     }
  • URL: /components/raw/text/_text.scss
  • Filesystem Path: structures/01-atoms/text/_text.scss
  • Size: 2.8 KB

There are no notes for this item.