Sections

Full page blocks — heroes, pricing, FAQs, navbars, footers — with real props instead of hardcoded copy.

A section is a whole band of a page: a hero, a pricing table, a feature grid, a navbar, a footer. Same anatomy as a component — one native custom element in a single vs-*.js file — but sized to be dropped straight into a route.

Browse them at Sections. Categories: Marketing and AI; subcategories: Hero, Pricing, Features, FAQ, Footer, Navbar, Stats, Logos.

Everything is a prop

Sections are not screenshots with text baked in. Headline, eyebrow, body copy, button labels, image sources, plan lists — all props with defaults, all editable from the control bar before you copy.

Text props are attributes; list/object props (like plans) are set as DOM properties:

<vs-sec-pricing-toggle eyebrow="Pricing" title="Simple plans"></vs-sec-pricing-toggle>

<script type="module">
  import './vs-sec-pricing-toggle.js';
  const el = document.querySelector('vs-sec-pricing-toggle');
  el.plans = [
    { name: 'Starter', monthly: 0, features: ['1 project', 'Community support'] },
    { name: 'Pro', monthly: 19, features: ['Unlimited projects', 'Priority support'] },
  ];
  el.addEventListener('select', startCheckout);
</script>

Interactive parts are actually interactive: a pricing toggle switches periods, an FAQ opens and closes, a navbar’s mobile menu works. You listen for the events; the behavior is already there.

Using one

Import the file once to register the tag, then drop it in a page and give it your data — vanilla, or through any framework’s binding:

<vs-sec-hero-split
  title="Ship the marketing site today"
  subtitle="Everything below the fold is already built."
  cta-label="Get started"
  cta-href="/signup"
></vs-sec-hero-split>

Sections are full-bleed by default — they manage their own vertical rhythm and inner max-width. Put them one after another with no wrapper.

Composition beats configuration

Two sections that look 80% alike are two files, not one file with a layout prop. That is deliberate: you copy the one you want and edit it, instead of carrying branches you never use.

If you need a variant that does not exist, copy the closest one and change it. It is your file.

Fonts and assets

Some marketing sections load a display font at runtime through a small font helper, so a page with three sections requests each family once. If you already serve your own fonts, delete that call and let the section inherit --font-sans.

Images in the previews are placeholders from the catalog’s own /public. Replace the src props with your assets — no section hardcodes a remote URL you cannot change.

Responsiveness

Every section is built mobile-first and tested from 320px up. Breakpoints live in the section’s scoped styles, not in a shared config, so changing where a grid collapses is a local edit.