Capítulo 07 · Aplicação

Componentes

Componentes reutilizáveis da família Omnian. Cada um demonstrado ao vivo, com HTML pronto para copiar.

A regra

Componentes desta página são consumidos diretamente do brand. Para usar em qualquer site da família:

<link rel="stylesheet" href="https://brand.omnian.world/v1/assets/css/tokens.css">
<link rel="stylesheet" href="https://brand.omnian.world/v1/assets/css/base.css">
<link rel="stylesheet" href="https://brand.omnian.world/v1/assets/css/components.css">
<script src="https://brand.omnian.world/v1/assets/js/omnian.js" defer></script>

Os snippets abaixo assumem que CSS e JS já estão carregados.

Mark · marca clicável

Mark · padrão

Omnian

<a href="/" class="omn-mark" aria-label="Omnian">
  <img src="https://brand.omnian.world/v1/assets/logo/omnian-icon.svg"
       alt="" class="omn-mark__symbol" width="22" height="22">
  <span class="omn-mark__word">Omnian</span>
</a>

Mark · compacto (footer)

Omnian

Header

Sticky com borda inferior que aparece ao rolar. data-omn-header habilita o JS.

Header padrão

Omnian

<header class="omn-header" data-omn-header>
  <div class="omn-container omn-header__inner">
    <a href="/" class="omn-mark">...</a>
    <nav class="omn-nav" aria-label="Navegação principal">
      <ul class="omn-nav__list">
        <li><a href="/manifesto" class="omn-nav__link">Manifesto</a></li>
        <li><a href="/sistema" class="omn-nav__link">Sistema</a></li>
      </ul>
      <a href="#inscrever" class="omn-btn omn-btn--ghost">Entrar na lista</a>
    </nav>
  </div>
</header>

Footer

Assinatura institucional. Mark à esquerda, meta à direita.

Footer padrão

<footer class="omn-footer">
  <div class="omn-container omn-footer__inner">
    <div class="omn-footer__signature">
      <a href="/" class="omn-mark omn-mark--compact">...</a>
      <span class="omn-footer__tagline">Archiving thought. Sustaining growth.</span>
    </div>
    <p class="omn-footer__meta">omnian.world  ·  Uma interface Kriou  ·  MMXXVI</p>
  </div>
</footer>

Botões

Variantes

Saiba mais

<button class="omn-btn omn-btn--primary">Primary</button>
<button class="omn-btn omn-btn--ghost">Ghost</button>
<a href="#" class="omn-btn--text">Saiba mais</a>

Eyebrow

Pequeno texto em caps acima de headlines. Sinaliza categoria/seção.

Eyebrow + título

Capítulo 07 · Aplicação

Componentes reutilizáveis.

<p class="omn-eyebrow">Capítulo 07 · Aplicação</p>
<h2>Componentes reutilizáveis.</h2>

Atributos data-omn-*

Pontos de extensão para o JavaScript do brand.

Atributo	Onde usar	O que faz
data-omn-header	<header>	Sticky com .is-scrolled ao rolar
data-omn-reveal	qualquer elemento	Fade-in suave em scroll
data-omn-subscribe	<form>	Captura email com fetch
data-omn-theme-toggle	<button>	Alterna light/dark/auto
data-copy-color	qualquer elemento	Copia hex ao clicar (brand book)