The People's Professors — Component Library

Headers

Three header styles for different contexts. Mix them for visual variety.

Marker

Learning is messy

Impact

The Algorithm Is The Syllabus

Typewriter

Chapter Three

<h2 class="pp-header-marker">Learning is messy</h2> <h2 class="pp-header-impact">The <span class="highlight">Algorithm</span> Is The Syllabus</h2> <h3 class="pp-header-typewriter">Chapter Three</h3>

Callouts

Attention-grabbing boxes for key information, tips, and warnings.

Key Takeaway: The constraint of short-form video forces pedagogical precision.

Content creators intuitively apply principles that took educational psychologists decades to codify.

💡 Did you know?

The average TikTok education video uses 3-5 distinct pedagogical strategies.

⚠️ Common Mistake

Don't confuse entertainment value with learning effectiveness—they can coexist!

<div class="pp-callout-tape"> <p><strong>Key Takeaway:</strong> Your message here.</p> </div> <div class="pp-callout-cutout"> <p>Important statement in a cut-out style box.</p> </div> <div class="pp-callout-info"> <div class="pp-callout-info-label">💡 Did you know?</div> <p>Informational content here.</p> </div> <div class="pp-callout-alert"> <div class="pp-callout-alert-label">⚠️ Common Mistake</div> <p>Warning or alert content.</p> </div>

Quotes

Pull quotes and annotations for emphasis and voice.

Anyone can teach if they understand how people learn. — Hank Green, probably

wait, this actually makes sense?? 💀

<blockquote class="pp-quote-pull"> Anyone can teach if they understand how people learn. <cite class="pp-quote-attribution">— Attribution</cite> </blockquote> <p class="pp-quote-annotation">Handwritten annotation style</p>

Labels & Tags

Small labels for categorization, status, and metadata.

Highlight Label Pink Label Dark Label Outline Label

<span class="pp-label pp-label-yellow">Label Text</span> <span class="pp-label pp-label-pink">Label Text</span> <span class="pp-label pp-label-ink">Label Text</span> <span class="pp-label pp-label-outline">Label Text</span>

Buttons

Interactive buttons with hover states. Use for CTAs and navigation.

<button class="pp-button pp-button-primary">Continue</button> <button class="pp-button pp-button-secondary">Learn More</button> <button class="pp-button pp-button-dark">Get Started</button>

Cards

Content containers for lessons, examples, and features.

Standard Card

Basic card with clean border treatment.

Tilted Card

Adds energy with rotation and shadow.

Newsprint Card

Subtle background for softer emphasis.

Dividers

Section breaks with zine personality.

Torn Paper:

Dashed:

Thick:

Stickers & Stamps

Decorative elements for visual interest. Use sparingly.

⭐ 💡 ✨ 🎯 📱

Approved
by the
Algorithm

<span class="pp-sticker">⭐</span> <div class="pp-stamp">Approved<br>by the<br>Algorithm</div>

Phone Mockup

For showing TikTok content examples in context.

Learn
with
me!

<div class="pp-phone"> <div class="pp-phone-screen"> <div class="pp-phone-text">Your content here</div> </div> </div>

Lists

Styled lists for content and instructions.

Arrow List

Chunking content effectively
Using pattern interrupts
Creating emotional hooks

Numbered List

Hook the viewer
Deliver the value
Call to action

<ul class="pp-list"> <li>List item</li> </ul> <ol class="pp-list pp-list-numbered"> <li>Numbered item</li> </ol>

Text Treatments

Inline styles for emphasis within body copy.

Education doesn't need credentials passion. It needs connection and clarity.

<span class="pp-text-highlight">Highlighted text</span> <span class="pp-text-strikethrough">Struck through</span> <span class="pp-text-marker">Marker style</span> <span class="pp-text-emphasis">Bold emphasis</span>

Progress Bars

For showing completion, metrics, or engagement data.

Watch Time Retention 67%

<div class="pp-progress"> <div class="pp-progress-label"> <span>Label</span> <span>67%</span> </div> <div class="pp-progress-bar"> <div class="pp-progress-fill" style="width: 67%;"></div> </div> </div>