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.
Não devemos ter mais de um H1 por página.
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.
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.
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.
Instale o componente via terminal.
npm install @nimbus-ds/titleAdditional props are passed to the <Title> element. See heading docs for a list of props accepted by the <Title> element.