Headline: Default

Exported

Notes
HTML
SCSS
View

Headline Documentation

Original source: https://utsa-asc.github.io/college-dls/college-dls/reference/typography.html#Standard-Headlines


        
        <div class="row m-0">
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
        <ul class="list-unstyled headings-typography-ul">
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H1</p>
                </div>
                <div class="w-75">
                    <h1>I am a default headline</h1>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H1 .orange</p>
                </div>
                <div class="w-75">
                    <h1 class="orange">I am a default headline</h1>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H1 .orange-a11y</p>
                </div>
                <div class="w-75">
                    <h1 class="orange-a11y">I am a default headline</h1>
                </div>
            </li>
        </ul>
        <ul class="list-unstyled headings-typography-ul">
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H2</p>
                </div>
                <div class="w-75">
                    <h2>I am a default headline</h2>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H2 .orange</p>
                </div>
                <div class="w-75">
                    <h2 class="orange">I am a default headline</h2>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H2 .orange-a11y</p>
                </div>
                <div class="w-75">
                    <h2 class="orange-a11y">I am a default headline</h2>
                </div>
            </li>
        </ul>
        <ul class="list-unstyled headings-typography-ul">
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H3</p>
                </div>
                <div class="w-75">
                    <h3>I am a default headline</h3>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H3 .orange</p>
                </div>
                <div class="w-75">
                    <h3 class="orange">I am a default headline</h3>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H3 .orange-a11y</p>
                </div>
                <div class="w-75">
                    <h3 class="orange-a11y">I am a default headline</h3>
                </div>
            </li>
        </ul>
        <ul class="list-unstyled headings-typography-ul">
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H4</p>
                </div>
                <div class="w-75">
                    <h4>I am a default headline</h4>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H4 .orange</p>
                </div>
                <div class="w-75">
                    <h4 class="orange">I am a default headline</h4>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H4 .orange-a11y</p>
                </div>
                <div class="w-75">
                    <h4 class="orange-a11y">I am a default headline</h4>
                </div>
            </li>
        </ul>
        <ul class="list-unstyled headings-typography-ul">
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H5</p>
                </div>
                <div class="w-75">
                    <h5>I am a default headline</h5>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H5 .orange</p>
                </div>
                <div class="w-75">
                    <h5 class="orange">I am a default headline</h5>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H5 .orange-a11y</p>
                </div>
                <div class="w-75">
                    <h5 class="orange-a11y">I am a default headline</h5>
                </div>
            </li>
        </ul>
        <ul class="list-unstyled headings-typography-ul">
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H6</p>
                </div>
                <div class="w-75">
                    <h6>I am a default headline</h6>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H6 .orange</p>
                </div>
                <div class="w-75">
                    <h6 class="orange">I am a default headline</h6>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H6 .orange-a11y</p>
                </div>
                <div class="w-75">
                    <h6 class="orange-a11y">I am a default headline</h6>
                </div>
            </li>
        </ul>
    </div>
</div>

File:

Content:


                                /* components/01-visual-styling/03-typography/01-headline/headline.scss */
/* BEGIN headline.scss */

h1 {
	font-size: 2.5rem;
	color: $blue;
	font-weight: 700;
	font-family: $heading-font-family-sans-serif;
}

.h1 {
	font-size: 2.5rem;
	font-weight: 700;
	font-family: $heading-font-family-sans-serif;
}

h2 {
	font-size: 2.25rem;
	color: $blue;
	font-weight: 700;
	font-family: $heading-font-family-sans-serif;
}

.h2 {
	font-size: 2.25rem;
	font-weight: 700;
	font-family: $heading-font-family-sans-serif;
}

h3 {
	font-size: 2rem;
	color: $blue;
	font-weight: 700;
	font-family: $heading-font-family-sans-serif;
}

.h3 {
	font-size: 2rem;
	font-weight: 700;
	font-family: $heading-font-family-sans-serif;
}

h4 {
	font-size: 1.75rem;
	color: $blue;
	font-weight: 700;
	font-family: $heading-font-family-sans-serif;
}

.h4 {
	font-size: 1.75rem;
	font-weight: 700;
	font-family: $heading-font-family-sans-serif;
}

h5 {
	font-size: 1.5rem;
	color: $blue;
	font-weight: 700;
	font-family: $heading-font-family-sans-serif;
}

.h5 {
	font-size: 1.5rem;
	font-weight: 700;
	font-family: $heading-font-family-sans-serif;
}

h6 {
	font-size: 1.25rem;
	color: $blue;
	font-weight: 700;
	font-family: $heading-font-family-sans-serif;
}

.h6 {
	font-size: 1.25rem;
	font-weight: 700;
	font-family: $heading-font-family-sans-serif;
}

.display-1 {
	font-size: 4rem;
	line-height: 1;
	font-weight: 600;
	font-family: arsenal, sans-serif;
	color: $blue;
}

.display-2 {
	font-size: 3.75rem;
	font-weight: 600;
	line-height: 1.2;
	font-family: arsenal, sans-serif;
	color: $blue;
}

.display-3 {
	font-size: 3.5rem;
	font-weight: 600;
	line-height: 1.2;
	font-family: arsenal, sans-serif;
	color: $blue;
}

.display-4 {
	font-size: 3.25rem;
	font-weight: 400;
	line-height: 1.2;
	font-family: arsenal, sans-serif;
	color: $blue;
}

.display-5 {
	font-size: 3rem;
	font-weight: 400;
	line-height: 1.3;
	font-family: arsenal, sans-serif;
	color: $blue;
}

.display-6 {
	font-size: 2.75rem;
	font-weight: 400;
	line-height: 1.3;
	font-family: arsenal, sans-serif;
	color: $blue;
}

.bullet-heading {
	font-size: 28px;
	font-weight: 400;
	font-family: "libre franklin", sans-serif;
	margin-bottom: 33px;
	text-transform: capitalize;
}
.standard-headlines {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 1px;
}

@include color-mode(dark) {
	h1, h2, h3, h4, h5, h6 {
		color: $white;
	}
	.white-bg {
		h1, h2, h3, h4, h5, h6 {
			color: $blue;
		}
	}
	.h2 {
		font-size: 2.25rem;
	}
	.h3 {
		font-size: 2rem;
	}
	.h4 {
		font-size: 1.75rem;
	}
	.h5 {
		font-size: 1.5rem;
	}
	.h6 {
		font-size: 1.25rem;
	}
}

@include media-breakpoint-down(lg) {
	.headings-typography-ul>li {
		padding-left: 0px;
		padding-right: 0px;
	}
}
/* END headline.scss */

URL: /components/raw/headline/headline.scss
Filesystem Path: components/01-visual-styling/01-typography/01-headline/headline.scss
Size: 2.7 KB


        <div class="row m-0">
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
        <ul class="list-unstyled headings-typography-ul">
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H1</p>
                </div>
                <div class="w-75">
                    <h1>{{ text }}</h1>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H1 .orange</p>
                </div>
                <div class="w-75">
                    <h1 class="orange">{{ text }}</h1>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H1 .orange-a11y</p>
                </div>
                <div class="w-75">
                    <h1 class="orange-a11y">{{ text }}</h1>
                </div>
            </li>
        </ul>
        <ul class="list-unstyled headings-typography-ul">
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H2</p>
                </div>
                <div class="w-75">
                    <h2>{{ text }}</h2>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H2 .orange</p>
                </div>
                <div class="w-75">
                    <h2 class="orange">{{ text }}</h2>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H2 .orange-a11y</p>
                </div>
                <div class="w-75">
                    <h2 class="orange-a11y">{{ text }}</h2>
                </div>
            </li>
        </ul>
        <ul class="list-unstyled headings-typography-ul">
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H3</p>
                </div>
                <div class="w-75">
                    <h3>{{ text }}</h3>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H3 .orange</p>
                </div>
                <div class="w-75">
                    <h3 class="orange">{{ text }}</h3>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H3 .orange-a11y</p>
                </div>
                <div class="w-75">
                    <h3 class="orange-a11y">{{ text }}</h3>
                </div>
            </li>
        </ul>
        <ul class="list-unstyled headings-typography-ul">
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H4</p>
                </div>
                <div class="w-75">
                    <h4>{{ text }}</h4>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H4 .orange</p>
                </div>
                <div class="w-75">
                    <h4 class="orange">{{ text }}</h4>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H4 .orange-a11y</p>
                </div>
                <div class="w-75">
                    <h4 class="orange-a11y">{{ text }}</h4>
                </div>
            </li>
        </ul>
        <ul class="list-unstyled headings-typography-ul">
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H5</p>
                </div>
                <div class="w-75">
                    <h5>{{ text }}</h5>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H5 .orange</p>
                </div>
                <div class="w-75">
                    <h5 class="orange">{{ text }}</h5>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H5 .orange-a11y</p>
                </div>
                <div class="w-75">
                    <h5 class="orange-a11y">{{ text }}</h5>
                </div>
            </li>
        </ul>
        <ul class="list-unstyled headings-typography-ul">
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H6</p>
                </div>
                <div class="w-75">
                    <h6>{{ text }}</h6>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H6 .orange</p>
                </div>
                <div class="w-75">
                    <h6 class="orange">{{ text }}</h6>
                </div>
            </li>
            <li class="d-flex flex-row align-items-center">
                <div class="w-25">
                    <p>H6 .orange-a11y</p>
                </div>
                <div class="w-75">
                    <h6 class="orange-a11y">{{ text }}</h6>
                </div>
            </li>
        </ul>
    </div>
</div>