Heading

O componente Heading é usado para renderizar ​títulos dentro de uma interface. Por padrão ele renderiza uma tag <h2>.

Importação

import { Heading } from '@escaletech/delta'

Utilização

Editor de código

<Heading>Hello world!</Heading>

<Heading>Hello world!</Heading>

Resultado

Loading...

Alterando a cor

Use a propriedade color para renderizar o Heading com uma cor diferente. Esta propriedade aceita tokens e qualquer formato.

Editor de código

<> <Heading color='$primaryMedium'> Hello world! </Heading> <Heading color='$secondaryMedium'> Hello world! </Heading> <Heading color='$neutralMedium'> Hello world! </Heading> <Heading color='$successDark'> Hello world! </Heading> <Heading color='#e64461'> Hello world! </Heading> <Heading color='pink'> Hello world! </Heading> </>

<>
  <Heading color='$primaryMedium'>
    Hello world!
  </Heading>
  <Heading color='$secondaryMedium'>
    Hello world!
  </Heading>
  <Heading color='$neutralMedium'>
    Hello world!
  </Heading>
  <Heading color='$successDark'>
    Hello world!
  </Heading>
  <Heading color='#e64461'>
    Hello world!
  </Heading>
  <Heading color='pink'>
    Hello world!
  </Heading>
</>

Resultado

Loading...

Alterando o peso

Para alterar o peso do título, você pode usar a propriedade weight.

Editor de código

<> <Heading weight='light'> Hello world! </Heading> <Heading weight='regular'> Hello world! </Heading> <Heading weight='medium'> Hello world! </Heading> <Heading weight='semibold'> Hello world! </Heading> <Heading weight='bold'> Hello world! </Heading> </>

<>
  <Heading weight='light'>
    Hello world!
  </Heading>
  <Heading weight='regular'>
    Hello world!
  </Heading>
  <Heading weight='medium'>
    Hello world!
  </Heading>
  <Heading weight='semibold'>
    Hello world!
  </Heading>
  <Heading weight='bold'>
    Hello world!
  </Heading>
</>

Resultado

Loading...

Alterando a altura da linha

Para alterar a altura da linha do título, você pode usar a propriedade lineHeight.

Editor de código

<> <Heading lineHeight='tight'> Hello world! </Heading> <Heading lineHeight='md'> Hello world! </Heading> <Heading lineHeight='distant'> Hello world! </Heading> <Heading lineHeight='superDistant'> Hello world! </Heading> </>

<>
  <Heading lineHeight='tight'>
    Hello world!
  </Heading>
  <Heading lineHeight='md'>
    Hello world!
  </Heading>
  <Heading lineHeight='distant'>
    Hello world!
  </Heading>
  <Heading lineHeight='superDistant'>
    Hello world!
  </Heading>
</>

Resultado

Loading...

Alterando o tamanho

Altere o font-size do Heading com a propriedade size.

Editor de código

<> <Heading size="sm"> (sm) Hello world! </Heading> <Heading size="md"> (md) Hello world! </Heading> <Heading size="lg"> (lg) Hello world! </Heading> <Heading size="xl"> (xl) Hello world! </Heading> <Heading size="xxl"> (xxl) Hello world! </Heading> </>

<>
  <Heading size="sm">
    (sm) Hello world!
  </Heading>
  <Heading size="md">
    (md) Hello world!
  </Heading>
  <Heading size="lg">
    (lg) Hello world!
  </Heading>
  <Heading size="xl">
    (xl) Hello world!
  </Heading>
  <Heading size="xxl">
    (xxl) Hello world!
  </Heading>
</>

Resultado

Loading...

CMS (Content Management System)

Quando utilizamos ferramentas de CMS (Content Management System) como Prismic, Strapi, Ghost entres outros para gerenciar e publicar conteúdos em nossas páginas, é muito comum terem um editor WYSIWYG (What You See Is What You Get), onde podemos definir o texto como um título ou parágrafo, torná-lo em negrito, adicionar links, etc. Fazendo com que suas API retornem como resultado um HTML dinamico para consumirmos em nossos projetos. Para resolvermos esse problema, o componente Heading faz com que seus filhos erdem seus estilos mantendo assim suas caractericas como a de seu pai.

Aqui está alguns exemplos:

Obs: recomendamos fortemente que passe div como argumento da propriedade as do componente Heading para obter um melhor resultado em SEO (Search Engine Optimizatio).

Prismic

import { RichText } from 'prismic-reactjs'

function Component({ title }){
  return (
    <Heading as="div">
      <RichText render={title} />
    </Heading>
  )
}

dangerouslySetInnerHTML

Editor de código

function Component() { const title = '<h1>Hello <span>world</span></h1>' return ( <Heading as="div" dangerouslySetInnerHTML={{ __html: title }} /> ) }

function Component() {
  const title = '<h1>Hello <span>world</span></h1>'

  return (
    <Heading as="div" dangerouslySetInnerHTML={{ __html: title }} />
  )
}

Resultado

Loading...

Customização

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de tema.

import { extendsTheme } from '@escaletech/delta'

export const theme = extendsTheme({
  fonts: {
    headingFontFamily: '$primary'
  },
  fontWeights: {
    headingFontWeight: '$semibold'
  }
})

Tokens

Token	Descrição
fonts.headingFontFamily	Font-family do título
fontWeights.headingFontWeight	Peso da fonte do título

Props

Propriedade	Descrição	Tipo	Padrão	Obrigatório
size	Define o tamanho do Heading	'sm', 'md', 'lg', 'xl', 'xxl'	-	❌
color	Define a cor do Heading	string	-	❌
weight	Define o peso do Heading	'light', 'regular', 'medium', 'semibold', 'bold'	-	❌
lineHeight	Define a altura da linha do Heading	'tight', 'md', 'distant', 'superDistant'	-	❌

Aceita todos as propriedades suportados por títulos nativos.