<p class="paragraph"><a class="link" href="#">This is a text link</a></p>
<p class="paragraph"><strong>Strong is used to indicate strong importance</strong></p>
<p class="paragraph"><em>This text has added emphasis</em></p>
<p class="paragraph">The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>
<p class="paragraph"><del>This text is deleted</del> and <ins>This text is inserted</ins></p>
<p class="paragraph"><s>This text has a strikethrough</s></p>
<p class="paragraph">Superscript<sup>®</sup></p>
<p class="paragraph">Subscript for things like H<sub>2</sub>O</p>
<p class="paragraph"><small>This text is small for fine print, etc.</small></p>
<p class="paragraph">Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
<p class="paragraph">Keybord input: <kbd>Cmd</kbd></p>
<p class="paragraph"><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>
<p class="paragraph"><cite>This is a citation</cite></p>
<p class="paragraph">The <dfn>dfn element</dfn> indicates a definition.</p>
<p class="paragraph">The <mark>mark element</mark> indicates a highlight</p>
<p class="paragraph"><code>This is what inline code looks like.</code></p>
<p class="paragraph"><samp>This is sample output from a computer program</samp></p>
<p class="paragraph">The <var>variarble element</var>, such as <var>x</var> = <var>y</var></p>
<p class="paragraph"><a class="link" href="#">This is a text link</a></p>
<p class="paragraph"><strong>Strong is used to indicate strong importance</strong></p>
<p class="paragraph"><em>This text has added emphasis</em></p>
<p class="paragraph">The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>
<p class="paragraph"><del>This text is deleted</del> and <ins>This text is inserted</ins></p>
<p class="paragraph"><s>This text has a strikethrough</s></p>
<p class="paragraph">Superscript<sup>®</sup></p>
<p class="paragraph">Subscript for things like H<sub>2</sub>O</p>
<p class="paragraph"><small>This text is small for fine print, etc.</small></p>
<p class="paragraph">Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
<p class="paragraph">Keybord input: <kbd>Cmd</kbd></p>
<p class="paragraph"><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>
<p class="paragraph"><cite>This is a citation</cite></p>
<p class="paragraph">The <dfn>dfn element</dfn> indicates a definition.</p>
<p class="paragraph">The <mark>mark element</mark> indicates a highlight</p>
<p class="paragraph"><code>This is what inline code looks like.</code></p>
<p class="paragraph"><samp>This is sample output from a computer program</samp></p>
<p class="paragraph">The <var>variarble element</var>, such as <var>x</var> = <var>y</var></p>
{
  "paragraph": "All around the world statues crumble for me. Who knows how long I've loved you. Everywhere I go people stop and they see. Twenty-five years old my mother God rest her soul. I just wanna fly. Put your arms around me, baby, put your arms around me, baby. I just wanna fly. Put your arms around me, baby, Put your arms around me, baby. Sugar Ray.",
  "yes": "yes"
}
  • Content:
    h1, h2, h3, h4, h5, h6 {
      margin-top: 0;
      margin-bottom: 0.5rem;
      font-weight: 500;
      line-height: 1.2; }
    
    h1 {
      font-size: 2.5rem;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    h3 {
      font-size: 1.75rem;
    }
    
    h4 {
      font-size: 1.5rem;
    }
    
    h5 {
      font-size: 1.25rem; }
    
    h6 {
      font-size: 1rem; }
    
    .h1 {
        color: #000;
        font-family: $font-heading;
        font-weight: 700;
        font-style: normal;
        font-size: 3rem;
        margin: 0 0 $space-one-half;
        width: auto;
    }
    
    .h2 {
        color: #000;
        font-family: $font-heading;
        font-weight: 700;
        font-style: normal;
        font-size: 2.25rem;
        margin: 0 0 .5rem;
        width: auto;
    }
    
    .h3 {
        color: #000;
        font-family: $font-heading;
        font-weight: 700;
        font-style: normal;
        font-size: 1.875rem;
        margin: 0 0 $space-one-half;
        width: auto;
    }
    
    .h4 {
        color: #000;
        font-family: $font-heading;
        font-weight: 600;
        font-style: normal;
        font-size: 1.5rem;
        margin: 0 0 $space-one-half;
        width: auto;
    }
    
    .h5 {
        color: #000;
        font-family: $font-heading;
        font-weight: 600;
        font-style: normal;
        font-size: 1.25rem;
        margin: 0 0 $space-one-half;
        width: auto;
    }
    
    .h6 {
        color: #000;
        font-family: $font-heading;
        font-weight: 600;
        font-style: normal;
        font-size: 1rem;
        margin: 0 0 $space-one-half;
        width: auto;
    }
    
    //.paragraph {
    //    margin: 0 0 $space;
    //}
    
    .link {
        color: $hyperlink;
    }
    
    .blockquote {
        color: $grey_darkest;
        text-align: center;
        font-size: 1.5rem;
        border-top: solid 3px $lehigh-brown;
        border-bottom: solid 3px $lehigh-brown;
        margin: $space-double;
        padding: $space-double;
        position: relative;
    
        &::before {
            content: "“";
            color: $lehigh-brown;
            font-size: 20rem;
            font-family: $font-quotation;
            opacity: 0.1;
            position: absolute;
            top: -25px;
            left: -$space;
        }
    
        &::after {
            content: "”";
            color: $lehigh-brown;
            font-size: 20rem;
            font-family: $font-quotation;
            opacity: 0.1;
            position: absolute;
            bottom: -150px;
            right: -$space;
        }
    
        .source {
            margin: 1rem 0 0 0;
            font-size: 1rem;
            color: $grey_k60;
            font-style: italic;
    
            &::before {
                content: "- ";
            }
        }
    }
    
    .hr {
        border-style: solid;
        border-width: 1px 0 0;
        color: currentColor;
    }
    
  • URL: /components/raw/text/text.scss
  • Filesystem Path: components/01-elements/01-text/text.scss
  • Size: 2.4 KB
  • Handle: @text--inline-elements
  • Preview:
  • Filesystem Path: components/01-elements/01-text/text--inline-elements.twig

No notes defined.