SectionItem

Tipo: Componente Angular

DesignersFigma Design System 2.0
Devs · HTML/CSSmds-styles Storybook com classes e exemplos
Devs · Angularmds-angular Storybook com inputs e outputs

Definição Funcional

O SectionItem é um componente utilizado para exibir pares de informações estruturadas (rótulo e valor). Ele organiza dados de leitura rápida em listas ou grades, podendo ser acompanhado de um ícone para reforçar o contexto visual do dado apresentado. ![image]((hosted image)) ![image]((hosted image))

Diretrizes de Comportamento

Rótulo (Label): Identifica o que é a informação. Deve ser curto e usar Caixa de Sentença.
- Exemplo: Peso bruto, Data de saída.
Valor (Value): É o dado propriamente dito. Deve ter maior peso visual (ex: negrito ou cor mais escura) que o rótulo para facilitar a leitura.
- Exemplo: 12.500 kg, 25/05/2026.
Ícone de Apoio: Utilize ícones para categorizar visualmente o tipo de informação (ex: ícone de calendário para datas, ícone de cifrão para valores monetários).
Alinhamento: Em listas verticais, mantenha o alinhamento à esquerda. Em cartões de resumo, pode-se utilizar o layout lado a lado (rótulo à esquerda, valor à direita).
Vá Direto ao Ponto: Não use frases completas nos rótulos.
- Ruim: O nome do motorista é
- Melhor: Motorista

Exemplos de Escrita

Contexto	Rótulo (Label)	Valor (Value)	Ícone Sugerido
Veículo	Placa do cavalo	KJG-9088	`truck`
Carga	Tipo de mercadoria	Eletrônicos	`package`
Financeiro	Valor do frete	R$ 4.500,00	`receipt`
Tempo	Previsão de chegada	14/AGO - 16:00	`clock`

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

HTML/CSS (mds-styles)

Exemplo

Story WithIcon do Storybook:

<div class="mds-section-item mds-section-item--md d-flex align-items-center">
  <i data-lucide=""></i>
  <dl class="mds-section-item__content">
    <dt class="no-margin--all mds-section-item__label">Data de Entrega</dt>
    <dd class="no-margin--all mds-section-item__value">25/12/2024</dd>
  </dl>
</div>

Variações e opções

Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.

Opção	Valores	Padrão no exemplo
`value`	—	`25/12/2024`
`icon`	—	`calendar-alt`
`avatarInitials`	—	—
`size`	`sm` `md` `lg`	`md`
`reverse`	`true` · `false`	—

Classes CSS

Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.

Tipo	Classes
Bloco	`.mds-section-item`
Elementos	`.mds-section-item__content` `.mds-section-item__icon` `.mds-section-item__label` `.mds-section-item__value`
Modificadores	`.mds-section-item--reverse` `.mds-section-item--sm` `.mds-section-item--xs`

Angular (mds-angular)

Seletor

mds-section-item

A section item é o item utilizado para listagem de valores.

Inputs

Input	Tipo	Padrão	Descrição
`label`	`string`	`''`	Label/titulo do item
`value`	`string \| number`	`''`	Valor do item
`valueEllipsis`	`boolean`	`false`	Habilita ellipsis para cortar o tamanho do value excedente a largura
`iconFontSize`	`MdsFontSizes \| null`	`null`	Tamanho da fonte do icone
`size`	`MdsSizes`	`'md'`	Tamanho do componente
`mode`	`'horizontal' \| 'vertical'`	`'vertical'`	Modo de exibição
`icon`	`MdsIconAlias \| any[] \| string \| undefined`	`undefined`	Nome do icone ou imagem - `MdsIconAlias` alias do icone
`iconType`	`'alias' \| 'svg'`	`'alias'`	Tipo do icone
`additionalClass`	`string`	`''`	Classe adicional
`className`	`string`	`''`	Classe CSS customizada adicionada ao host
`reverse`	`boolean`	`false`	Modo que inverte a posição do label e do value
`loading`	`boolean`	`false`	Habilita animação de loading

Slots

Conteúdo projetado com o atributo data-position:

data-position="avatar"
data-position="before-content"
data-position="content"

Visão ao vivo

SectionItem — Figma (Design System 2.0) ↗