Typography Classes

Typography Classes

Here is a complete list of CSS variables for typography classes, formatted for easy pasting into Bricks Builder’s CSS Variables section. This includes variables for heading sizes, heading colors, text sizes, text colors, and text styles.

/* Heading Size */
--c-h1-fat: 3rem; /* Adjust value as needed */
--c-h1: 2.5rem;
--c-h2: 2rem;
--c-h3: 1.75rem;
--c-h4: 1.5rem;
--c-h5: 1.25rem;

/* Heading Color */
--c-heading-light: #f9f9f9; /* Adjust color as needed */
--c-heading-light-alt: #e0e0e0;
--c-heading-dark: #222222;
--c-heading-dark-alt: #333333;
--c-heading-accent: #ff6347; /* Example accent color */
--c-heading-accent-alt: #ff7b61;

/* Text Size */
--c-text-s: 0.875rem;
--c-text-m: 1rem;
--c-text-l: 1.25rem;
--c-text-xl: 1.5rem;

/* Text Color */
--c-text-light: #f9f9f9;
--c-text-dark: #222222;
--c-text-accent: #ff6347; /* Example accent color */

/* Text Styles */
--c-uppercase: uppercase;
--c-lowercase: lowercase;
--c-underline: underline;
--c-bold: bold;
--c-italic: italic;
How to Use in Bricks Builder
  • Paste the Variables: Copy all the lines and paste them into the CSS Variables field in Bricks Builder under Bricks > Settings > Variables.
  • Using the Variables in CSS:
    • Heading and Text Sizes: Use font-size for headings and text.
font-size: var(--c-h1); /* For H1 size */
font-size: var(--c-text-m); /* For medium text size */

Colors: Apply with color.

color: var(--c-heading-dark); /* For dark heading color */
color: var(--c-text-accent); /* For accent text color */

Text Styles: Apply with text-transform, text-decoration, or font-weight.

text-transform: var(--c-uppercase); /* For uppercase text */
text-decoration: var(--c-underline); /* For underline text */
font-weight: var(--c-bold); /* For bold text */
font-style: var(--c-italic); /* For italic text */

These variables create a flexible, responsive typography system for headings, text, and styles in Bricks Builder. Adjust sizes and colors as needed to fit your design specifications.

Example Code for Typography Variables Page

This example showcases heading and text size variables.

<div class="text-demo">
  <p style="font-size: var(--c-h1);">Heading H1</p>
  <p style="font-size: var(--c-h2);">Heading H2</p>
  <p style="font-size: var(--c-h3);">Heading H3</p>
  <p style="font-size: var(--c-h4);">Heading H4</p>
  <p style="font-size: var(--c-h5);">Heading H5</p>
  <p style="font-size: var(--c-text-s);">Text Small</p>
  <p style="font-size: var(--c-text-m);">Text Medium</p>
  <p style="font-size: var(--c-text-l);">Text Large</p>
  <p style="font-size: var(--c-text-xl);">Text X-Large</p>
</div>

<style>
  .text-demo p {
    margin: 0.5rem 0;
    color: #333;
  }
</style>

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Text Small

Text Medium

Text Large

Text X-Large

This code displays headings and text sizes with different font sizes according to your defined variables.