8.6 KiB
8.6 KiB
| 1 | id | layout_name | keywords | use_case | content_zones | visual_weight | cta_placement | recommended_for | avoid_for | css_structure | card_variant | metric_style | quote_style | grid_columns | visual_treatment | animation_class |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 2 | 1 | Title Slide | title, cover, opening, intro, hero | Opening slide first impression | Center: Logo + Title + Tagline, Bottom: Date/Presenter | Visual-heavy minimal text | None or subtle | All presentations | Never skip | display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center | none | none | none | 1 | gradient-glow | animate-fade-up |
| 3 | 2 | Problem Statement | problem, pain, challenge, issue | Establish the problem being solved | Left: Problem headline, Right: Pain point bullets or icon grid | 50/50 text visual balance | None | Pitch decks sales | Internal updates | display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center | icon-left | none | none | 2 | subtle-border | animate-stagger |
| 4 | 3 | Solution Overview | solution, answer, approach, how | Introduce your solution | Top: Solution headline, Center: Solution visual/diagram, Bottom: 3 key points | Visual-dominant | Subtle learn more | After problem slide | Without context | display:flex; flex-direction:column; gap:32px | accent-bar | none | none | 3 | icon-top | animate-scale |
| 5 | 4 | Feature Grid | features, grid, cards, capabilities, 3-column | Showcase multiple features | Top: Section title, Grid: 3-6 feature cards with icon+title+description | Balanced grid | Bottom CTA optional | Product demos SaaS | Storytelling slides | display:grid; grid-template-columns:repeat(3,1fr); gap:24px | accent-bar | none | none | 3 | icon-top | animate-stagger |
| 6 | 5 | Metrics Dashboard | metrics, kpis, numbers, stats, data | Display key performance data | Top: Context headline, Center: 3-4 large metric cards, Bottom: Trend context | Numbers-dominant | None | Traction slides QBRs | Early-stage no data | display:grid; grid-template-columns:repeat(4,1fr); gap:16px | metric-card | gradient-number | none | 4 | none | animate-stagger-scale |
| 7 | 6 | Comparison Table | comparison, vs, versus, table, matrix | Compare options or competitors | Top: Comparison title, Center: Feature comparison table, Bottom: Conclusion | Table-heavy | Highlight winner row | Competitive analysis | Storytelling | display:flex; flex-direction:column; table width:100% | comparison | none | none | 2 | highlight-winner | animate-fade-up |
| 8 | 7 | Timeline Flow | timeline, roadmap, journey, steps, process | Show progression over time | Top: Timeline title, Center: Horizontal timeline with milestones, Bottom: Current status | Visual timeline | End milestone CTA | Roadmaps history | Dense data | display:flex; flex-direction:column; timeline:flex with arrows | none | none | none | 1 | timeline-dots | animate-stagger |
| 9 | 8 | Team Grid | team, people, founders, leadership | Introduce team members | Top: Team title, Grid: Photo + Name + Title + Brief bio cards | Photo-heavy | None or careers link | Investor decks about | Technical content | display:grid; grid-template-columns:repeat(4,1fr); gap:24px | avatar-card | none | none | 4 | avatar-ring | animate-stagger |
| 10 | 9 | Quote Testimonial | quote, testimonial, social proof, customer | Feature customer endorsement | Center: Large quote text, Bottom: Photo + Name + Title + Company logo | Quote-dominant minimal UI | None | Sales case studies | Without real quotes | display:flex; flex-direction:column; justify-content:center; font-size:large; font-style:italic | none | none | large-italic | 1 | author-avatar | animate-fade-up |
| 11 | 10 | Two Column Split | split, two-column, side-by-side, comparison | Present two related concepts | Left column: Content A, Right column: Content B | 50/50 balanced | Either column bottom | Comparisons before/after | Single concept | display:grid; grid-template-columns:1fr 1fr; gap:48px | none | none | none | 2 | offset-image | animate-fade-up |
| 12 | 11 | Big Number Hero | big number, stat, impact, headline metric | Emphasize one powerful metric | Center: Massive number, Below: Context label and trend | Number-dominant | None | Impact slides traction | Multiple metrics | display:flex; flex-direction:column; justify-content:center; align-items:center; font-size:120px | none | oversized | none | 1 | centered | animate-count |
| 13 | 12 | Product Screenshot | screenshot, product, demo, ui, interface | Show product in action | Top: Feature headline, Center: Product screenshot with annotations, Bottom: Key callouts | Screenshot-dominant | Try it CTA | Product demos | Abstract concepts | display:flex; flex-direction:column; img max-height:60vh | none | none | none | 1 | screenshot-shadow | animate-scale |
| 14 | 13 | Pricing Cards | pricing, plans, tiers, packages | Present pricing options | Top: Pricing headline, Center: 2-4 pricing cards side by side, Bottom: FAQ or guarantee | Cards balanced | Each card has CTA | Sales pricing pages | Free products | display:grid; grid-template-columns:repeat(3,1fr); gap:24px; .popular:scale(1.05) | pricing-card | none | none | 3 | popular-highlight | animate-stagger |
| 15 | 14 | CTA Closing | cta, closing, call to action, next steps, final | Drive action end presentation | Center: Bold headline + Value reminder, Center: Primary CTA button, Below: Secondary option | CTA-dominant | Primary center | All presentations | Middle slides | display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center | none | none | none | 1 | gradient-bg | animate-pulse |
| 16 | 15 | Agenda Overview | agenda, outline, contents, structure | Preview presentation structure | Top: Agenda title, Center: Numbered list or visual timeline of sections | Text-light scannable | None | Long presentations | Short 3-5 slides | display:flex; flex-direction:column; ol list-style-type:decimal | none | none | none | 1 | numbered-list | animate-stagger |
| 17 | 16 | Before After | before, after, transformation, results, comparison | Show transformation impact | Left: Before state (muted), Right: After state (vibrant), Center: Arrow or transition | 50/50 high contrast | After column CTA | Case studies results | No transformation data | display:grid; grid-template-columns:1fr 1fr; .before:opacity(0.7) | comparison | none | none | 2 | contrast-pair | animate-scale |
| 18 | 17 | Icon Grid Stats | icons, stats, grid, key points, summary | Summarize key points visually | Grid: 4-6 icon + stat + label combinations | Icons-dominant | None | Summary slides | Detailed explanations | display:grid; grid-template-columns:repeat(3,1fr); gap:32px; text-align:center | icon-stat | sparkline | none | 3 | icon-top | animate-stagger |
| 19 | 18 | Full Bleed Image | image, photo, visual, background, hero | Create visual impact | Full background image, Overlay: Text with contrast, Corner: Logo | Image-dominant | Overlay CTA optional | Emotional moments | Data-heavy | background-size:cover; color:white; text-shadow for contrast | none | none | none | 1 | bg-overlay | animate-ken-burns |
| 20 | 19 | Video Embed | video, demo, embed, multimedia | Show video content | Top: Context headline, Center: Video player (16:9), Bottom: Key points if needed | Video-dominant | After video CTA | Demos testimonials | Reading-focused | aspect-ratio:16/9; video controls | none | none | none | 1 | video-frame | animate-scale |
| 21 | 20 | Funnel Diagram | funnel, conversion, stages, pipeline | Show conversion or process flow | Top: Funnel title, Center: Funnel visualization with stage labels and metrics | Diagram-dominant | None | Sales marketing funnels | Non-sequential data | SVG or CSS trapezoid shapes | none | funnel-numbers | none | 1 | funnel-gradient | animate-chart |
| 22 | 21 | Quote Plus Stats | quote, stats, hybrid, testimonial, metrics | Combine social proof with data | Left: Customer quote with photo, Right: 3 supporting metrics | Balanced quote/data | None | Sales enablement | Without both elements | display:grid; grid-template-columns:1.5fr 1fr; gap:48px | metric-card | gradient-number | side-quote | 2 | author-avatar | animate-stagger |
| 23 | 22 | Section Divider | section, divider, break, transition | Transition between sections | Center: Section number + Section title, Minimal design | Typography-only | None | Long presentations | Every slide | display:flex; justify-content:center; align-items:center; font-size:48px | none | none | none | 1 | section-number | animate-fade-up |
| 24 | 23 | Logo Grid | logos, clients, partners, trust, social proof | Display client or partner logos | Top: Trust headline, Grid: 8-16 logos evenly spaced | Logos-only | None | Credibility slides | Few logos <6 | display:grid; grid-template-columns:repeat(4,1fr); gap:32px; filter:grayscale(1) | none | none | none | 4 | logo-grayscale | animate-stagger |
| 25 | 24 | Chart Focus | chart, graph, data, visualization, analytics | Present data visualization | Top: Chart title and context, Center: Single large chart, Bottom: Key insight | Chart-dominant | None | Data-driven slides | Poor data quality | chart max-height:65vh; annotation for key point | none | sparkline | none | 1 | chart-left | animate-chart |
| 26 | 25 | Q&A Slide | qa, questions, discussion, interactive | Invite audience questions | Center: Q&A or Questions? text, Below: Contact info or submission method | Minimal text | None | End of presentations | Skip if no time | display:flex; justify-content:center; align-items:center; font-size:64px | none | none | none | 1 | centered | animate-fade-up |