This block is a landing hero : centered headline, supporting text, and call-to-action buttons. Use it as the top of a marketing or product page. Same structure when you scaffold with npx rizzo-css init --template landing.
Preview Hero section using design tokens and button classes.
Build something great A themeable, accessible design system. Same CSS across Vanilla, Astro, Svelte, React, and Vue â no runtime lock-in.
Usage Copy the snippet for your framework. Same BEM classes and structure work everywhere.
Usage Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tabâboth stay in sync.
Astro Vanilla Svelte Vue React ---
// Astro: static HTML or add client:load for interactive CTAs
---
<header class="landing-hero">
<h1 class="landing-hero__title">Build something great</h1>
<p class="landing-hero__subtitle">A themeable, accessible design system. Same CSS across frameworks.</p>
<div class="landing-hero__ctas">
<a href="/docs/getting-started" class="btn btn-primary">Get started</a>
<a href="/docs/components" class="btn btn-outline">View components</a>
</div>
</header> <!-- Vanilla: ensure Rizzo CSS is loaded. Same BEM classes. -->
<header class="landing-hero">
<h1 class="landing-hero__title">Build something great</h1>
<p class="landing-hero__subtitle">A themeable, accessible design system. Same CSS across frameworks.</p>
<div class="landing-hero__ctas">
<a href="/docs/getting-started" class="btn btn-primary">Get started</a>
<a href="/docs/components" class="btn btn-outline">View components</a>
</div>
</header> <script>
// Svelte: markup uses Rizzo BEM classes; same styles as Astro/React/Vue.
</script>
<header class="landing-hero">
<h1 class="landing-hero__title">Build something great</h1>
<p class="landing-hero__subtitle">A themeable, accessible design system. Same CSS across frameworks.</p>
<div class="landing-hero__ctas">
<a href="/docs/getting-started" class="btn btn-primary">Get started</a>
<a href="/docs/components" class="btn btn-outline">View components</a>
</div>
</header> <script setup>
// Vue: template uses Rizzo BEM classes; import 'rizzo-css' in your app.
</script>
<template>
<header class="landing-hero">
<h1 class="landing-hero__title">Build something great</h1>
<p class="landing-hero__subtitle">A themeable, accessible design system. Same CSS across frameworks.</p>
<div class="landing-hero__ctas">
<a href="/docs/getting-started" class="btn btn-primary">Get started</a>
<a href="/docs/components" class="btn btn-outline">View components</a>
</div>
</header>
</template> export function LandingHero() {
return (
<header className="landing-hero">
<h1 className="landing-hero__title">Build something great</h1>
<p className="landing-hero__subtitle">A themeable, accessible design system. Same CSS across frameworks.</p>
<div className="landing-hero__ctas">
<a href="/docs/getting-started" className="btn btn-primary">Get started</a>
<a href="/docs/components" className="btn btn-outline">View components</a>
</div>
</header>
);
} Get this block via CLI Scaffold a new project with the Landing template:
npx rizzo-css init --framework astro --template landing --yes Or add to an existing project:
npx rizzo-css add --framework astro --template landing Components used Rizzo typography and spacing tokens Button classes (btn, btn-primary, btn-outline)