Headline: Alternative

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="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">Display 1</p>
            </div>
            <div class="w-75">
                <h1 class="display-1">I am an alternative headline</h1>
            </div>
        </li>

        <li class="d-flex flex-row align-items-center">
            <div class="w-25">
                <p class="color-blue">Display 2</p>
            </div>
            <div class="w-75">
                <h2 class="display-2">I am an alternative headline</h2>
            </div>
        </li>

        <li class="d-flex flex-row align-items-center">
            <div class="w-25">
                <p class="color-blue">Display 3</p>
            </div>
            <div class="w-75">
                <h3 class="display-3">I am an alternative headline</h3>
            </div>
        </li>

        <li class="d-flex flex-row align-items-center">
            <div class="w-25">
                <p class="color-blue">Display 4</p>
            </div>
            <div class="w-75">
                <h4 class="display-4">I am an alternative headline</h4>
            </div>
        </li>

        <li class="d-flex flex-row align-items-center">
            <div class="w-25">
                <p class="color-blue">Display 5</p>
            </div>
            <div class="w-75">
                <h5 class="display-5">I am an alternative headline</h5>
            </div>
        </li>

        <li class="d-flex flex-row align-items-center">
            <div class="w-25">
                <p class="color-blue">Display 6</p>
            </div>
            <div class="w-75">
                <h6 class="display-6">I am an alternative headline</h6>
            </div>
        </li>
    </ul>
</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="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">Display 1</p>
            </div>
            <div class="w-75">
                <h1 class="display-1">{{ text }}</h1>
            </div>
        </li>

        <li class="d-flex flex-row align-items-center">
            <div class="w-25">
                <p class="color-blue">Display 2</p>
            </div>
            <div class="w-75">
                <h2 class="display-2">{{ text }}</h2>
            </div>
        </li>

        <li class="d-flex flex-row align-items-center">
            <div class="w-25">
                <p class="color-blue">Display 3</p>
            </div>
            <div class="w-75">
                <h3 class="display-3">{{ text }}</h3>
            </div>
        </li>

        <li class="d-flex flex-row align-items-center">
            <div class="w-25">
                <p class="color-blue">Display 4</p>
            </div>
            <div class="w-75">
                <h4 class="display-4">{{ text }}</h4>
            </div>
        </li>

        <li class="d-flex flex-row align-items-center">
            <div class="w-25">
                <p class="color-blue">Display 5</p>
            </div>
            <div class="w-75">
                <h5 class="display-5">{{ text }}</h5>
            </div>
        </li>

        <li class="d-flex flex-row align-items-center">
            <div class="w-25">
                <p class="color-blue">Display 6</p>
            </div>
            <div class="w-75">
                <h6 class="display-6">{{ text }}</h6>
            </div>
        </li>
    </ul>
</div>