Blocos
Hero
Hero de página - eyebrow, título, descrição, actions e mídia opcional.
Hero é o bloco de abertura típico de marketing e docs. Quando você passa media, vira layout de duas colunas em lg+.
Design system
Blocos prontos para produto
Composição clara, tokens semânticos e acessibilidade em primeiro lugar.
'use client';
import { Hero } from '@uranus-workspace/blocks';
import { Button } from '@uranus-workspace/design-system';
export default function HeroDefault() {
return (
<Hero
eyebrow="Design system"
title="Blocos prontos para produto"
description="Composição clara, tokens semânticos e acessibilidade em primeiro lugar."
actions={
<>
<Button>Começar</Button>
<Button variant="outline">Documentação</Button>
</>
}
/>
);
}
Uso
import { Hero } from '@uranus-workspace/blocks';
import { Button } from '@uranus-workspace/design-system';
<Hero
eyebrow="Beta"
title="Construa painéis com a velocidade da Uranus"
description="Tokens, primitives e blocos prontos para focar no produto."
actions={
<>
<Button>Começar</Button>
<Button variant="ghost">Ver docs</Button>
</>
}
/>Props
eyebrow,title,description,actions,media— slots livres.align—start | center. Defaultcenterquando não hámedia.
Acessibilidade
title é renderizado como <h1>. Use apenas um Hero por página para evitar múltiplos h1.