Customization
Editable, with brand consistency built in
These are custom HubSpot CMS modules, not static page sections. Each module uses Boardwalk brand defaults and exposes editor controls so the marketing team can adjust content and styling per placement — while staying on-brand. Where possible, controls should be dropdowns or token-based options (e.g. choose from the brand palette, preset spacing, or button styles) before allowing a free custom-colour override. The goal is flexible modules that still protect brand consistency.
Editor controls (all modules)
- Background colour — brand palette
- Text colour — brand palette
- Heading font size — preset scale
- Body font size — preset scale
- Button text
- Button URL
- Button style — preset options
- Button colour — brand palette
- Image upload
- Icon upload or selection
- Card content
- Section spacing — preset scale
- Alignment — dropdown
- Visibility toggles for optional elements
Colour, spacing, and style controls should default to brand tokens / preset choices. Reserve free custom overrides for cases the presets can't cover.
Brand defaults (the starting point)
Primary#3035E3
Secondary#0078FF
Accent#EB0B59
White#FFFFFF
Light#F0F8FC
Gray#979797
Text Dark#212139
Dark#272727
Black#000000
Headings · default
Noto Sans Display
Body · default
Lato — interface & paragraph text
How to read this document. Module-specific fields are listed under each module. The standard editor controls above are assumed and not repeated per module. Items marked [ASSUMPTION] are recommendations for the developer to confirm.
Index
Modules
01
Header Navigation (single-line)
boardwalk_header_navPrimary site header. Logo at left, navigation links centered, optional utility/CTA at right. Sticky-capable. Used site-wide as the global header.
boardwalk
Lorem Ipsum
The high-fidelity module above is live — links hover, accordions and carousels work. Use the Light / Blue toggle to preview both background variants (one
theme switch in HubSpot).Editable fields
| Field | Type | Description | Default |
|---|---|---|---|
| logo_image | image | Logo upload. Includes alt text + optional link URL (defaults to home). | Boardwalk logo |
| nav_items | group (repeatable) | Each: link_text (text), link_url (url), new_tab (boolean). | 4 items |
| show_cta | boolean | Toggle the right-side CTA button/link. | false |
| cta_text | text | CTA label (shown when show_cta on). | Apply Now |
| cta_url | url | CTA destination. | — |
| cta_style | choice | Solid / Outline / Text link. | Solid |
| sticky | boolean | Stick header to top on scroll. | true |
| nav_alignment | choice | Center / Left / Right (default Center per request). | Center |
Brand-controlled editor controls (palette-based colour, preset font sizes & spacing, preset button styles, alignment dropdowns, visibility toggles) apply to every module — see Customization above.
Developer notes
Build as HubSpot custom module. Use a repeatable field group for nav items so editors add/remove links. Centered alignment via flex with logo and (optional) CTA as fixed-width flanks and nav centered. [ASSUMPTION] If a CTA is present on desktop, true optical centering of the nav requires equal-width left/right flanks or a 3-column grid — recommend CSS grid: [logo | nav(center) | cta]. Provide logo_image_inverse for Blue variant.
QA / acceptance
- Logo renders and links to chosen URL.
- Nav links are horizontally centered on desktop (not right-aligned).
- Hamburger appears at ≤767px and panel opens/closes via keyboard and tap.
- Sticky behavior works without layout shift / content jump.
- Both Light and Blue variants pass WCAG AA contrast.
- Focus order is logical; Esc closes mobile panel.
02
Hero — Split (content left / image right)
boardwalk_hero_splitTop-of-page hero. Eyebrow, two-line-capable title with colored second line, two-line-capable subtitle, one- or two-button variant, optional stat/trust row, and a supporting image. Drives the primary page conversion.
LOREM IPSUM • 2026
Lorem ipsum.
Dolor sit amet.
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem Ipsum Dolor →250+lorem ipsum
40+dolor sit
1984amet since
The high-fidelity module above is live — links hover, accordions and carousels work. Use the Light / Blue toggle to preview both background variants (one
theme switch in HubSpot).Editable fields
| Field | Type | Description | Default |
|---|---|---|---|
| eyebrow_text | text | Small uppercase label. Supports a dot separator. | STUDENT HOUSING • 2026 |
| show_eyebrow | boolean | Toggle eyebrow. | true |
| title_line_1 | text | First title line. | Live close. |
| title_line_2 | text | Optional second title line (colored). | Stress less. |
| show_title_line_2 | boolean | Toggle second title line. | true |
| subtitle_line_1 | text | First subtitle line. | Stay close to campus… |
| subtitle_line_2 | text | Optional second subtitle line. | focus on school… |
| show_subtitle_line_2 | boolean | Toggle second subtitle line. | true |
| button_count | choice | One Button / Two Buttons. | One |
| primary_btn_text | text | Primary button label. | Download Your Free Guide |
| primary_btn_url | url | Primary button URL. | — |
| primary_btn_icon | boolean | Show trailing arrow icon. | true |
| secondary_btn_text | text | Secondary button label (Two-button variant). | — |
| secondary_btn_url | url | Secondary button URL. | — |
| show_stats | boolean | Toggle stat/trust row. | true |
| stat_items | group (repeatable) | Each: stat_number (text), stat_label (text). | 3 items |
| hero_image | image | Right-side image (alt required). | — |
| image_position | choice | Image Right / Left (desktop). | Right |
Brand-controlled editor controls (palette-based colour, preset font sizes & spacing, preset button styles, alignment dropdowns, visibility toggles) apply to every module — see Customization above.
Developer notes
Wrap title lines in spans for independent color. Stat row is a repeatable group. Two-button variant reveals secondary fields. On Blue variant: title both lines White (line 2 may use Light or Accent for pop — [ASSUMPTION] default line 2 = White, optional Accent), subtitle rgba(255,255,255,0.85), primary button becomes White fill / Primary text, stat numbers White.
QA / acceptance
- Title supports 1 or 2 lines; line 2 hides cleanly when toggled off.
- Subtitle supports 1 or 2 lines.
- One-button and two-button variants both render correctly.
- Stat row hides entirely when toggled off (no empty divider).
- Image renders slightly smaller than full column and is responsive.
- Heading level configurable; only one H1 per page.
- Both variants pass AA contrast.
03
Section Heading (eyebrow + title + subtitle)
boardwalk_section_headingReusable section header to introduce content blocks. Eyebrow, title, subtitle. Left- or center-aligned.
LOREM IPSUM DOLOR
Lorem ipsum dolor sit amet consectetur.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
The high-fidelity module above is live — links hover, accordions and carousels work. Use the Light / Blue toggle to preview both background variants (one
theme switch in HubSpot).Editable fields
| Field | Type | Description | Default |
|---|---|---|---|
| eyebrow_text | text | Uppercase label. | FOR PARENTS & GUARDIANS |
| show_eyebrow | boolean | Toggle eyebrow. | true |
| title | text | Section title. | Peace of mind for students and families. |
| subtitle | richtext | Supporting copy (multi-line). | Moving out is a big step… |
| show_subtitle | boolean | Toggle subtitle. | true |
Brand-controlled editor controls (palette-based colour, preset font sizes & spacing, preset button styles, alignment dropdowns, visibility toggles) apply to every module — see Customization above.
Developer notes
Lightweight module. On Blue variant: eyebrow Light/White-translucent, title White, subtitle rgba(255,255,255,0.85).
QA / acceptance
- Eyebrow and subtitle each toggle independently.
- Left and Center alignment both render correctly.
- Heading level configurable.
- Both variants pass AA contrast.
04
Card Grid — Icon Cards
boardwalk_cards_icon_gridA flexible row of cards, each with an icon, heading, body, an optional highlight line (e.g. a stat or offer), and an optional link/button. Covers feature cards, scholarship tiers, and partner-offer cards in one module. Can render as a static grid or a horizontal carousel.
The high-fidelity module above is live — links hover, accordions and carousels work. Use the Light / Blue toggle to preview both background variants (one
theme switch in HubSpot).Editable fields
| Field | Type | Description | Default |
|---|---|---|---|
| layout_mode | choice | Grid / Carousel. | Grid |
| cards | group (repeatable) | Each: icon (image/icon select), heading (text), body (richtext), show_highlight (boolean), highlight_text (text), show_link (boolean), link_label (text), link_url (url), link_style (choice: Text link / Button), new_tab (boolean). | 4 cards |
| card_style | choice | Filled (white card) / Soft (light fill) / Bordered. | Filled |
| show_arrows | boolean | Show prev/next arrows (Carousel mode). | true |
Brand-controlled editor controls (palette-based colour, preset font sizes & spacing, preset button styles, alignment dropdowns, visibility toggles) apply to every module — see Customization above.
Developer notes
One repeatable card group covers feature, stat, and offer use-cases. The highlight line and the link/button are each independently hideable per card via show_highlight / show_link. [ASSUMPTION] Icon stays centered while text alignment is independent — confirm. [ASSUMPTION] Carousel uses CSS scroll-snap; no autoplay. On Blue variant: section Primary; cards White or translucent per card_style; highlight/link colors adjust for contrast.
QA / acceptance
- Icon is centered in every card.
- Highlight line shows/hides per card and renders bold when shown.
- Link/button shows/hides per card; Text-link and Button styles both render.
- Text alignment toggle changes heading+body+highlight to L/C/R without moving the icon.
- Grid (2/3/4 columns) and Carousel modes both render and reflow responsively.
- Carousel supports arrows, swipe, and keyboard.
- Both variants pass AA contrast.
05
FAQ — Split (intro left / accordion right)
boardwalk_faq_splitAnswer common questions. Left intro column (eyebrow, title, subtitle, button) + right accordion of Q&A items.
LOREM IPSUM
Dolor sit amet.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem Ipsum →Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, quis nostrud exercitation.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.
Cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
The high-fidelity module above is live — links hover, accordions and carousels work. Use the Light / Blue toggle to preview both background variants (one
theme switch in HubSpot).Editable fields
| Field | Type | Description | Default |
|---|---|---|---|
| eyebrow_text | text | Uppercase label. | FREQUENTLY ASKED |
| title | text | Intro title. | Quick answers. |
| subtitle | richtext | Intro copy. | Moving out for school… |
| show_button | boolean | Toggle intro button. | true |
| button_text | text | Button label. | Download the First-Place Guide |
| button_url | url | Button URL. | — |
| faq_items | group (repeatable) | Each: question (text), answer (richtext). | 6 items |
| open_behavior | choice | Allow Multiple Open / Single Open. | Multiple |
| first_open | boolean | Open first item by default. | false |
Brand-controlled editor controls (palette-based colour, preset font sizes & spacing, preset button styles, alignment dropdowns, visibility toggles) apply to every module — see Customization above.
Developer notes
Accordion JS: respect open_behavior. [ASSUMPTION] Default multi-open; first_open optional. On Blue variant: section Primary, text White, hairlines rgba(255,255,255,0.18), toggle border white-translucent, button becomes White fill / Primary text.
QA / acceptance
- Accordion expands/collapses via click and keyboard.
- Single-open vs multi-open respected per setting.
- first_open opens item 1 when enabled.
- aria-expanded reflects state; focus visible.
- Intro button toggles on/off.
- Both variants pass AA contrast.
06
CTA Banner — Centered
boardwalk_cta_bannerBottom-of-page conversion banner. Centered title (1–2 lines), subtitle, and button(s). Light variant uses a white background with a Primary button; Blue variant uses a Primary background with a white inverse button.
Lorem ipsum dolor sit amet consectetur?
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Take the Quiz →The high-fidelity module above is live — links hover, accordions and carousels work. Use the Light / Blue toggle to preview both background variants (one
theme switch in HubSpot).Editable fields
| Field | Type | Description | Default |
|---|---|---|---|
| title | text | Banner title (supports 2 lines via line break). | What's Your Living-On-Your-Own Personality? |
| subtitle | richtext | Supporting copy. | Are you a Budget Boss… |
| show_subtitle | boolean | Toggle subtitle. | true |
| button_count | choice | One / Two buttons. | One |
| primary_btn_text | text | Primary label. | Take the Quiz |
| primary_btn_url | url | Primary URL. | — |
| secondary_btn_text | text | Secondary label. | — |
| secondary_btn_url | url | Secondary URL. | — |
Brand-controlled editor controls (palette-based colour, preset font sizes & spacing, preset button styles, alignment dropdowns, visibility toggles) apply to every module — see Customization above.
Developer notes
This module's Light variant = white/transparent bg with Primary button + dark text; Blue variant = Primary bg; plus the native dark default. [ASSUMPTION] Provide all three via theme choice (Light / Blue / Dark). Two-button variant matches hero.
QA / acceptance
- Title supports 1–2 lines centered.
- Subtitle toggles cleanly.
- One/two button variants render and center.
- Inverse button legible on dark and blue backgrounds.
- All variants pass AA contrast.
07
Page Heading — Simple (title + description)
boardwalk_page_heading_simpleMinimal page-top heading: a title and one line of supporting description. No eyebrow, no button.
Lorem Ipsum
Dolor sit amet consectetur adipiscing elit sed do eiusmod.
The high-fidelity module above is live — links hover, accordions and carousels work. Use the Light / Blue toggle to preview both background variants (one
theme switch in HubSpot).Editable fields
| Field | Type | Description | Default |
|---|---|---|---|
| title | text | Page title. | Page Heading |
| description | text | Single-line supporting description. | Short supporting description of what this page is about. |
| show_description | boolean | Toggle description. | true |
Brand-controlled editor controls (palette-based colour, preset font sizes & spacing, preset button styles, alignment dropdowns, visibility toggles) apply to every module — see Customization above.
Developer notes
Simplest module. On Blue variant: title White, description rgba(255,255,255,0.85).
QA / acceptance
- Title and description render; description toggles off cleanly.
- Alignment L/C works.
- Heading level configurable.
- Both variants pass AA contrast.
08
Process Steps — Numbered (horizontal)
boardwalk_process_stepsExplain a sequence (e.g. how to claim/RSVP). Numbered badges with icon accents, titles, and descriptions, joined by a connector line.
1
Lorem ipsum
Dolor sit amet consectetur adipiscing elit.
2
Dolor sit amet
Sed do eiusmod tempor incididunt ut labore.
3
Consectetur
Ut enim ad minim veniam quis nostrud.
4
Adipiscing elit
Duis aute irure dolor in reprehenderit.
The high-fidelity module above is live — links hover, accordions and carousels work. Use the Light / Blue toggle to preview both background variants (one
theme switch in HubSpot).Editable fields
| Field | Type | Description | Default |
|---|---|---|---|
| steps | group (repeatable) | Each: number (text), icon (image/select), title (text), description (richtext). | 4 steps |
| show_connector | boolean | Show dashed connector line. | true |
| show_step_icons | boolean | Show accent icon badge on each step. | true |
| number_mode | choice | Manual / Auto-increment. | Manual |
| bg_texture | boolean | Show dotted background texture. | true |
Brand-controlled editor controls (palette-based colour, preset font sizes & spacing, preset button styles, alignment dropdowns, visibility toggles) apply to every module — see Customization above.
Developer notes
[ASSUMPTION] number_mode default Manual for flexibility; Auto-increment available. Dotted texture = CSS pattern (not image upload) for crispness. On Blue variant: badges White circle / Primary number OR keep Primary badge with white ring — provide tokens; connector rgba(255,255,255,0.35); titles White.
QA / acceptance
- Steps render with number, icon, title, description.
- Connector shows/hides via toggle; reflows vertical on mobile.
- Manual and auto-increment numbering both work.
- Dotted texture toggles.
- Both variants pass AA contrast.
09
Testimonials — Carousel (rating + reviews)
boardwalk_testimonials_carouselBuild trust with resident reviews. Centered heading + rating pill, then a carousel of review cards (avatar, name, role, stars, quote).
Lorem Ipsum Dolor Sit
LI
Lorem Ipsum
Dolor sit amet
★★★★★
"Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
DS
Dolor Sit
Consectetur elit
★★★★★
"Ut enim ad minim veniam quis nostrud exercitation ullamco laboris."
CA
Consectetur A.
Adipiscing elit
★★★★★
"Duis aute irure dolor in reprehenderit in voluptate velit esse."
SE
Sed Eiusmod
Tempor incididunt
★★★★★
"Excepteur sint occaecat cupidatat non proident sunt in culpa."
The high-fidelity module above is live — links hover, accordions and carousels work. Use the Light / Blue toggle to preview both background variants (one
theme switch in HubSpot).Editable fields
| Field | Type | Description | Default |
|---|---|---|---|
| title | text | Section title. | What Our Residents Say |
| show_rating_pill | boolean | Toggle rating pill. | true |
| rating_value | text | Aggregate score. | 4.7 |
| rating_count_text | text | Supporting text. | from 2,800+ residents |
| reviews | group (repeatable) | Each: avatar_image (image, optional), initials (text), avatar_color (color), name (text), role (text), star_count (choice 1–5), quote (richtext). | 4+ reviews |
| slides_per_view_desktop | number | Cards at ≥1024. | 4 |
| slides_per_view_tablet | number | Cards at 768–1023. | 2 |
| slides_per_view_mobile | number | Cards at ≤767. | 1 |
| show_arrows | boolean | Show prev/next. | true |
Brand-controlled editor controls (palette-based colour, preset font sizes & spacing, preset button styles, alignment dropdowns, visibility toggles) apply to every module — see Customization above.
Developer notes
[ASSUMPTION] avatar_color per-card editable (defaults cycle brand palette); star_count is 1–5 choice. Avatar falls back to initials when no image. On Blue variant: section Primary, cards White, header text White, pill border white-translucent.
QA / acceptance
- Header title + rating pill render; pill toggles off cleanly.
- Review cards show avatar (image or initials), name, role, stars, quote.
- Star count reflects per-card setting and is screen-reader accessible.
- Carousel works via arrows, swipe, keyboard.
- Both variants pass AA contrast.
10
Feature Cards — Icon header + List (3-up)
boardwalk_feature_cards_listGroup benefits into cards, each with an icon+title header, a short description, a divider, and a bulleted feature list with leading icons.
Lorem Ipsum
Dolor sit amet consectetur adipiscing elit sed do eiusmod.
- ✓Lorem ipsum dolor sit
- ✓Amet consectetur elit
- ✓Sed do eiusmod tempor
Dolor Sit
Tempor incididunt ut labore et dolore magna aliqua enim.
- ✓Ut enim ad minim veniam
- ✓Quis nostrud exercitation
- ✓Ullamco laboris nisi
Amet Elit
Duis aute irure dolor in reprehenderit in voluptate velit.
- ✓Excepteur sint occaecat
- ✓Cupidatat non proident
- ✓Sunt in culpa qui officia
The high-fidelity module above is live — links hover, accordions and carousels work. Use the Light / Blue toggle to preview both background variants (one
theme switch in HubSpot).Editable fields
| Field | Type | Description | Default |
|---|---|---|---|
| cards | group (repeatable) | Each: icon (image/select), title (text), description (richtext), list_items (group: item_icon, item_text). | 3 cards |
| list_icon_uniform | boolean | Use one icon for all list items vs per-item. | false |
Brand-controlled editor controls (palette-based colour, preset font sizes & spacing, preset button styles, alignment dropdowns, visibility toggles) apply to every module — see Customization above.
Developer notes
Nested repeater: cards → list_items. [ASSUMPTION] Reference shows mixed per-item icons, so default per-item editable icon; list_icon_uniform lets editor force one icon. On Blue variant: section Primary, cards White or translucent, icon tile stays Primary or inverts to White/Primary — provide tokens; list text adjusts for contrast.
QA / acceptance
- Cards render icon+title header, description, divider, and list.
- List items support per-item icons; uniform toggle works.
- Column count 2/3 reflows responsively.
- Nested repeaters add/remove correctly.
- Both variants pass AA contrast.
11
Image Carousel — Gallery (caption overlay)
boardwalk_image_carouselHorizontally scrolling image cards for property galleries, community photos, or visual storytelling. Cards snap into place on scroll and fully support touch/swipe on mobile. Each card carries a title + location caption over a gradient scrim.
The high-fidelity module above is live — links hover, accordions and carousels work. Use the Light / Blue toggle to preview both background variants (one
theme switch in HubSpot).Editable fields
| Field | Type | Description | Default |
|---|---|---|---|
| cards | group (repeatable) | Each: image (image, alt required), title (text), subtitle (text), link_url (url, optional), new_tab (boolean). | 3+ cards |
| card_clickable | boolean | Make whole card a link (vs. caption only / none). | false |
| aspect_ratio | choice | Portrait 3:4 / Square 1:1 / Landscape 4:3. | Portrait 3:4 |
| slides_per_view_desktop | number | Cards visible at >=1024. | 3 |
| slides_per_view_tablet | number | Cards visible 768-1023. | 2 |
| slides_per_view_mobile | number | Cards visible <=767 (use 1.1 for peek). | 1.1 |
| show_arrows | boolean | Show prev/next arrows. | true |
| show_dots | boolean | Show pagination dots. | false |
| loop | boolean | Loop carousel. | false |
| arrow_color | color | Chevron color. | Accent #EB0B59 |
| scrim_opacity | number | Caption gradient scrim strength (0-100). | 55 |
Brand-controlled editor controls (palette-based colour, preset font sizes & spacing, preset button styles, alignment dropdowns, visibility toggles) apply to every module — see Customization above.
Developer notes
Recommend CSS scroll-snap (scroll-snap-type: x mandatory) for native touch/swipe + snap, with JS only to wire the arrow buttons to scrollBy(card width). [ASSUMPTION] No autoplay; manual nav. [ASSUMPTION] Mobile slides_per_view 1.1 so the next card peeks. [ASSUMPTION] Arrow chevron defaults to Accent though reference reads yellow -- exposed as arrow_color so editors set it. On Blue variant: section background Primary; cards/images unchanged; arrows keep white circle with chosen chevron; section heading (if used above) inverts via that module.
QA / acceptance
- Cards scroll horizontally and snap into place.
- Touch/swipe works on mobile; next card peeks at <=767.
- Prev/next arrows scroll one card and are keyboard operable.
- Caption title + location render legibly over the scrim.
- Aspect ratio, slides-per-view, arrows, dots, loop toggles all work.
- card_clickable wraps the card in an accessible link when enabled.
- Both Light and Blue section variants render correctly.
12
Social Share Strip
boardwalk_social_shareA compact strip of social share buttons with an optional 'Share:' label. Lets visitors share the current page to LinkedIn, X, Facebook, email, and more.
The high-fidelity module above is live — links hover, accordions and carousels work. Use the Light / Blue toggle to preview both background variants (one
theme switch in HubSpot).Editable fields
| Field | Type | Description | Default |
|---|---|---|---|
| show_label | boolean | Show the leading label. | true |
| label_text | text | Label text. | Share: |
| platform_linkedin | boolean | Show LinkedIn. | true |
| platform_x | boolean | Show X (Twitter). | true |
| platform_facebook | boolean | Show Facebook. | true |
| platform_email | boolean | Show Email (mailto). | true |
| platform_whatsapp | boolean | Show WhatsApp. | false |
| platform_reddit | boolean | Show Reddit. | false |
| platform_copy | boolean | Show Copy-link button. | false |
| button_style | choice | Outline / Filled. | Outline |
| button_shape | choice | Circle / Rounded square. | Circle |
| open_new_tab | boolean | Open share targets in a new tab. | true |
Brand-controlled editor controls (palette-based colour, preset font sizes & spacing, preset button styles, alignment dropdowns, visibility toggles) apply to every module — see Customization above.
Developer notes
[ASSUMPTION] Share targets auto-generate from the current page URL + page title via standard share-intent endpoints (no manual URLs). [ASSUMPTION] Email uses mailto: with subject=page title, body=URL. [ASSUMPTION] Copy-link uses the Clipboard API with a fallback. Buttons open in new tab when open_new_tab on. On Blue variant default to translucent-white outline + white glyphs as shown; on Light, default glyphs to each platform brand color or Text Dark (editor choice via icon_color).
QA / acceptance
- Label shows/hides via toggle; text editable.
- Each platform toggles independently; only enabled ones render.
- Share links open the correct platform intent for the current page.
- Email opens a mailto draft; Copy-link copies URL with confirmation.
- Outline/filled and circle/rounded styles both render.
- Alignment L/C/R works; row wraps cleanly on mobile.
- Each button has an accessible label and visible focus; both variants pass AA.