Heading 1 – h1, .h1
Heading 2 – h2, .h2
Heading 3 – h3, .h3
Heading 4 – h4, .h4
Heading 5 – h5, .h5
Heading 6 (Also Used for Captions/ Figure Captions)
Body Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lead Text
This is some lead text. Slightly more important
Fine Print
This is some boring legal text. So its Smaller to not get in the way
/*---------------------------------------------------------------------------
03-01 Typography (BST) FRAMEWORK 2024-05-04
---------------------------------------------------------------------------*/
/* Lead Text & Fine Print Text */
.lead { font-size: var(--leadsize); line-height: var(--leadlineHeight); margin-bottom: 1.2rem; }
.fineprint { font-size: var(--fineprint); line-height: var(--fineprintlineHeight); }
/* Headings */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-family: var(--headingfont); font-optical-sizing: auto; font-weight: var(--headingfont-weight); font-style: var(--headingfont-style); letter-spacing: var(--letter_spacing-contract);
color: var(--clr-black);
line-height: 1; margin: 0 0 1rem 0;
}
.head-2 { font-family: var(--heading2font); font-optical-sizing: auto; font-weight: var(--heading2font-weight); font-style: var(--heading2font-style); letter-spacing: var(--letter_spacing-contract); }
.head-3 { font-family: var(--heading3font); font-optical-sizing: auto; font-weight: var(--heading3font-weight); font-style: var(--heading3font-style); letter-spacing: var(--letter_spacing-contract); }
h1, .h1 { font-size: var(--h1-size); margin-left: calc(var(--h1-size) / -22); word-break: break-word; }
h2, .h2 { font-size: var(--h2-size); margin-left: calc(var(--h2-size) / -26); }
h3, .h3 { font-size: var(--h3-size); }
h4, .h4 { font-size: var(--h4-size); }
h5, .h5 { font-size: var(--h5-size); margin-bottom: 1rem; }
h6, .h6 { font-size: var(--h6-size); margin-bottom: 1rem; font-weight: 700; color: var(--clr-black); text-transform: uppercase; letter-spacing: var(--letter_spacing-expand); }
.legal-content h1 { font-size: calc(var(--h1-size) * 1); }
.legal-content h2 { font-size: calc(var(--h2-size) * 0.8); }
.legal-content h3 { font-size: calc(var(--h3-size) * 0.75); }
.legal-content h4 { font-size: calc(var(--h4-size) * 0.75); }
/* Header top space after Paragraph or Lists applied to Heading after "+" */
p + h1, ul + h1, ol + h1 { padding-top: 2rem; }
h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6 { padding-top: .75rem; }
p + h2, ul + h2, ol + h2,
p + h3, ul + h3, ol + h3,
p + h4, ul + h4, ol + h4,
p + h5, ul + h5, ol + h5,
p + h6, ul + h6, ol + h6 { padding-top: .5rem; }
/* Light Text */
.light h1, .light h2, .light h3, .light h4, .light h5, .light h6 { color: var(--clr-white) !important; text-shadow: var(--shadow-text); }
.light p, .light li, .light li:after { color: var(--clr-white) !important; }
.light hr, hr.light { background-color: var(--clr-1) !important; }
.light b, b.light, .light strong, strong.light , .light .bold, .light.bold { color: var(--clr-white); }