The Font Gallery Component is designed to display your brand’s fonts in a visually organized grid. It pulls from the fonts you’ve defined in the Font Manager, allowing you to present each typeface with its name, style, and usage in a consistent, professional layout.

This component is perfect for typography sections in your brand guide.

🌟 What You Can Do with the Font Gallery Component

Inside this component, you can:

• Add a title and subtitle for the gallery
• Add a category label (e.g., “Primary Fonts”, “Secondary Fonts”)
• Choose how many items appear per row
• Customize colors for titles, text, category labels, and background
• Maintain brand consistency with theme‑aware color options

It’s a simple but powerful way to present your typography system.

🧭 Component Overview

When you open the Font Gallery Component in the Component Editor, you’ll see two main sections:

1. Gallery Text Settings

These fields control the text that appears above and around your font gallery.

Title

A large heading for the section.
Examples:

• “Typography”
• “Brand Fonts”
• “Primary Typeface”

Subtitle

A smaller supporting line.
Examples:

• “Our core type system”
• “Use these fonts for all brand communications”

Category Label

A label that appears above each font item.
Examples:

• “Headline”
• “Body”
• “Display”
• “Sans Serif”

Items Per Row

Choose how many font cards appear in each row:

• 2 per row — large, spacious cards
• 3 per row — balanced layout
• 4 per row — compact grid

This gives you control over the visual density of the gallery.

2. Color Settings

You can customize four color fields:

Title Color

Controls the color of the main gallery title.

Text Color

Controls the color of the subtitle and general text.

Category Label Color

Controls the color of the category label above each font card.

Background Color

Sets the background behind the entire gallery section.

All color fields support:

• HEX values
• Theme color presets
• Leaving blank to use default styling

This ensures your typography section stays visually consistent with your brand.

🎨 Theme‑Aware Color Options

All color pickers automatically pull from your brand’s theme colors, including:

• Light / dark backgrounds
• Highlight colors
• Typography colors

This makes it easy to maintain a cohesive visual style across your entire guide.

💾 Saving Your Changes

As you edit:

• Fields update the component’s JSON automatically
• The preview refreshes in real time
• Click Save Component to finalize your changes

Your font gallery will now appear on the page exactly as configured.

🎯 Summary

The Font Gallery Component helps you:

• Present your brand’s typography in a clean, organized grid
• Add titles, subtitles, and category labels
• Control layout density with items‑per‑row
• Customize colors for full brand consistency
• Build a polished, professional typography section

It’s an essential component for any brand guide that takes typography seriously.