# Components — Pre-built HTML Component Reference Library Each component is a **starting point, not a straitjacket**. Use them as inspiration and building blocks. **Three ways to use this library**: 1. **Direct use**: Copy a component template, replace `${...}` variables and text content (safest, guaranteed to convert correctly) 2. **Remix**: Start from a template, then freely modify spacing, font sizes, card styles, background treatments, decorative elements, and layout proportions (encouraged — this creates variety) 3. **Free creation**: Design entirely new layouts from scratch based on html2pptx.md technical constraints (most flexible — must test conversion) **The goal is visual diversity. If the deck looks monotonous, you haven't remixed enough.** --- ## Usage Rules 1. **Variable replacement**: All `${variableName}` must be replaced with actual values (colors, font names) 2. **Everything is modifiable**: Spacing, font sizes, padding, margins, gap, border-radius, shadows, card styles, background colors, layout proportions — change anything to serve the content and create variety 3. **Only engine constraints are sacred**: Don't use flex-wrap, negative margins, DIV background-image, or CSS gradients (see html2pptx.md Technical Constraints) 4. **Colors must come from the theme scale** — this is the one design-system rule that's enforced 5. **Adjacent slides should look distinctly different** — vary layout, background, card treatment, spacing density 6. **Fill the slide**: Content should use the available space well. Avoid large empty areas — if there's too much whitespace, add more content, use larger type, increase spacing, or add visual elements --- ## Card Style Cookbook (Quick Reference) Every component template uses shadow-float cards by default. **Swap in these alternatives** to create variety across slides: | Style | Name | CSS | |-------|------|-----| | A | Shadow Float | `background:${surface-card}; border-radius:10pt; box-shadow:0 2pt 8pt rgba(0,0,0,0.08); padding:20pt;` | | B | Outline | `background:transparent; border:1.5pt solid ${primary-20}; border-radius:10pt; padding:20pt;` | | C | Solid Fill | `background:${primary-10}; border-radius:10pt; padding:20pt; border:none; box-shadow:none;` | | D | Left Accent Bar | `background:${surface-card}; border-left:4pt solid ${accent}; border-radius:0 10pt 10pt 0; padding:16pt 20pt; box-shadow:none;` | | E | Solid Fill + Bottom Accent | `background:${surface}; border-radius:10pt; border-bottom:3pt solid ${accent}; padding:20pt; box-shadow:none;` | | F | Dark Card | `background:${primary-90}; border-radius:10pt; padding:20pt; color:${on-dark}; box-shadow:none;` | **Rule: No 2 adjacent slides should use the same card style.** --- ## Title Bar Variants (Quick Reference) Components use a dark title bar by default. **Swap in these alternatives**: | Variant | Description | |---------|-------------| | Default | `height:56pt; background:${primary-90}` with white bold title at `font-size:22pt` | | Accent Color | Same structure but `background:${accent}` | | Transparent + Underline | `padding:28pt 48pt 12pt 48pt; border-bottom:2pt solid ${primary-20};` title at `font-size:28pt; color:${primary-80}` | | No Header Bar (Inline Title) | No separate header div; title is part of content area at `font-size:32pt; color:${primary-80}` | | Left Vertical Band | `display:flex; height:56pt;` with `width:6pt; background:${accent}` left strip + rest is `background:${surface}` | **Rule: All content slides must use the same title bar style — pick one variant and apply it consistently across the entire deck.** --- ## Dark Background Content Templates Use these dark variants for **rhythm-breaking slides** (recommended every 3-4 pages). ### content-dark-bullets — Dark Background Bullet List > `list | medium | dark | outline-light` ```html

Page Title

Point Title
Description text

``` ### content-dark-kpi — Dark Background KPI Dashboard > `grid | low | dark | solid-dark` ```html

Dashboard Title

85%
Metric Label

2.4M
Metric Label

+32%
Metric Label

``` ### content-dark-split — Dark Background Left-Right Split > `split | medium | dark | none` ```html

Key
Insight

Sub-point One
Detailed explanation

Sub-point Two
Another detailed explanation

Presentation Title Here

Subtitle or one-line overview

Presenter: John Smith · December 2024

``` ### cover-split — Left-Right Split Cover Left dark block (40%) with top anchor label + bottom vertical bar. Right text with accent divider. ```html

ANNUAL REPORT 2024

Department · Category

Presentation Main Title

Subtitle description text

Presenter: John Smith · Product Department

``` ### cover-bottom-bar — Bottom Info Bar Cover Full-width centered title + bottom dark info bar. ```html

Presentation Main Title

Subtitle description text

Presenter: John Smith

December 2024

Product Department

``` ### cover-photo-mask — Background Image + Mask Cover Full-screen image + dark mask + centered title. **Download image first**: `curl -L "https://source.unsplash.com/1920x1080/?keyword" -o cover-bg.jpg` ```html

Presentation Title Here

Subtitle or one-line overview

Presenter · Date

``` **Mask color rule**: Replace `rgba(26,51,64,0.75)` RGB with theme's primary-90 value. ### cover-dark-hero — Dark Background Hero Cover (No Photo Needed) > `centered | low | dark | none` — ideal fallback when Unsplash fails, strong minimalist opening. ```html

Presentation Title

Subtitle or one-line description Presenter · Date

``` --- ## TOC Components ### toc-sidebar-list — Sidebar + Numbered List Left dark sidebar (30%) + right numbered chapter list. ```html

CONTENTS

Chapter One Title

Chapter Two Title

``` ### toc-card-grid — Card Grid TOC One numbered card per chapter, 3-4 columns. ```html

Chapter Title

Brief description

Chapter Title

Brief description

``` ### toc-timeline — Horizontal Timeline TOC Horizontal nodes + connecting lines + chapter titles. For sequential content. ```html

Chapter Title

Brief description

Chapter Title

Brief description

``` ### toc-big-number — Large Number Background TOC Extra-large semi-transparent numbers as background, chapter titles float on top. ```html

Chapter One Title

Chapter Two Title

``` --- ## Content Page Components ### content-header-bullets — Header Bar + Bullet List Dark header bar + bullet point list with left accent bars. ```html

Page Title

Key Point Title One

Description text for the key point

Key Point Title Two

Description text for the key point

``` ### content-split-text-visual — Text / Image Split Left text (40%) + right image/chart (60%). **For image-left layout, swap the two columns** (put the image div first at `width:360pt`, text div second at `width:240pt`). ```html

Page Title

Sub-heading

First key point
Second key point
Third key point

Source: 2024 Annual Report

``` ### content-split-equal — Equal 50/50 Split Two equal columns with a vertical divider. ```html

Page Title

Left Column Title

Left column content text.

Right Column Title

Right column content text.

``` ### content-sidebar-stat — Sidebar Large Number + Right Content Left narrow sidebar with KPIs, right side with detailed content. ```html

86%

User Satisfaction

2.4×

Efficiency Improvement

Core Business Results

User satisfaction rose from 72% to 86%
Operational efficiency improved 2.4x YoY
Client renewal rate reached 95%
New customer acquisition cost reduced by 35%

``` ### content-kpi-row — KPI Large Numbers in a Row 2-4 key data indicators displayed horizontally, cards with shadow elevation. ```html

Core Business Metrics

86%

User Retention Rate

2.4×

Customer Acquisition Efficiency

Data source: 2024 Annual User Survey | Period: Jan-Dec 2024

``` ### content-kpi-vertical — KPI Numbers Vertical Stack > `focus | medium | light | outline` Left dark sidebar title + right KPI stack with outline cards. ```html

Key Metrics

Performance highlights for 2024

92%

Customer Satisfaction

Up 12 points from prior year

3.1×

Revenue Growth

Fastest in company history

``` ### content-comparison — A vs B (or A vs B vs C) Comparison Comparison cards with top accent border. **For 2-way**: two cards at `width:296pt`. **For 3-way**: three cards at `width:192pt;flex-shrink:0` with border colors `${accent}` / `${primary-60}` / `${primary-40}`. ```html

Plan Comparison

Plan A

Advantage one
Advantage two
Advantage three

Plan B

Feature one
Feature two
Feature three

``` ### content-timeline — Horizontal Process/Steps Horizontal step nodes + descriptions. 3-5 steps. ```html

Implementation Roadmap

Requirements Analysis

Research user needs

Solution Design

Implementation plan

``` ### content-timeline-vertical — Vertical Timeline > `timeline | medium | light | none` — Vertical flow with numbered nodes and connecting lines. ```html

Timeline

Phase One — Discovery

Research and stakeholder interviews

Phase Two — Design

Prototyping and iterative design

``` ### content-icon-grid — 2×3 Icon Grid Grid display of 6 features. **Two independent flex rows, no flex-wrap**. Icon positions use colored circle placeholders. ```html

Core Features

⚡

Feature Name

Brief description

📊

Feature Name

Brief description

🔒

Feature Name

Brief description

``` ### content-2x2-grid — Four-Quadrant Grid (Shadow Cards) Four equal-sized cards. **Two independent flex rows, no flex-wrap**. ```html

Four Core Pillars

Pillar One

Description content

Pillar Two

Description content

``` ### content-2x2-grid-outline — Four-Quadrant Grid (Outline Cards) > `grid | high | light | outline` — Same layout as content-2x2-grid but card style is outline. **Diff from shadow version**: Replace card div `background:${surface}; border-radius:10pt;` with: ``` border:1.5pt solid ${primary-20}; border-radius:10pt; padding:16pt 20pt; ``` Remove any `box-shadow`. All other structure identical. ### content-2x2-grid-solid — Four-Quadrant Grid (Solid Dark Cards) > `grid | high | dark | solid` — Dark background + solid primary-colored cards. **Diff from shadow version**: Background is `${primary-90}`, cards use `background:${primary-80}`, text colors switch to `${on-dark}` / `${on-dark-secondary}`. Title uses `${on-dark}` with accent underline divider. No box-shadow. ### content-full-bleed — Full-Bleed Color Block Emphasis Page Full dark background + decorative element + key insight. For visual rhythm variation. ```html

★

Core Insight or Key Quote

Supporting text to explain or expand on the core insight

``` ### content-left-accent-bar — Left Accent Bar Emphasis Page Left thick accent bar + left color block + right content with numbered points. ```html

Key Conclusion

Conclusion Title

Detailed description of the first conclusion point

Detailed description of the second conclusion point

``` ### content-stagger-list — Staggered List Each item has a differently colored number block. For processes, rankings, priority lists. ```html

List Title

Step One Title

Description text

Step Two Title

Description text

``` ### content-big-number-focus — Large Number Focus Page Oversized number + explanatory text. For data highlights, milestones. ```html

15 Million

Number Meaning Label

The Story Behind the Number

Detailed interpretation and background explanation

85%

Related Metric A

3.2x

Related Metric B

``` ### content-three-column — Three-Column Equal-Width Content Three columns with circular icons + vertical dividers. For "three advantages", "three phases", etc. ```html

Three-Column Title

Column One Title

Brief description text

``` ### content-three-card — Three Card Columns > `grid | medium | light | shadow` — Three equal shadow cards with icon boxes. Different from three-column (which has circle icons + dividers). ```html

Three Key Aspects

Card Title One

Descriptive text

Card Title Two

Descriptive text

``` ### content-split-photo — Left Text + Right Photo Left: title + text with accent bar. Right: photograph with rounded corners. **Requires downloaded image.** ```html

Page Title Here

Sub-heading Text

First paragraph explaining a key concept.

Second paragraph with additional evidence.

Third paragraph with concluding insight.

``` ### content-photo-cards — Three Photo Cards Three cards, each with photo header, title, and description. **Requires 3 downloaded images.** ```html

Page Title Here

Card Title One

Brief description

Card Title Two

Brief description

``` ### content-stat-overlay — Hero Stat on Photo Background Full-screen photo + dark mask + large centered statistic. **Requires downloaded image.** ```html

KEY METRIC

2,500+

Active Users

Brief description providing context for this statistic

``` **Mask color rule**: Replace `rgba(26,51,64,0.80)` RGB with theme's primary-90 value. ### content-photo-overlay — Full Photo + Floating Text Card > `full-bleed | low | image | frosted` — Full-screen photo + semi-transparent floating card. ```html

Section Title

Key insight that complements the background image.

Supporting detail or data point

``` ### content-chart-focus — Chart-Focused Page > `split | medium | light | none` — Chart takes 70%, narrow text sidebar for interpretation. ```html

Data Analysis

Chart Area

Key Insight

Chart interpretation

+42%

Year-over-year growth

``` ### content-chart-bar — Bar Chart + Key Metric Cards > `split | medium | light | none` — Chart placeholder takes left ~67%, right sidebar shows 3 KPI cards. Column widths: chart 420pt + gap 20pt + sidebar 184pt = 624pt. ```html

Revenue by Quarter

Bar Chart

Q4（最高）

$2.1M

全年总计

$6.6M

同比增长

+32%

``` ### content-chart-pie — Pie Chart + Legend & Insight > `split | medium | light | none` — Square chart placeholder on left (260×260pt), legend + insight on right (332pt). Legend items use colored dot + label + percentage. ```html

Market Share Distribution

Pie Chart

Category A

42%

Category B

28%

Category C

18%

Others

12%

Key insight explaining the most important takeaway from the distribution.

``` ### content-chart-line — Wide Line Chart + Trend Stats > `list | medium | light | none` — Accent stripe header (no dark bar). Wide chart placeholder stretches to fill vertical space, 4 stat cards pinned to the bottom. Chart area: 624pt wide × ~220pt tall. ```html

Growth Trend

2021 — 2025

Line Chart

起始值

$1.2M

当前值

$6.6M

CAGR

+41%

峰值时间

Q3 2025

``` ### content-band-top — Top Color Band + Content Below > `list | medium | light | none` ```html

Page Title

Subtitle

Point One

Explanation

Point Two

Explanation

``` ### content-table — Structured Data Table with Zebra Rows > `data | medium | light | none` — **No `` tags — rows are flex divs.** Column widths sum to 624pt. ```html

Table Title

项目

Engineering

$1.2M

$1.5M

$1.8M

$2.1M

Total

$4.0M

$6.2M

``` ### content-table-comparison — Feature Comparison Matrix > `data | medium | light | tag` — Rows = options, columns = criteria, last column = tag. Tag colors: `${accent}` bg = recommended, `${primary-10}` bg = neutral/pass. ```html

方案对比

方案

成本

实施周期

可扩展性

综合评级

方案 A

低

3 个月

高

Chapter Title

One-line overview

``` ### divider-split — Split Background Transition ```html

Chapter Title

One-line overview

``` ### divider-photo-mask — Background Image + Mask Transition ```html

Chapter Title

One-line overview

``` ### divider-gradient — Gradient Background Transition > Requires pre-generating gradient PNG via sharp/SVG. ```javascript const svg = ``; await sharp(Buffer.from(svg)).png().toFile('gradient-bg.png'); ``` ```html

Chapter Title

One-line overview

``` --- ## Closing Page Components ### closing-takeaways — Key Takeaways Summary Header bar + 3 key takeaway cards with top accent borders. ```html

Key Conclusions

Takeaway Point One

Brief note

Takeaway Point Two

Brief note

``` ### closing-thankyou — Thank You Page Dark background + large thank-you + contact info. Echoes cover. ```html

Thank You

John Smith | Product Department

john.smith@company.com

```

Presentation Title Here

Presentation Main Title

Presentation Main Title

Presentation Title Here

Contents

Contents

Contents

Contents

Page Title

Page Title

Page Title

Core Business Results

Core Business Metrics

Key Metrics

Plan Comparison

Implementation Roadmap

Timeline

Core Features

Four Core Pillars

Core Insight or Key Quote

Conclusion Title

List Title

The Story Behind the Number

Three-Column Title

Three Key Aspects

Page Title Here

Sub-heading Text

Page Title Here

Card Title One

Card Title Two

2,500+

Section Title

Data Analysis

Revenue by Quarter

Market Share Distribution

Growth Trend

Page Title

Table Title

方案对比

Chapter Title

Chapter Title

Chapter Title

Chapter Title

Key Conclusions

Thank You