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="standard-headlines-wrapper" id="Standard-Headlines">
    <div class="row no-mrg">
        <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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">H6 .orange-a11y</p>
                    </div>
                    <div class="w-75">
                        <h6 class="orange-a11y">I am a default headline</h6>
                    </div>
                </li>
            </ul>

        </div>

    </div>

</div>

File:

Content:


                                /* components/01-visual-styling/03-typography/01-headline/headline.scss */
/* BEGIN headline.scss */
.blue-label {
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 1px;
	margin-bottom: 0px;
    line-height: 1.5;
}

h1 {
	font-size: 3rem;
	color: $blue;
	font-weight: 700;
}

.h1 {
	font-size: 3rem;
	font-weight: 700;
}

h2 {
	font-size: 2.5rem;
	color: $blue;
	font-weight: 700;
}

.h2 {
	font-size: 2.5rem;
	font-weight: 700;
}

h3 {
	font-size: 2.25rem;
	color: $blue;
	font-weight: 700;
}

.h3 {
	font-size: 2.25rem;
	font-weight: 700;
}

h4 {
	font-size: 2rem;
	color: $blue;
	font-weight: 700;
}

.h4 {
	font-size: 2rem;
	font-weight: 700;
}

h5 {
	font-size: 1.75rem;
	color: $blue;
	font-weight: 700;
}

.h5 {
	font-size: 1.75rem;
	font-weight: 700;
}

h6 {
	font-size: 1.5rem;
	color: $blue;
	font-weight: 700;
}

.h6 {
	font-size: 1.5rem;
	font-weight: 700;
}

.display-1 {
	font-size: 6.5rem;
	line-height: 0.8;
	font-weight: 600;
	font-family: "kulturista-web", serif;
	color: $blue;
}

.display-2 {
	font-size: 5rem;
	font-weight: 600;
	line-height: 1.2;
	font-family: "kulturista-web", serif;
	color: $blue;
}

.display-3 {
	font-size: 2.97rem;
	font-weight: 500;
	line-height: 1.2;
	font-family: "kulturista-web", serif;
	color: $blue;
}

.display-4 {
	font-size: 3.1rem;
	font-weight: 500;
	line-height: 1.2;
	font-family: "kulturista-web", serif;
	color: $blue;
}

.display-5 {
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 1.3;
	font-family: "kulturista-web", serif;
	color: $blue;
}

.display-6 {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.3;
	font-family: "kulturista-web", serif;
	color: $blue;
}

.bullet-heading {
	font-size: 28px;
	font-weight: 400;
	font-family: "open-sans", 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.5rem;
	}
	.h3 {
		font-size: 2.25rem;
	}
	.h4 {
		font-size: 2rem;
	}
	.h5 {
		font-size: 1.75rem;
	}
	.h6 {
		font-size: 1.5rem;
	}
}

@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.3 KB


        <div class="standard-headlines-wrapper" id="Standard-Headlines">
    <div class="row no-mrg">
        <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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">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 class="color-blue">H6 .orange-a11y</p>
                    </div>
                    <div class="w-75">
                        <h6 class="orange-a11y">{{ text }}</h6>
                    </div>
                </li>
            </ul>

        </div>

    </div>

</div>