Padlet landing pages — component + design-rule showcase

Source of truth for the components and tokens used by every landing-page route in this repo. Toggle your OS appearance to verify dark / light mode.

Design rules

Mirrored from src/styles/global.css. If you need to change a value, edit the token there — every page in this repo will pick it up.

Colors

Token
Light
Dark
Used for
--color-bg-100
#ffffff
#111111
Page surface
--color-bg-200
#f7edff
#242527
Cards, footer body, accordion
--color-bg-300
#eed8ff
#2e2f31
Hover, deeper card panels
--color-text-100
#111111
#ffffff
Primary text
--color-text-200
#666666
#9a9a9a
Secondary text
--color-primary
#ff4081
#ff4081
CTA, accents
--color-primary-hover
#f01b68
#f01b68
CTA hover

Type scale

Where
Mobile (size / line / tracking)
Desktop ≥ 744
Font
--type-hero-font-size
42px / 38px / -0.91px
78px / 62px / -1.66px
Lilita One, uppercase
h2 / .subsection-header
24px / 32px / -0.41px
34px / 43px / -0.71px
Inter, 600, ss01
.subheader
17px / 26px / -0.22px
24px / 32px / -0.46px
Inter, 400
--btn-pri-font-size
24px / 1 / -0.46px
24px / 1 / -0.46px
Inter, 600

Buttons

Selector
Height
Radius
Pad-X
Font size
Sample
.hero-button
56px
22px
28px
24px
.hero-button.ghost
56px
22px
28px
24px
.nav-btn
36px
999px
16px
15px
.nav-btn--primary
36px
999px
16px
15px

Spacing

Token
Mobile
Desktop
Used for
--section-pad-y
32px
60px
Top padding of every section block (hero, info, reviews, etc.)
--section-pad-y-bottom
24px
40px
Bottom padding of subsection-header before the content grid
--section-content-pad-bottom
32px
60px
Bottom padding of the whole section after the content
--section-pad-x
16px
200px
Horizontal padding of a section header (h2 + subheader)
--section-pad-x-tablet
80px
Same, tablet breakpoint (744–1200px)
card grid gap
16px
24px
Gap between cards in .wpfs-grid, .community-cards, .stats-row

Breakpoints

Range
Name
What changes
< 744px
Mobile
1-up card grids, stacked CTAs, hero h1 42px
744 – 1099
Tablet
2-up card grids, side-by-side CTAs, hero h1 78px
1100 – 1200
Wide tablet
3-up / 4-up card grids based on data-count
≥ 1201
Desktop
Full --section-pad-x: 200px gutters, peak vertical spacing

Components

Every component below is rendered by one or more landing-page routes in this repo. The "Used by" tag tells you which routes will be affected by changes — there's no separate copy per route, just shared components + per-route YAML content.

LandingHeader

Used by /persona /region /reseller

LandingHero

Used by /persona /region /reseller

Content creation
for collaborative
classrooms.

Trusted all over the world by K-12 schools, districts, and universities of all sizes.

Free forever for teachers. No credit card.

ClientLogos

Used by /persona /region

FeatureCarousel

Used by /persona

StatsBand

Used by /region
15k+

Educators on Padlet

17M

Padlets created

320+

Districts and schools

VideoFormSection

Used by /region

Meet your Padlet rep

Watch the intro or drop us a line.

MeetingScheduler

Used by /persona /region /reseller

Modal lead-capture replacement for the hubspot Meetings widget embed. The hero CTA on regional / reseller pages opens this when YAML declares mode: meeting. Click below to preview.

QuoteModal

Used by /persona /region /reseller

Inline modal wrapping the hubspot quote-form iframe. Opened by the header Get a quote CTA on every landing page. Stays on-origin so the browser back button returns to the landing page instead of 404'ing on the padlet.com path the form used to live at.

Request a quote

WhyPadletForSchools

Used by /region

Why Padlet for Schools?

Easy to integrate, safe to use.

Integrate with your LMS, SSO and rostering

Canvas, Moodle, Blackboard, Schoology, Google Classroom, Microsoft, Clever and Classlink.

Easy to onboard and manage

Provision licenses with invite links, CSV upload, LMS, or SSO. Google, Microsoft, SAML.

Measure engagement with analytics

Track active users, post and comment volume, and identify your power users.

Engage safely

Control student permissions. Control privacy settings. Automated content moderation.

Curious how many teachers at your school use Padlet?

Let us show you. We’ll pull your school’s Padlet activity into a quick, free report so you can learn how many teachers are on it and how much they’re using it.

Want to see Padlet for Schools in action?

CommunityCards

Used by /region /reseller

Built for the classroom

Every workflow Padlet replaces, in one place.

Classroom organisation

Classroom organisation

One link per class. Roster syncs from Google Classroom and Canvas. Padlets stay private to your school.

Lessons that travel

Lessons that travel

Build a lesson once. Re-use it across periods, schools, and years.

Activities for every kid

Activities for every kid

Quiet kids type, draw, snap a photo, or record a voice note.

Communication with families

Communication with families

Parents see what their kids made. Translation built in.

InfoSection

Used by /persona /reseller

Delight for teachers

Padlet makes your classes fun and engaging.

Beautiful by default

Stunning backgrounds. Clean fonts. Pixel-perfect designs. Straight out of the box.

A beautiful default board.

Get things done fast

One-click creation with a gallery of useful templates. Lightning-fast uploads. Keyboard shortcuts.

A fast upload flow.

HowItWorksNumbered

Used by /reseller

How it works

From signed application to first closed deal in under a month.

1

Apply

Tell us about your business and the territory you serve. We review every application within five working days.

2

Get onboarded

Sign the partner agreement, meet your partner manager, and get access to demo accounts, pricing, and collateral.

3

Sell

Quote and close deals with schools and districts in your region. We're on call for joint pitches and technical questions.

4

Earn

Bill the school, keep your margin, and renew customers year on year. The longer you stay, the better the tier.

PricingCalculator

Used by /region

Estimate your Padlet for Schools cost

Get a quick estimate, no commitment required.

Need more than 100 teacher accounts? to talk about volume discounts!

ReviewSection

Used by /persona /region /reseller

What our customers say

Learn why educators around the world love Padlet.

Padlet is a great educational tool. Keeps every record in one place.

carolinemikovit

Fairfield University

Recommended website for #geography learning.

shiv_teaching

Boroughmuir High

It's changed the legal education game for me — anonymous posting, minimal effective UI.

ghanniab

Barbra Schlifer

I will use this often in my future classroom — full lessons, class discussion boards.

MsTMcAllister

Kennesaw State

PricingTeaser

Used by /persona

Pricing

Our pricing is as simple as our software.

Free

For curious explorers. Up to 3 active padlets.

$0forever
  • 3 active padlets
  • Unlimited contributors
  • All core post types

Gold

For makers who want unlimited room to play.

$8/month
  • Unlimited padlets
  • 500MB uploads
  • Advanced privacy controls

Classroom

For one teacher and up to 100 students.

$12/month
  • 100 managed student accounts
  • Content moderation + private mode
  • Teacher dashboard

Schools

For districts and universities. SSO, LMS, SOC 2.

Custom
  • Unlimited teacher + student accounts
  • SSO, LMS, rostering
  • SOC 2, GDPR, FERPA, Ed Law 2D

FaqSection

Used by /persona /region /reseller

FAQ's

We're here to answer all your questions.

  • Yes! With a free account, you can have up to 3 active padlets.

Have more questions?Contact us.

DownloadPack

Used by /region

Want more information?

Download our resource pack!

Padlet resource pack preview

LandingFooter

Used by /persona /region /reseller

Make something wonderful with your class.

Try Padlet free →Free forever for teachers. No credit card.