Heading

	--heading--color: var(--color--primary);
	--heading--font-family: var(--body--font-family);

H1 amet mattis vulputate

	--h1--color: var(--heading--color);
	--h1--font-size: var(--body--font-size--40);
	--h1--font-weight: var(--body--font-weight--bold);
	--h1--letter-spacing: 0;
	--h1--line-height: 1.25;
	--h1--text-transform: none;

	@include media-breakpoint-up(md) {
		--h1--font-size: var(--body--font-size--48);
	}

H2 egestas pretium aenean

	--h2--color: var(--color--primary);
	--h2--font-size: var(--body--font-size--32);
	--h2--font-weight: var(--body--font-weight--bold);
	--h2--letter-spacing: 0;
	--h2--line-height: 1.25;
	--h2--text-transform: none;

	@include media-breakpoint-up(md) {
		--h2--font-size: var(--body--font-size--40);
	}

H3 eu scelerisque felis

	--h3--color: var(--color--primary);
	--h3--font-size: var(--body--font-size--28);
	--h3--font-weight: var(--body--font-weight--bold);
	--h3--letter-spacing: 0;
	--h3--line-height: 1.25;
	--h3--text-transform: none;

	@include media-breakpoint-up(md) {
		--h3--font-size: var(--body--font-size--32);
	}

H4 vitae justo eget

	--h4--color: var(--color--primary);
	--h4--font-size: var(--body--font-size--24);
	--h4--font-weight: var(--body--font-weight--bold);
	--h4--letter-spacing: 0;
	--h4--line-height: 1.25;
	--h4--text-transform: none;

	@include media-breakpoint-up(md) {
		--h4--font-size: var(--body--font-size--28);
	}

H5 convallis a cras

	--h5--color: var(--color--primary);
	--h5--font-size: var(--body--font-size--18);
	--h5--font-weight: var(--body--font-weight--bold);
	--h5--letter-spacing: 0;
	--h5--line-height: 1.25;
	--h5--text-transform: none;

	@include media-breakpoint-up(md) {
		--h5--font-size: var(--body--font-size--20);
	}

H6 a diam maecenas

	--h6--color: var(--color--primary);
	--h6--font-size: var(--body--font-size--14);
	--h6--font-weight: var(--body--font-weight--bold);
	--h6--letter-spacing: 0;
	--h6--line-height: 1.25;
	--h6--text-transform: none;

	@include media-breakpoint-up(md) {
		--h6--font-size: var(--body--font-size--16);
	}

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et leo duis ut diam quam. Sed velit dignissim sodales ut eu sem. Metus vulputate eu scelerisque felis imperdiet proin. Interdum consectetur libero id faucibus nisl tincidunt.

--body--color: var(--color--black);
--body--font-family: 'Helvetica Neue', Arial, sans-serif;
--body--font-size: var(--body--font-size--14);
--body--font-weight: 400;
--body--font-weight--light: 300;
--body--font-weight--bold: 700;
--body--line-height: 1.75;

@include media-breakpoint-up(md) {
	--body--font-size: var(--body--font-size--16);
}

Tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et leo duis ut diam quam. Sed velit dignissim sodales ut eu sem. Metus vulputate eu scelerisque felis imperdiet proin. Interdum consectetur libero id faucibus nisl tincidunt.

--body--font-size--tiny: var(--body--font-size--10);

@include media-breakpoint-up(md) {
	--body--font-size--tiny: var(--body--font-size--12);
}

Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et leo duis ut diam quam. Sed velit dignissim sodales ut eu sem. Metus vulputate eu scelerisque felis imperdiet proin. Interdum consectetur libero id faucibus nisl tincidunt.

--body--font-size--small: var(--body--font-size--12);

@include media-breakpoint-up(md) {
	--body--font-size--small: var(--body--font-size--14);
}

Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et leo duis ut diam quam. Sed velit dignissim sodales ut eu sem. Metus vulputate eu scelerisque felis imperdiet proin. Interdum consectetur libero id faucibus nisl tincidunt.

--body--font-size--large: var(--body--font-size--16);

@include media-breakpoint-up(md) {
	--body--font-size--large: var(--body--font-size--18);
}

Huge

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et leo duis ut diam quam. Sed velit dignissim sodales ut eu sem. Metus vulputate eu scelerisque felis imperdiet proin. Interdum consectetur libero id faucibus nisl tincidunt.

--body--font-size--huge: var(--body--font-size--18);

@include media-breakpoint-up(md) {
	--body--font-size--huge: var(--body--font-size--20);
}

Intro

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et leo duis ut diam quam. Sed velit dignissim sodales ut eu sem. Metus vulputate eu scelerisque felis imperdiet proin. Interdum consectetur libero id faucibus nisl tincidunt.

--body--font-size--intro: var(--body--font-size--20);

@include media-breakpoint-up(md) {
	--body--font-size--intro: var(--body--font-size--22);
}

List

• Lorem ipsum dolor sit amet
• Et leo duis ut diam quam
• Sed velit dignissim sodales ut eu sem
• Metus vulputate eu scelerisque felis imperdiet proin
• Interdum consectetur libero id faucibus nisl tincidunt

//text
--list--color: var(--body--color);
--list--font-size: var(--body--font-size);
--list--font-weight: var(--body--font-weight);
--list--letter-spacing: var(--body--letter-spacing);
--list--line-height: var(--body--line-height);
--list--text-transform: var(--body--text-transform);

//spacing
--list--padding-bottom: var(--body--color);
--list--padding-left: calc(var(--spacer--very-small) * 2 + 4px);
--list--padding-top: var(--body--color);
--list--padding-right: var(--body--color);

// bullet (ul)
--list--bullet--color: var(--color--primary);
--list--bullet--height: 4px;
--list--bullet--indent: var(--spacer--very-small);
--list--bullet--width: 4px;

Ordered List

1. Lorem ipsum dolor sit amet
2. Et leo duis ut diam quam
3. Sed velit dignissim sodales ut eu sem
4. Metus vulputate eu scelerisque felis imperdiet proin
5. Interdum consectetur libero id faucibus nisl tincidunt

// number (ol)
--list--number--color: var(--list--bullet--color);
--list--number--font-weight: var(--body--font-weight);

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec ultrices dui sapien eget mi proin sed libero. Tempor id eu nisl nunc.

Ac Feugiat

// text
--quote--color: var(--body--color);
--quote--font-family: var(--heading--font-family);
--quote--font-size: var(--body--font-size--22);
--quote--font-weight: var(--body--font-weight);
--quote--letter-spacing: var(--body--letter-spacing);
--quote--line-height: var(--body--line-height);
--quote--text-transform: var(--body--text-transform);

// spacing
--quote--gap: var(--spacer--small);
--quote--padding-bottom: 0;
--quote--padding-left: 0;
--quote--padding-top: 0;
--quote--padding-right: 0;

@include media-breakpoint-up(md) {
	--quote--padding-left: calc(var(--grid--max-width) * 0.08333);
	--quote--padding-right: var(--quote--padding-left);
}

// icon
--quote--icon--color: var(--color--primary);
--quote--icon--height: 24px;
--quote--icon--mask-image: var(--icon--quote);
--quote--icon--width: 32px;

@include media-breakpoint-up(md) {
	--quote--icon--height: 36px;
	--quote--icon--width: 48px;
}

// background
--cite--background-color: transparent;

// text
--cite--color: var(--jb--h6--color);
--cite--font-family: var(--jb--h6--font-family);
--cite--font-size: var(--jb--h6--font-size);
--cite--font-style: var(--jb--h6--font-style);
--cite--font-weight: var(--jb--h6--font-weight);
--cite--letter-spacing: var(--jb--h6--letter-spacing);
--cite--line-height: var(--jb--h6--line-height);
--cite--text-decoration: var(--jb--h6--text-decoration);
--cite--text-transform: var(--jb--h6--text-transform);

// spacing
--cite--margin-bottom: 0;
--cite--margin-left: 0;
--cite--margin-right: 0;
--cite--margin-top: 0;

--cite--padding-bottom: 0;
--cite--padding-left: 0;
--cite--padding-right: 0;
--cite--padding-top: 0;

Buttons

// background
--button--background-color: var(--color--primary);
--button--background-color--hover: var(--color--white);

// border
--button--border-color: var(--color--primary);
--button--border-color--hover: var(--color--white);
--button--border-radius: var(--body--border-radius--small);
--button--border-style: solid;
--button--border-width: 2px;

// text
--button--color: var(--color--white);
--button--color--hover: var(--color--primary);
--button--font-family: var(--body--font-family);
--button--font-size: var(--body--font-size);
--button--font-style: normal;
--button--font-weight: 400;
--button--letter-spacing: var(--body--letter-spacing);
--button--line-height: var(--body--line-height);
--button--text-decoration: none;
--button--text-transform: none;

// spacing
--button--padding-bottom: var(--spacer--very-small);
--button--padding-left: var(--spacer);
--button--padding-right: var(--spacer);
--button--padding-top: var(--spacer--very-small);

// icon
--button--icon--background-color: var(--color--primary);
--button--icon--background-color--hover: var(--color--white);
--button--icon--color: var(--color--white);
--button--icon--color--hover: var(--color--primary);
--button--icon--content: '';
--button--icon--gap: 8px;
--button--icon--height: 12px;
--button--icon--mask-image: var(--icon--arrow);
--button--icon--mask-position: 50%;
--button--icon--width: 12px;

Button Style 2

.is-style-secondary {
	// background
	--button--background-color: var(--color--white);
	--button--background-color--hover: var(--color--secondary);

	// border
	--button--border-color: var(--color--secondary);
	--button--border-color--hover: var(--color--secondary);

	// text
	--button--color: var(--color--secondary);
	--button--color--hover: var(--color--white);

	// icon
	--button--icon--color: var(--color--primary--dark);
	--button--icon--color--hover: var(--color--primary--dark);
}

Callout Link & File Download

.is-style-callout-link,
.is-style-file-download {
	// background
	--button--background-color: transparent;
	--button--background-color--hover: transparent;

	// border
	--button--border-color: transparent;
	--button--border-color--hover: transparent;

	// text
	--button--color: var(--body--color);
	--button--color--hover: var(--body--color);
}

.is-style-callout-link {
	// icon
	--button--icon--mask-position: 50%, calc(var(--button--icon--width) * -1 * 2.5) 50%;
	--button--icon--mask-position--hover: calc(var(--button--icon--width) * 2.5) 50%, 50%;
}

.is-style-file-download {
	// icon
	--button--icon--mask-image: var(--icon--download);
}

Accordion

Filled Circle

Filled Square

Left Expand

Quick Links

Callout Box