Logo
Lockup horizontal da Onblide, com as cores dirigidas pelos tokens do tema ativo. Fora do produto (apresentações, redes sociais, favicon, impressos), use os arquivos das outras formas e cores fixas, abaixo.
import { Logo } from '@onblide/ui';
Demo interativa
Ajuste as propriedades e veja o componente e o código mudarem juntos.
Propriedades
| Prop↕ | Tipo | Padrão | Descrição |
|---|---|---|---|
size | number | 28 | Altura renderizada em px; a largura acompanha a proporção da arte. |
Exemplos
Padrão
Carregando…
<div style={{ padding: 24 }}> <Logo size={32} /> </div>
Tamanhos
Carregando…
<div style={{ padding: 24, display: 'flex', gap: 24, alignItems: 'center' }}> <Logo size={20} /> <Logo size={40} /> <Logo size={64} /> </div>
Variantes de arquivo
O componente acima é a forma horizontal com cor de tema. Para fora do produto, a marca tem mais duas formas:
empilhada e símbolo. Cada uma em três cores fixas: primary, white, dark, nos arquivos de
project/marca/. Uso de cada uma, escolha de cor e área de proteção: Fundações › Marca.
Horizontal
Carregando…
<div style={{ display: 'flex', gap: 16 }}> <div style={{ background: 'var(--ob-surface)', border: '1px solid var(--ob-border)', borderRadius: 8, padding: 16 }}> <img src="/img/marca/onblide-horizontal-primary.svg" height={30} alt="Onblide, primary" /> </div> <div style={{ background: '#2a2a2a', borderRadius: 8, padding: 16 }}> <img src="/img/marca/onblide-horizontal-white.svg" height={30} alt="Onblide, white" /> </div> <div style={{ background: 'var(--ob-cream)', borderRadius: 8, padding: 16 }}> <img src="/img/marca/onblide-horizontal-dark.svg" height={30} alt="Onblide, dark" /> </div> </div>
Empilhada
Carregando…
<div style={{ display: 'flex', gap: 16 }}> <div style={{ background: 'var(--ob-surface)', border: '1px solid var(--ob-border)', borderRadius: 8, padding: 16 }}> <img src="/img/marca/onblide-stacked-primary.svg" height={74} alt="Onblide, primary" /> </div> <div style={{ background: '#2a2a2a', borderRadius: 8, padding: 16 }}> <img src="/img/marca/onblide-stacked-white.svg" height={74} alt="Onblide, white" /> </div> <div style={{ background: 'var(--ob-cream)', borderRadius: 8, padding: 16 }}> <img src="/img/marca/onblide-stacked-dark.svg" height={74} alt="Onblide, dark" /> </div> </div>
Símbolo
Carregando…
<div style={{ display: 'flex', gap: 16 }}> <div style={{ background: 'var(--ob-surface)', border: '1px solid var(--ob-border)', borderRadius: 8, padding: 16 }}> <img src="/img/marca/onblide-symbol-primary.svg" height={46} alt="Símbolo Onblide, primary" /> </div> <div style={{ background: '#2a2a2a', borderRadius: 8, padding: 16 }}> <img src="/img/marca/onblide-symbol-white.svg" height={46} alt="Símbolo Onblide, white" /> </div> <div style={{ background: 'var(--ob-cream)', borderRadius: 8, padding: 16 }}> <img src="/img/marca/onblide-symbol-dark.svg" height={46} alt="Símbolo Onblide, dark" /> </div> </div>
Critérios de qualidade
Tem guia de uso
Tem guia de conteúdo
Usa os design tokens
Possui motion
Possui versão web
Possui versão responsiva
Possui versão mobile