Atlantica

Atlantica

  • Atlantica Design
  • API React Native
  • Help

›Componentes

Atlantica Design

  • Introdução
  • Princípios de Design
  • Glossário

Arquitetura

  • Molecules e Atoms
  • Tokens & Props
  • Nomeando Tokens

Componentes

    Atoms

    • Avatar Base
    • Button Toggle Base
    • Button Base
    • Divider Base
    • Icon Button Base
    • Icon Base
    • Image Base
    • Text Input Base
    • Label Base
    • Switch Base

    Molecules

    • ActionListCard
    • Avatar Editor
    • Button
    • ATLCardList
    • Checkbox
    • ATLChips
    • Comment List Preview
    • Comment
    • Cover
    • DateTimePicker
    • ATLDialog
    • ATLDivider
    • Double Button
    • Dropdown
    • Event Cell
    • Event Title
    • Floating Action Button (FAB)
    • Horizontal User List
    • Icon Label
    • ATLIconizedText
    • Image Logo
    • ImagePicker
    • Label Button
    • List Divider
    • ATLNavigationButton
    • Notification
    • Post
    • SearchBox
    • SettingsItem
    • Single Image
    • ATLSpacing
    • StatusListCard
    • ATLSummary
    • SurveyPost
    • ATLSwitchButton
    • ATLTextBody
    • ATLTextHead
    • TextInput
    • Title
    • UserInfo
    • UserListCard

ATLTextHead

texthead_exemplo

DESCRIÇÃO

Esta molécula foi desenhada para conter um texto de título.

ANATOMIA

textehead_anatomia

SPECS

texthead_specs

Átomos

  • Atom Label, como Título (em todos os tipos).

TIPOS

texthead_tipos

Há quatro tipos de molécula Text Head. A diferença entre eles está na hierarquia, o H1 é o título com maior destaque, seguido por H2, H3 e H4. Um projeto pode conter mais de um tipo pois seu uso está associado a hierarquia da informação.

COMPORTAMENTO

Conteúdo

texthead_conteudo

A molécula cresce para baixo para exibir todo conteúdo, mantendo os espaçamentos.

Responsividade

texthead_responsividade

Conforme o tamanho da tela se altera a molécula se adapta para exibir todo o conteúdo.

Estado

Essa molécula não possui nenhum estado.

Interação

Essa molécula é apenas para exibir conteúdo, por isso não há nenhuma interação.

VARIAÇÕES

texthead_variacoes

As variações possiveis dessa molécula são modificações nos styles relacionadas a cor e/ou alinhamento. Sobre cor, o título pode adquirir a cor complementar1 ou a cor de alto contraste. Sobre alinhamento, ele pode ser à esquerda, à direita ou centralizado. Todos os styles citados estão nos overrides do Atom Label.

APLICAÇÃO

texthead_aplicacao2

← ATLTextBodyTextInput →
  • DESCRIÇÃO
  • ANATOMIA
  • SPECS
    • Átomos
  • TIPOS
  • COMPORTAMENTO
    • Conteúdo
    • Responsividade
    • Estado
    • Interação
  • VARIAÇÕES
  • APLICAÇÃO
Atlantica
Docs
Getting Started (or other categories)Guides (or other categories)API Reference (or other categories)
Community
User ShowcaseStack OverflowProject ChatTwitter
More
BlogGitHubStar
Facebook Open Source
Copyright © 2019 Your Name or Your Company Name