Pharos
Navegar componentes
← Componentes

Section

LayoutExemplo
Section é a forma correta de criar regiões de página e agrupar conteúdo relacionado. Use para grupos de configurações, seções de formulário, áreas de sidebar ou sempre que precisar de separação visual entre partes de uma página. Se você está tentado a usar um Card para uma seção de página, use Section.
Importação
import {Section} from '@pharos-ds/core/Section';

Exemplos

Área interativa

variant
padding
Divisores
Conteúdo da seção
Código
import {Section} from '@pharos-ds/core/Section';

<Section
  variant="section"
  padding="4"
  hasDividers={false}
 />

Boas práticas

  • Faça: Use Section para agrupamento em nível de página: painéis de configurações, grupos de formulário, regiões de sidebar. São seções de uma página, não itens discretos.
  • Faça: Comece com a variant padrão. Use muted apenas para chamar atenção a uma região específica.
  • Faça: Adicione divisores entre seções com o mesmo fundo que precisam de separação.
  • Faça: Combine com heading + Stack para um padrão típico de seção de página.
  • Evite: Use Card quando você quer dizer Section. Cards são para itens discretos (uma notificação, um perfil). Sections são para regiões de página.

Props

PropTipoPadrãoDescrição
variant'section' | 'transparent' | 'muted''section'Variant de fundo aplicada ao container da section.
widthSizeValue—Largura da section; um número é interpretado como pixels, uma string é usada como está.
heightSizeValue—Altura da section; um número é interpretado como pixels, uma string é usada como está.
maxWidthSizeValue—Largura máxima da section.
minHeightSizeValue—Altura mínima da section.
childrenReactNode—Conteúdo renderizado dentro da section.
dividersArray<'top' | 'bottom' | 'start' | 'end'>—Quais lados da section têm bordas divisoras.
padding0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 104Padding interno usando a escala de spacing (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10). Use padding={0} para conteúdo edge-to-edge.
paddingBlock0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10—Sobrescrita de padding block (vertical). Sobrescreve apenas o padding do eixo block, preservando padding inline de `padding` ou o padrão do tema do container. Aceita a escala de spacing (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10).
xstyleStyleXStyles—Estilos StyleX para customização de layout (margens, posicionamento, dimensionamento). Deve ser um valor stylex.create(), não um objeto de estilo inline.
Pacote: @pharos-ds/core · Import: @pharos-ds/core/Section
Section · Pharos