Componentes
Badge
Selo em pílula para categoria regulatória, quantidade e claims curtos, como no rótulo H2OFF.
Variantes
size="sm" | "md"
Ver código
<Badge variant="product">Suplemento alimentar</Badge>
<Badge variant="soft" size="sm">120 cápsulas | 800mg</Badge>Card
Contêiner de conteúdo com slots de cabeçalho, corpo e rodapé. Use raised em vitrines e outlined em blocos de dados.
H2OFF · flat
Menos retenção. Mais leveza. 120 cápsulas de 800mg.
H2OFF · raised
Menos retenção. Mais leveza. 120 cápsulas de 800mg.
H2OFF · outlined
Menos retenção. Mais leveza. 120 cápsulas de 800mg.
H2OFF · subtle
Menos retenção. Mais leveza. 120 cápsulas de 800mg.
Ver código
<Card variant="raised">
<CardHeader><SectionHeading>Informações</SectionHeading></CardHeader>
<CardBody><Text>Não exceder a recomendação diária.</Text></CardBody>
<CardFooter><Button intent="product">Comprar</Button></CardFooter>
</Card>SectionHeading
Cabeçalho em pílula preenchida usado nas seções do rótulo, como INFORMAÇÕES e MODO DE INGESTÃO.
Informações
Nutriburn
Modo de ingestão
Variantes product, brand e plain
Ver código
<SectionHeading level={2}>Informações</SectionHeading>
<SectionHeading variant="plain" level={3}>Modo de ingestão</SectionHeading>BenefitRow / BenefitItem
Faixa de benefícios com ícone e legenda curta, separados por divisores finos — a linha inferior do rótulo.
Ver código
<BenefitRow>
<BenefitItem icon={<IconDrop size="lg" />} label="Auxilia no desinchaço" />
<BenefitItem icon={<IconWaves size="lg" />} label="Reduz a retenção de líquidos" />
</BenefitRow>NutritionTable
Tabela de informação nutricional com marcação de tabela real. O conteúdo regulatório deve ser transcrito literalmente.
| Fórmula por dose | Quantidade | % VD |
|---|---|---|
| Hibisco | 300mg | ** |
| Bromelina | 200mg | ** |
| Cranberry | 200mg | ** |
| Citrato de Potássio | 100mg | ** |
| (**) Valores diários não estabelecidos. Não contém quantidade significativa de valor energético. | ||
Ver código
<NutritionTable
portion="Por porção de 1,6 g (2 cápsulas)"
rows={[{ name: "Hibisco", amount: "300mg" }]}
footnote="(**) Valores diários não estabelecidos."
/>Field / Label / Input / Textarea
Base de formulários: Field alinha rótulo, controle e mensagem; erros usam role=alert.
Estados: padrão, com dica, erro, desabilitado
Fale com a nutricionista
Textarea em contexto real
Ver código
<Field hint="Usamos para enviar o rastreio.">
<Label htmlFor="email" required>E-mail</Label>
<Input id="email" type="email" placeholder="voce@exemplo.com.br" />
</Field>Divider
Separação fina entre blocos de conteúdo. Use tone=strong quando o contraste do fundo pedir.
800mg
120 cápsulas
Horizontal, horizontal forte e vertical
Ver código
<Divider />
<Divider tone="strong" />
<Divider orientation="vertical" />Logo
Marca Nutriburn com opção de subtítulo de linha de produto. Use layout=mark quando o nome já aparece ao lado.
NutriburnNutriburnH2OFFNutriburnH2OFFlayout="horizontal" | "stacked" | "mark" · size sm/md/lg
Ver código
<Logo size="md" product="H2OFF" />
<Logo size="sm" layout="mark" />Heading / Text
Heading separa nível semântico de tamanho visual; Text cobre corpo, apoio e legendas.
Cuidados e conservação
Armazenar em local seco e fresco, protegido da luz, calor e umidade.
Após aberto, consumir em até 60 dias.
Composição editorial
Ver código
<Heading level={2} size="h3">Cuidados e conservação</Heading>
<Text size="sm" muted>Este produto não é um medicamento.</Text>