Shell & navigation
Back to docsSpectra shell pieces stay intentionally small: brand, nav, header, hero, and footer. Compose them into a frame instead of treating them like one giant layout component.
Shell API
| Class | Used for | Notes |
|---|---|---|
.sp-brand | Brand lockup | Inline-flex row for logo, text, and optional badge. |
.sp-brand__logo | Brand mark | Sizes the logo with token-driven dimensions. |
.sp-brand__text | Brand name | Uses the type scale and semibold weight. |
.sp-nav | Primary navigation row | Wraps nav links with consistent gaps. |
.sp-nav__link | Nav item | Rounded link with hover, active, and focus-visible behavior. |
.sp-header | Top shell bar | Surface background with bottom border. |
.sp-header__inner | Header layout | Flex row that spaces brand, nav, and optional actions. |
.sp-header__actions | Header actions slot | Inline action row on the right side. |
.sp-hero | Page hero section | Large top spacing using the hero token rhythm. |
.sp-hero__inner | Hero width wrapper | Centers hero content inside container max width. |
.sp-hero__title | Hero headline | Display-sized title using the typography tokens. |
.sp-hero__sub | Hero supporting copy | Readable line length inside the hero. |
.sp-hero__actions | Hero action row | Wrap-friendly action row for primary controls. |
.sp-hero--surface | Surface hero variant | Adds a surface background and bottom border. |
.sp-footer | Footer region | Outer footer wrapper with top margin rhythm. |
.sp-footer__brand | Footer brand row | Aligns mark + text in the footer block. |
.sp-footer__title | Footer title | Semibold footer heading. |
.sp-footer__desc | Footer supporting copy | Muted text with readable max width. |
.sp-footer__cta | Footer action group | Flexible row for CTA links or buttons. |
.sp-footer__links | Footer link list | Grid list for grouped footer links. |
.sp-footer__link | Footer text link | Muted by default, brightens on hover. |
.sp-footer__legalLinks | Legal/meta links | Inline row for bottom legal links. |
Preview
Header
Hero
Build the frame, then fill it.
Brand, navigation, hero, and footer should feel related because they all pull from the same token system.