Component Style Guide2026-08-12T13:31:39-06:00

These are the Hathaway Required Components from Figma, wired to Avada / Fusion Builder elements so editors can drop them into any page.

Helpers live in inc/fusion-content.php. Styles load from avada-elements.css.

Accordion

Fusion Toggles

Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.

Open items use a white background with an orange border and orange title.

Buttons

Fusion Button

Card title

Cards map to Fusion columns with a teal border. Use for hub links and feature grids.

Another card

Keep one idea per card. Prefer a single CTA.

Quiet card

Add class hs-card–quiet or hs-card–featured when you need emphasis variants.

Notification

Fusion Alert

Tabs

Fusion Tabs

Active tab uses an orange underline. Condensed scholarship requirements also use this pattern.

Switch tabs to compare tiers without a wide table.

Keep panel copy short — one idea per tab.

Tags

Utility pills

  • Default
  • Success
  • Accent
  • Muted

Text

Fusion Title / Text

Lead text for intros and key points.

Body copy uses Source Sans with bronze headings from Fusion Title.

Muted supporting line for footnotes and meta.

Inputs

Form fields

Helper text sits under the field.

Enter a valid email address.

Pagination

Nav links

Tooltip

Glossary / Popover

Hover the dotted term: ACT scoreACT scoreWhite tooltips with Hathaway Blue Light border match the Figma Tooltip component..

Menu, Navigation & Dialog

Site chrome + Fusion Modal

  • Menu — header dropdown (.hs-nav__sub) matches Figma Menu.
  • Navigation — breadcrumbs + pathway tabs (.hs-pathway-tabs).
  • Dialog — add a Fusion Modal in the builder; button “Modal” field links the trigger.

Sections (Figma 348:13000)

Page layouts compose these section patterns from inc/layouts/fb-helpers.php using the Required Components above.

Honors

$2,360/ semester

Performance

$1,770/ semester

Opportunity

$1,180/ semester

Provisional

$1,180/ semester

Card Grid Icon

Hub and pathway cards

Card Grid Icon

Borderless icon + title cards with a teal primary button from the Required Components set.

Pathway links

Used on Eligibility and Resources hubs. Pass an optional section header as the third argument.

Keep CTAs consistent

Prefer Fusion Button shortcodes (hs-fb-btn) over bare text links inside cards.

Hero Actions / callout

Centered title, supporting copy, and a primary/secondary button group.

Questions about the Hathaway Scholarship?