Title
Titles são componentes de texto, utilizados para empregar hierarquia visual e semântica aos conteúdos de uma página.
Usado para o título da página, deve ser usado uma vez por página.
import React from "react";
import { Title } from "@nimbus-ds/components";
const Example: React.FC = () => (
<Title as="h1">Lorem ipsum dolor sit amet</Title>
);
export default Example;
O Title é um componente de texto, utilizado para empregar hierarquia visual e semântica aos conteúdos de uma página.
Esse componente tem dois níveis de hierarquia, a semântica e a visual, as duas funcionam de forma independente podendo ser combinados entre si.
Semântica
A hierarquia semântica é aplicada por meio de tags Html (h1, h2, h3, h4, h5 e h6), elas servem para delimitar seções de conteúdo para navegadores da web, plugins e tecnologias assistivas, por isso devemos levar em consideração que o h1 tem o maior nível hierárquico e o h6 o menor.
Essas classificações podem ser combinadas para delimitar seções e subseções de conteúdo de acordo com a necessidade, para mais informações consulte as recomendações W3 para títulos.
Visual
A hierarquia visual é aplicada por meio dos nossos tokens tipográficos, que podem aumentar ou diminuir o destaque de determinados títulos ou subtítulos, sem interferir nas questões semânticas.
Utilizamos o Title para dar título e subtítulo a telas, páginas, blocos de texto, seções ou outros componentes, empregando hierarquia visual e semântica.
Componente Text - Usado para texto corrido, parágrafos ou orações.
![Os títulos devem ser usados para hierarquizar as informações em uma página.](/_next/image?url=%2Fimages%2Fdo-title-1.png&w=3840&q=75)
Os títulos devem ser usados para hierarquizar as informações em uma página.
![Não devemos ter mais de um H1 por página.](/_next/image?url=%2Fimages%2Fdont-title-1.png&w=3840&q=75)
Não devemos ter mais de um H1 por página.
![Em um título devemos sempre manter o mesmo estilo na linha toda.](/_next/image?url=%2Fimages%2Fdo-title-2.png&w=3840&q=75)
Em um título devemos sempre manter o mesmo estilo na linha toda.
![Títulos devem ter um só estilo de texto, não variando de estilo ao longo da linha.](/_next/image?url=%2Fimages%2Fdont-title-2.png&w=3840&q=75)
Títulos devem ter um só estilo de texto, não variando de estilo ao longo da linha.
![Os títulos devem seguir a ordem do maior para o menor.](/_next/image?url=%2Fimages%2Fdo-title-3.png&w=3840&q=75)
Os títulos devem seguir a ordem do maior para o menor.
![Não devemos ter títulos fora de uma ordem sequencial lógica.](/_next/image?url=%2Fimages%2Fdont-title-3.png&w=3840&q=75)
Não devemos ter títulos fora de uma ordem sequencial lógica.
![Devemos nos certificar que as cores do texto tem contraste suficiente em relação ao background.](/_next/image?url=%2Fimages%2Fdo-title-4.png&w=3840&q=75)
Devemos nos certificar que as cores do texto tem contraste suficiente em relação ao background.
![Títulos devem utilizar cores low ou high contrast, para nos certificar que eles são legíveis.](/_next/image?url=%2Fimages%2Fdont-title-4.png&w=3840&q=75)
Títulos devem utilizar cores low ou high contrast, para nos certificar que eles são legíveis.
Instale o componente via terminal.
npm install @nimbus-ds/title
Additional props are passed to the <Title> element. See heading docs for a list of props accepted by the <Title> element.