Blocks
Sections built from the components: marketing, pages, account and utility pieces you drop into a product.
61 pages · 4 categoriesMarketing 35
- Hero sectionThe top of a landing page: eyebrow, title, copy, actions and proof.
- FAQ sectionQuestions that open to reveal answers.
- Contact sectionA contact form beside the ways to reach a team.
- Blog gridA grid of article cards with date, tag and summary.
- Plan comparisonPlans side by side with prices and feature lists.
- Comparison tableA feature grid comparing plans or products row by row.
- Stats bandA row of big numbers with short labels.
- Logo marqueeCustomer logos in a slow scrolling row.
- Call to actionA closing band with one clear action.
- Newsletter signupAn email field with consent and success states.
- Page headerA title with description, breadcrumbs and actions.
- Site headerA top navigation bar with logo, links and actions.
- Site footerLink columns, social links and legal text.
- Marketing sectionsHero, feature and pricing sections for a landing page.
- Hero signupA hero with a sign-up form built in.
- Scroll storySections that change as you scroll.
- Spotlight gridA grid where a spotlight follows the pointer.
- Feature bentoA bento grid of features of different sizes.
- Footer blockThe page's last word: link columns, a newsletter that confirms in place, the legal line, status and the name as a full-width wordmark.
- CTA blockThe closing call to action: the promise again, one specific next step and a reassurance line.
- FAQ blockSearchable questions with one answer open at a time, each linking to the exact doc, and a way to ask when nothing matches.
- Team blockPeople introduced by what they own and how to reach them, with initials when there is no photo.
- Proof blockLogos set as type, a case study led by one number, press with outlet and date, and live figures with their source.
- Steps blockHow it works, step by step, with an honest time and what exists after each step.
- Testimonials blockCustomer quotes that carry a real role and a measurable outcome, set still and readable.
- Pricing blockPricing worked out from the buyer's own numbers: enter seats and each plan shows its total and why it fits.
- Comparison blockThe switch, row by row: the same task the old way and with your product, side by side.
- Feature rows blockFeatures as numbered rows, each with a product fragment or one figure that proves it.
- Showcase blockThe product one job at a time: tabs beside a single stage, each view swapped in place with one line on what it does.
- Hero blockThe first screen of a product page: one claim, two actions and a real artefact that proves it.
- Feature tabs blockA short feature tour: features beside one stage, with a thin rule that fills and moves on.
- Milestones blockA history read top to bottom.
- Roadmap blockA public roadmap in now, next and later.
- Chart story blockA number told as a story: the chart draws in once, then each beat moves a marker to its moment and explains it.
- Code result blockCode beside what it makes.
Pages 10
- Page partsDashboard, password reset and verification screens.
- Landing templateA whole product page from the Free blocks, in the order buyers decide, with a header that keeps the action in reach.
- Pricing templateA pricing page in one voice: the deal in one line, plans worked out from the buyer's numbers, the switch row by row, the last doubts and one action.
- Changelog templateWhat shipped, newest first: dates that stay in view, linkable versions, tag filters with a count and a product view per release.
- Blog post templateOne article at a reading measure: a progress line under the header, an outline that marks where you are, linkable headings, the author and three related posts.
- About templateWho is behind the product, in the order buyers and candidates check: the belief, how you got here, the numbers, how you work, the people and the next step.
- Contact templateA contact page that routes the message first: pick the topic and it says who answers and how soon.
- Legal templateA policy people can read: the short version first, numbered sections with an outline that follows you, linkable clauses, a change history and a print layout.
- Error templateThe pages people land on when something goes wrong, each with the way out that fits: search, ask for access, retry with a reference, wait out maintenance, reconnect or get a new link.
- Profile pageA person's page: who they are and where, their local time, pinned work, a year of activity and what they did lately.
Account & notifications 5
- Auth pageA centred sign-in or sign-up page with a brand header and legal links.
- Sign in formAn email and password form with provider buttons and clear errors.
- Sign up formAn account-creation form with a password strength hint and terms.
- Notification centerA list of notifications with read state and filters.
- Notification stackStacked notifications that fan out on hover or focus.
Utility 11
- Changelog feedVersioned release notes with typed changes.
- Infinite masonryA masonry grid that loads more as you scroll.
- Project folderA folder card that opens to show its contents.
- Card folderA stack of cards in a folder tab.
- Availability schedulerPick a day and a time slot from a host's availability.
- Wallet cardA payment card with brand, last four digits and actions.
- Prediction marketOutcomes with probabilities and a way to take a position.
- Multi chain swapSwap one asset for another across networks, with a quote.
- FixturesA list of matches or events grouped by date, with scores.
- Feedback widgetA small widget to rate and comment from any page.
- Not found pageA friendly 404 with suggestions and search.