Visuals / Heading with Intro text

How to use this component

Place the class heading on the heading tag
Within the heading tag add a span with the class heading__intro-text
This keeps the intro text of the title within the heading tag and allows it to be read all as one title

Component Example

The Challenge:Developing an accessibility lib

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis dignissim sem vel tristique. Aliquam at neque mollis, imperdiet metus vitae, efficitur ex. Sed vitae leo risus. Aenean consectetur at augue at fermentum. Ut purus ligula, convallis in lorem at, vulputate viverra enim. Integer vel lacus efficitur, pharetra diam posuere, laoreet turpis. Nam tristique eros erat, nec bibendum lectus luctus ut.

Code Snippets

HTML

                
<h3 class="heading"><span class="heading__intro-text">Intro text:</span>Title text</h3>

CSS

                
.heading__intro-text {
    display: block;
    font-size: 50%;
    color: darkslategray;
    text-transform: uppercase;
}

History Tracking

Code orginally created by Kelly; Approved by Steen on Nov 20,2023