component-library

name	component-library
description	Defines every reusable UI component for marketing website construction including hero variants, feature components, social proof, CTA, content, people/profile, timeline, navigation/index, form, and media components. Specifies content slots, configuration variants, and responsive behavior for each component. Use when mapping brief content to components, selecting component variants, or understanding component composition rules.
version	5.0.2

Components — UI Block Library

This file defines every reusable component available for marketing website construction. Each component specifies its content slots, configuration variants, and responsive behavior. Components cover all 14 page types supported by the layout system.

Boundary note: This file owns what a component IS — its content slots, purpose, and presentation variants. How a component is spatially arranged on a page (split, grid, sidebar, etc.) is owned by layout-patterns/SKILL.md. The same component can be placed in different layout types depending on the page context.

→ For how components are arranged into page layouts: see layout-patterns/SKILL.md → For token values applied to components: see design-tokens/SKILL.md → For HTML markup patterns: see html-generator/SKILL.md → For CSS implementation rules: see css-js-generator/SKILL.md → For people/profile, timeline, navigation/index, form, media components and composition rules: see component-specs.md

---

1 — Component Selection Logic

By Content Type

Content from Brief	Component	Condition
Primary headline + subheadline + CTA	Hero	Always — every page has one
Feature name + description (short)	Feature Card	Description ≤ 2 sentences
Feature name + description (long) + screenshot	Feature Row	Description 2+ paragraphs with image
Multiple features (4–6, short)	Feature Grid	Grid of Feature Cards
Multiple features (7+)	Tabbed Feature Panel	Or Accordion, based on variation axis
Testimonial quote + attribution	Testimonial Card	Single quote
Multiple testimonials (3+)	Testimonial Carousel or Grid	Based on variation axis
Customer / partner logos	Logo Bar	Any number of logos
Single statistic + label	Metric Item	Inline within Metrics Bar
Multiple statistics	Metrics Bar	Row of Metric Items
Question + answer pairs	FAQ Accordion	Any number of Q&A pairs
CTA headline + button(s)	CTA Section	Closing section and optionally mid-page
Pricing tiers with names + prices	Pricing Table	Comparison table or card layout
Integration / tool logos + descriptions	Integration Grid	Grid of integration cards
Large pull quote or highlighted text	Pull Quote	Mid-page editorial emphasis
Long-form article body paragraphs	Rich Text Block	Blog article, documentation, case study body
Downloadable asset + description	Download Card	Gated or direct download
Person photo + name + role + bio	Team Card	About page, company sections
Event speaker + photo + title + company	Speaker Card	Event / webinar pages
Author + photo + role + short bio	Author Bio	Blog article footer
Article title + excerpt + date + author	Article Card	Blog index, resource library, case studies
Sequential dated events or milestones	Timeline	Company history, case study journey, roadmap
Agenda sessions with times + speakers	Agenda List	Event / webinar pages
Live countdown to a future date	Countdown Timer	Event pages
Event name + date + time + format	Event Details Block	Event / webinar pages
Form fields (contact, registration, etc.)	Form	Contact, event, newsletter, gated download
Category / topic filter row	Filter Bar	Blog index, integration catalog, resource library
Keyword search input	Search Bar	Documentation hub, resource catalog
Page navigation or load more	Pagination	Blog index, catalog pages
Grid of images / screenshots / videos	Media Gallery	Portfolio, event highlights, product screenshots
Embedded map + location	Map Embed	Contact page with office locations

By Feature Count

Count	Recommended Component	Layout Type (from layout-patterns)
1–3	Feature Row (alternating)	split-50 or split-60-40
4–6	Feature Grid	grid-3col or grid-2col
7–9	Tabbed Feature Panel	tab-panel
10+	Accordion or multi-section	accordion-stack

By Page Type (Form and Index Selection)

Page Type	Form Variant	Index/Listing Component
Contact	contact	—
Event / Webinar	registration	—
Resource / Download	download-gate	Article Card
Blog Index	newsletter (optional)	Article Card
Partner / Integrations	—	Integration Grid or Article Card
Documentation Hub	—	Article Card

---

2 — Hero Components

The Hero component is the page header section. Its spatial arrangement (split, full-bleed, centered) is applied from layout-patterns — the variants below define the presentation style and content configuration.

2.1 — Hero: Split

Two-column layout. Text content one side, visual the other.

Content Slots:

Slot	Content	Required
headline	H1 — primary page headline	Yes
subheadline	Supporting text, 1–2 sentences	Yes
primary_cta	Primary button	Yes
secondary_cta	Secondary button or text link	Optional
image	Product screenshot, illustration, or hero image	Yes
trust_badge	Small logo row or "trusted by" text below CTA	Optional

Variants: image-right (default) / image-left

Responsive: Image stacks below text on tablet/mobile. CTA becomes full-width button on mobile.

---

2.2 — Hero: Full Bleed

Full-width background (image, gradient, or color) with text overlay.

Content Slots:

Slot	Content	Required
headline	H1 — centered, display scale	Yes
subheadline	Supporting text, centered	Yes
primary_cta	Primary button, centered	Yes
secondary_cta	Secondary button, centered	Optional
background	Image, gradient, or solid color	Yes
overlay	Semi-transparent overlay for readability	Optional (required if background is image)

Variants: dark-bg / light-bg (default) / gradient-bg

Responsive: Height reduces; text scales down per typography responsive rules.

---

2.3 — Hero: Product Centered

Large product screenshot or UI mockup as focal point. Minimal text above.

Content Slots:

Slot	Content	Required
headline	H1 — above the product image	Yes
subheadline	Brief supporting text	Optional
primary_cta	Primary button	Yes
product_image	Large product screenshot in browser/device frame	Yes

Variants: browser-frame / device-frame / raw (shadow only)

Responsive: Image scales proportionally; device frame may be hidden on mobile.

---

2.4 — Hero: Text Bold

No image. Oversized typography dominates. Strong value proposition or brand statement.

Content Slots:

Slot	Content	Required
headline	H1 — display scale, oversized	Yes
subheadline	Supporting text	Optional
primary_cta	Primary button	Yes
secondary_cta	Secondary action	Optional

Responsive: Heading scales down on mobile but remains dominant; CTA full-width.

---

2.5 — Hero: Mini

Compact header with reduced height. Used when content should begin close to the top — pricing pages, inner pages, error pages.

Content Slots:

Slot	Content	Required
headline	H1 — standard scale (not display)	Yes
subheadline	Brief text, 1 sentence	Optional
primary_cta	Primary button	Optional

Responsive: Behaves like a standard mobile hero.

---

3 — Feature Components

3.1 — Feature Card

Single feature block with icon, heading, and description. Used inside Feature Grid.

Content Slots:

Slot	Content	Required
icon	Feature icon (SVG or image)	Optional
heading	H3 or H4 — feature name	Yes
description	1–3 sentences	Yes
link	"Learn more" text link	Optional

Variants: icon-top (default) / icon-left / no-icon

Responsive: Full-width stack on mobile.

---

3.2 — Feature Grid

Grid container for multiple Feature Cards.

Content Slots:

Slot	Content	Required
section_heading	H2 — section title	Yes
section_description	Supporting text	Optional
cards	Array of Feature Cards	Yes (min 2)

Variants: 2-col / 3-col (default) / 4-col

Responsive: 4-col → 2-col tablet → 1-col mobile. 3-col → 2-col tablet → 1-col mobile.

---

3.3 — Feature Row

Full-width row with image one side and text the other. Multiple rows alternate image position.

Content Slots:

Slot	Content	Required
heading	H3 — feature name	Yes
description	1–3 paragraphs	Yes
image	Product screenshot or illustration	Yes
link	CTA or "Learn more" link	Optional

Variants: image-right (default, odd rows) / image-left (even rows)

Alternation rule: When multiple Feature Rows are stacked, image position alternates automatically — image-right first, image-left second, and so on.

Responsive: Image stacks above text on tablet/mobile.

---

3.4 — Tabbed Feature Panel

Tab bar with one detail panel visible at a time. Each tab is a feature deep-dive.

Content Slots:

Slot	Content	Required
section_heading	H2 — section title	Optional
tabs	Array of tab items	Yes (min 3)
↳ tab_label	Short label for the tab	Yes
↳ heading	H3 — feature name	Yes
↳ description	Detailed description	Yes
↳ image	Screenshot or illustration	Optional

Responsive: Horizontal tabs on desktop → accordion on mobile.

→ For tab interaction JS pattern: see css-js-generator/SKILL.md

---

3.5 — Accordion

Expandable sections. Used for FAQ, feature specs, and progressive disclosure of content.

Content Slots:

Slot	Content	Required
section_heading	H2 — section title	Optional
items	Array of accordion items	Yes (min 2)
↳ trigger	Clickable heading	Yes
↳ content	Expandable body — text, images, or nested content	Yes

Variants: single-open (default) / multi-open / first-open / all-closed

Responsive: Consistent at all breakpoints.

→ For accordion interaction JS pattern: see css-js-generator/SKILL.md

---

4 — Social Proof Components

4.1 — Testimonial Card

Single customer quote with attribution.

Content Slots:

Slot	Content	Required
quote	Customer quote text	Yes
name	Customer name	Yes
title	Job title / role	Optional
company	Company name	Optional
avatar	Customer photo	Optional
company_logo	Company logo	Optional

---

4.2 — Testimonial Carousel

Horizontally scrollable or auto-rotating set of Testimonial Cards.

Content Slots:

Slot	Content	Required
section_heading	H2 — section title	Optional
cards	Array of Testimonial Cards	Yes (min 3)

Variants: auto-rotate / manual / static-grid

Responsive: 2–3 cards visible on desktop → 1 card on mobile with swipe or stacked.

---

4.3 — Logo Bar

Horizontal row of partner/customer logos.

Content Slots:

Slot	Content	Required
label	"Trusted by" or similar label	Optional
logos	Array of logo images	Yes (min 3)

Variants: static / scrolling (infinite loop) / grayscale

Responsive: Single row on desktop → wrap to 2 rows or horizontal scroll on mobile.

---

4.4 — Metrics Bar

Row of key statistics with large numbers and context labels.

Content Slots:

Slot	Content	Required
items	Array of metric items	Yes (min 2)
↳ value	Large number or stat (e.g. "99.9%", "10K+")	Yes
↳ label	Context label (e.g. "Uptime", "Customers")	Yes

Variants: inline / with-dividers / animated (count up on scroll)

Responsive: Single row on desktop → 2-column grid or vertical stack on mobile.

---

5 — CTA Components

5.1 — CTA Section

Dedicated conversion section. Used as the closing section and optionally mid-page.

Content Slots:

Slot	Content	Required
heading	H2 — action-oriented headline	Yes
description	Supporting text, 1–2 sentences	Optional
primary_cta	Primary button	Yes
secondary_cta	Secondary button or link	Optional

Variants: centered (default) / with-background / split (text left, CTA right)

Responsive: All variants collapse to centered stack on mobile; CTA full-width.

---

5.2 — Sticky CTA Bar

Persistent bottom bar visible throughout scrolling.

Content Slots:

Slot	Content	Required
text	Short reinforcement line	Optional
primary_cta	Primary button	Yes

Behavior: Hidden on initial load. Appears after scrolling past hero. Fixed to bottom of viewport. Dismissible or persistent per configuration.

Responsive: Full width at all breakpoints; CTA centered and full-width on mobile.

→ For sticky bar JS pattern: see css-js-generator/SKILL.md

---

6 — Content Components

6.1 — FAQ Accordion

Specialized accordion for question/answer pairs.

Content Slots:

Slot	Content	Required
section_heading	H2 — "Frequently Asked Questions" or similar	Yes
items	Array of Q&A pairs	Yes (min 3)
↳ question	Question text (accordion trigger)	Yes
↳ answer	Answer text	Yes

Same interaction pattern and responsive behavior as Accordion (Section 3.5).

---

6.2 — Pricing Table

Feature comparison across pricing tiers.

Content Slots:

Slot	Content	Required
section_heading	H2 — "Pricing" or similar	Yes
tiers	Array of pricing tiers	Yes (min 2)
↳ name	Tier name	Yes
↳ price	Price text (e.g. "$29/mo")	Yes
↳ description	Brief tier description	Optional
↳ features	List of included features	Yes
↳ cta	Tier-specific CTA button	Yes
↳ highlighted	Boolean — visually emphasize this tier	Optional

Variants: cards / table (feature comparison grid)

Responsive: Cards stack vertically on mobile; table becomes card-per-tier view.

---

6.3 — Integration Grid

Grid of compatible tools/platforms with logos and descriptions.

Content Slots:

Slot	Content	Required
section_heading	H2 — "Integrations" or similar	Yes
section_description	Supporting text	Optional
items	Array of integration items	Yes (min 3)
↳ logo	Integration logo	Yes
↳ name	Tool/platform name	Yes
↳ description	Brief description	Optional

Responsive: 4–6 col desktop → 3 col tablet → 2 col mobile.

---

6.4 — Pull Quote

Large-format highlighted quote or key statement. Used for mid-page editorial emphasis.

Content Slots:

Slot	Content	Required
quote	The highlighted text	Yes
attribution	Name + role/company of the speaker	Optional

Variants: centered (default) / left-border (large left border accent) / full-bleed (colored background)

Responsive: Text scales down on mobile; full-bleed variant retains background color.

---

6.5 — Rich Text Block

Long-form content container for article body, documentation, and case study narrative. Handles structured prose with inline headings, lists, and images.

Content Slots:

Slot	Content	Required
body	Structured body content with H2/H3 headings, paragraphs, lists, inline images	Yes
table_of_contents	Auto-generated or manual TOC (links to H2/H3 anchors)	Optional

Variants: article (standard blog/editorial width) / docs (monospace-friendly, wider code blocks)

Responsive: Narrow width at all breakpoints. Images go full-width within container on mobile.

---

6.6 — Download Card

Represents a gated or direct downloadable asset.

Content Slots:

Slot	Content	Required
thumbnail	Asset preview image or icon	Optional
title	Asset name	Yes
description	Brief description of what's inside	Optional
file_type	Format label (e.g. "PDF", "XLSX", "ZIP")	Optional
cta	"Download" or "Get Access" button	Yes

Variants: direct (no gate, immediate download) / gated (CTA opens Form)

Responsive: Full-width stack on mobile.

---

→ For people/profile, timeline, navigation/index, form, and media components, and composition rules: see component-specs.md