Lead

<!-- Default -->
<p id="" class="lead " style="max-width: 44rem;">Consequatur non necessitatibus amet voluptate voluptatibus qui enim ad. Maiores sed nihil quo commodi illo. Quo quis sunt dicta aut maxime consequatur. Provident voluptatem ut ducimus porro nam quia doloremque sint omnis. Amet tempore eveniet laborum
    voluptatibus deserunt temporibus. Nesciunt nulla fugiat maxime omnis et id aut consectetur similique. Molestiae non et facilis autem. Nam occaecati magni eaque voluptatibus. Ut rerum qui illum magni iusto laborum tempora. Quasi dolores libero nemo.</p>

<!-- Large -->
<p id="" class="lead _large" style="max-width: 44rem;">Consequatur non necessitatibus amet voluptate voluptatibus qui enim ad. Maiores sed nihil quo commodi illo. Quo quis sunt dicta aut maxime consequatur. Provident voluptatem ut ducimus porro nam quia doloremque sint omnis. Amet tempore eveniet laborum
    voluptatibus deserunt temporibus. Nesciunt nulla fugiat maxime omnis et id aut consectetur similique. Molestiae non et facilis autem. Nam occaecati magni eaque voluptatibus. Ut rerum qui illum magni iusto laborum tempora. Quasi dolores libero nemo.</p>

<p id="{{id}}" class="lead {{modifier}}" style="{{style}}">{{{text}}}</p>
/* Default */
{
  "text": "Consequatur non necessitatibus amet voluptate voluptatibus qui enim ad. Maiores sed nihil quo commodi illo. Quo quis sunt dicta aut maxime consequatur. Provident voluptatem ut ducimus porro nam quia doloremque sint omnis. Amet tempore eveniet laborum voluptatibus deserunt temporibus. Nesciunt nulla fugiat maxime omnis et id aut consectetur similique. Molestiae non et facilis autem. Nam occaecati magni eaque voluptatibus. Ut rerum qui illum magni iusto laborum tempora. Quasi dolores libero nemo.",
  "style": "max-width: 44rem;"
}

/* Large */
{
  "text": "Consequatur non necessitatibus amet voluptate voluptatibus qui enim ad. Maiores sed nihil quo commodi illo. Quo quis sunt dicta aut maxime consequatur. Provident voluptatem ut ducimus porro nam quia doloremque sint omnis. Amet tempore eveniet laborum voluptatibus deserunt temporibus. Nesciunt nulla fugiat maxime omnis et id aut consectetur similique. Molestiae non et facilis autem. Nam occaecati magni eaque voluptatibus. Ut rerum qui illum magni iusto laborum tempora. Quasi dolores libero nemo.",
  "style": "max-width: 44rem;",
  "modifier": "_large"
}

  • Content:
    .lead {
        @include font-size-large;
        margin-right: auto;
        margin-left: auto;
        &._large {
            @include font-size-lead;
        }
        &._larger {
            @include font-size-subhead;
        }
    }
    
    // Only center on bigger screens
    @media #{$desktop-media} {
        p._centered,
        .lead._centered {
            text-align: center;
        }
    }
    
  • URL: /components/raw/lead/Lead.scss
  • Filesystem Path: components/atoms/Lead/Lead.scss
  • Size: 335 Bytes

There are no notes for this item.