Componentes/News Card

News Card

Card de notícia financeira — exibe título, fonte, tempo e indicador de sentimento (alta/baixa/neutro). Usado em feeds de notícias dentro do contexto de trading.

Trading

Figma: 66:2373

Preview

Alta (dot verde)

Bitcoin ETF sees record inflows as institutional interest grows

Alta•CoinDesk•2h ago

Baixa (dot vermelho)

Petrobras shares fall on dividend cut concerns after Q3 earnings

Baixa•Valor Econômico•45m ago

Neutro (dot cinza)

Banco Central mantém Selic em 10,5% ao ano em decisão unânime

Neutro•Folha de S.Paulo•1h ago

Lista de notícias

Bitcoin ETF sees record inflows

Alta•CoinDesk•2h ago

Petrobras shares fall on dividend cut

Baixa•Valor Econômico•45m ago

Banco Central mantém Selic em 10,5%

Neutro•Folha•1h ago

Código

Copie e cole no Claude Code para implementar este componente em pixel-perfect usando os tokens TRDR.

<!-- News Card — Design System TRDR (Figma: 66:2373) -->
<!-- sentiment: adicionar .trdr-news-card-dot-up | -down | -neutral -->
<div class="trdr-news-card">
  <div class="trdr-news-card-inner">
    <div class="trdr-news-card-dot trdr-news-card-dot-up"></div>
    <div class="trdr-news-card-content">
      <p class="trdr-news-card-title">Bitcoin ETF sees record inflows as institutional interest grows</p>
      <div class="trdr-news-card-meta">
        <span class="trdr-news-card-source">CoinDesk</span>
        <span class="trdr-news-card-sep">•</span>
        <span class="trdr-news-card-time">2h ago</span>
      </div>
    </div>
    <button class="trdr-news-card-action" aria-label="Abrir notícia">
      <span class="material-symbols-outlined" style="font-size:12px;line-height:12px">open_in_new</span>
    </button>
  </div>
</div>

Dimensões

Variante	Largura	Altura
Default	`100%`	`74px`
Dot indicador	`4px`	`4px`
Botão de ação	`20px`	`20px`

Props / Variantes

Prop	Tipo	Valores
`sentiment`	enum	`updownneutral`
`title`	string
`source`	string
`time`	string
`href`	string

Tokens Utilizados

Propriedade	Token	Valor
Border bottom	`border.subtle`	`#222222`
Dot — alta	`context.trading.up`	`#4FE290`
Dot — baixa	`context.trading.down`	`#F34F45`
Dot — neutro	`content.tertiary`	`#A4A4A4`
Título	`content.primary`	`#FFFFFF`
Fonte / Tempo	`content.tertiary`	`#A4A4A4`
Separador •	`content.disabled`	`#4A4A4A`
Hover BG	`surface.secondary`	`#222222`
Padding	`spacing.sm + spacing.lg`	`8px 16px`
Gap inner	`spacing.sm`	`8px`
Radius botão	`radius.sm`	`4px`

Anatomia

Container (border-bottom subtle, padding 8px 16px):
  [Dot 4×4px] [Content flex-1 gap-8px] [Action 20×20px]
  Content:
    [Title — Inter 14/400/1.2 content-primary]
    [Meta row gap-8px h-16px]
      [Source 14/400] [• 12px disabled] [Time 14/400]

Notas

O dot indicador sobe (up) ou desce (down) conforme sentimento da notícia. Hover aplica surface.secondary. Quando href é passado, o container se torna um <a> com target _blank.