Skip to main content

Horizontal Card

Basic​

Basic example for the Horizontal Card component.

Science

Science Daily

Asteroid loaded with amino acids offers new clues about life on Earth

November 29, 2025

One of the most elegant theories about the origins of life on our planet is that it was kick-started by a delivery from outer space.

 
<HorizontalCard userName="Science Daily">
  <HorizontalCard.Badge>Science</HorizontalCard.Badge>
  <HorizontalCard.UserAvatar
    alt="Science Daily profile image"
    source={{
      uri: "https://images.unsplash.com/photo-1614732414444-096e5f1122d5?w=100&h=100&fit=crop",
    }}
  />
  <HorizontalCard.Title>
    Asteroid loaded with amino acids offers new clues about life on Earth
  </HorizontalCard.Title>
  <HorizontalCard.Description>
    One of the most elegant theories about the origins of life on our
    planet is that it was kick-started by a delivery from outer space.
  </HorizontalCard.Description>
  <HorizontalCard.Date>November 29, 2025</HorizontalCard.Date>
  <HorizontalCard.AssetRight>
    <Image
      source={{
        uri: "https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?w=800&h=600&fit=crop",
      }}
      alt="Asteroid in space"
    />
  </HorizontalCard.AssetRight>
</HorizontalCard>

With Image​

You can use props like AssetLeftComponent and AssetRightComponent to add an image to the left or right of the card.

Tech Xplore

Robots combine AI learning and control theory to perform advanced movements

November 28, 2025

Researchers have developed a new framework that allows humanoid robots to reliably manipulate different objects with 87% success rate.

Phys.org

Domestic cats came from North Africa to Europe only 2,000 years ago

November 28, 2025

DNA evidence suggests the timing and routes of early cat domestication and dispersal into Europe are more recent than previously thought.

 
<VStack gap="$4" width="$full">
  {/* Image on the left */}
  <HorizontalCard userName="Tech Xplore">
    <HorizontalCard.UserAvatar
      alt="Tech Xplore profile image"
      source={{
        uri: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=100&h=100&fit=crop",
      }}
    />
    <HorizontalCard.Title>
      Robots combine AI learning and control theory to perform advanced
      movements
    </HorizontalCard.Title>
    <HorizontalCard.Description>
      Researchers have developed a new framework that allows humanoid robots
      to reliably manipulate different objects with 87% success rate.
    </HorizontalCard.Description>
    <HorizontalCard.Date>November 28, 2025</HorizontalCard.Date>
    <HorizontalCard.AssetLeft>
      <Image
        source={{
          uri: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=800&h=600&fit=crop",
        }}
        alt="Humanoid robot"
      />
    </HorizontalCard.AssetLeft>
  </HorizontalCard>

  {/* Image on the right */}
  <HorizontalCard userName="Phys.org">
    <HorizontalCard.UserAvatar
      alt="Phys.org profile image"
      source={{
        uri: "https://images.unsplash.com/photo-1507413245164-6160d8298b31?w=100&h=100&fit=crop",
      }}
    />
    <HorizontalCard.Title>
      Domestic cats came from North Africa to Europe only 2,000 years ago
    </HorizontalCard.Title>
    <HorizontalCard.Description>
      DNA evidence suggests the timing and routes of early cat domestication
      and dispersal into Europe are more recent than previously thought.
    </HorizontalCard.Description>
    <HorizontalCard.Date>November 28, 2025</HorizontalCard.Date>
    <HorizontalCard.AssetRight>
      <Image
        source={{
          uri: "https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=800&h=600&fit=crop",
        }}
        alt="Cat portrait"
      />
    </HorizontalCard.AssetRight>
  </HorizontalCard>
</VStack>

With Icon​

Don't have an image? You can use an icon instead. Use the AssetLeftComponent and AssetRightComponent props to add an icon to the left or right of the card.

Science Daily

Scientists discover a hidden deep sea hotspot bursting with life

November 26, 2025

Beneath the waters off Papua New Guinea lies an extraordinary deep-sea environment where hydrothermal vents and methane seeps coexist.

Phys.org

Stars defy black hole by showing stable orbits around Sagittarius A*

November 28, 2025

An international research team has used new observation instruments to study the supermassive black hole at the center of our galaxy.

 
<VStack gap="$4" width="$full">
  {/* Icon on the left */}
  <HorizontalCard userName="Science Daily">
    <HorizontalCard.UserAvatar
      alt="Science Daily profile image"
      source={{
        uri: "https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=100&h=100&fit=crop",
      }}
    />
    <HorizontalCard.Title>
      Scientists discover a hidden deep sea hotspot bursting with life
    </HorizontalCard.Title>
    <HorizontalCard.Description>
      Beneath the waters off Papua New Guinea lies an extraordinary deep-sea
      environment where hydrothermal vents and methane seeps coexist.
    </HorizontalCard.Description>
    <HorizontalCard.Date>November 26, 2025</HorizontalCard.Date>
    <HorizontalCard.AssetLeft>
      <Newspaper />
    </HorizontalCard.AssetLeft>
  </HorizontalCard>

  {/* Icon on the right */}
  <HorizontalCard userName="Phys.org">
    ...
  </HorizontalCard>
</VStack>

With Custom Icon Element​

You can also pass your custom react elements as icons for further customization.

Science Daily

Scientists discover a hidden deep sea hotspot bursting with life

November 26, 2025

Beneath the waters off Papua New Guinea lies an extraordinary deep-sea environment where hydrothermal vents and methane seeps coexist.

 
const { color } = getTokens();
const iconColorHex = color["red.500"].val;

<HorizontalCard userName="Science Daily">
  <HorizontalCard.UserAvatar
    alt="Science Daily profile image"
    source={{
      uri: "https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=100&h=100&fit=crop",
    }}
  />
  <HorizontalCard.Title>
    Scientists discover a hidden deep sea hotspot bursting with life
  </HorizontalCard.Title>
  <HorizontalCard.Description>
    Beneath the waters off Papua New Guinea lies an extraordinary deep-sea
    environment where hydrothermal vents and methane seeps coexist.
  </HorizontalCard.Description>
  <HorizontalCard.Date>November 26, 2025</HorizontalCard.Date>
  <HorizontalCard.AssetLeft>
    <Newspaper height={24} width={24} color={iconColorHex} />
  </HorizontalCard.AssetLeft>
</HorizontalCard>

With Badge​

You can optionally pass a BadgeComponent prop to add a badge to the card.

Environment

A surprising new method finally makes Teflon recyclable

November 27, 2025

 
<HorizontalCard>
  <HorizontalCard.Badge>Environment</HorizontalCard.Badge>
  <HorizontalCard.Title>
    A surprising new method finally makes Teflon recyclable
  </HorizontalCard.Title>
  <HorizontalCard.Date>November 27, 2025</HorizontalCard.Date>
  <HorizontalCard.AssetLeft>
    <Image
      source={{
        uri: "https://images.unsplash.com/photo-1532996122724-e3c354a0b15b?w=800&h=600&fit=crop",
      }}
      alt="Recycling concept"
    />
  </HorizontalCard.AssetLeft>
</HorizontalCard>

Color Mode Override​

Use the colorMode prop to override the color mode of the card.

New nasal nanodrops show promise against brain tumors in mice

November 22, 2025

A new nasal-delivered nanotherapy shows promise against aggressive glioblastoma tumors by activating the STING immune pathway.

 
<HorizontalCard colorMode="dark">
  <HorizontalCard.Title>
    New nasal nanodrops show promise against brain tumors in mice
  </HorizontalCard.Title>
  <HorizontalCard.Date>November 22, 2025</HorizontalCard.Date>
  <HorizontalCard.Description>
    A new nasal-delivered nanotherapy shows promise against aggressive
    glioblastoma tumors by activating the STING immune pathway.
  </HorizontalCard.Description>
  <HorizontalCard.AssetLeft>
    <Image
      source={{
        uri: "https://images.unsplash.com/photo-1532187863486-abf9dbad1b69?w=800&h=600&fit=crop",
      }}
      alt="Medical research laboratory"
    />
  </HorizontalCard.AssetLeft>
  <HorizontalCard.UserAvatar
    alt="Science Daily profile image"
    source={{
      uri: "https://images.unsplash.com/photo-1516475429286-465d815a0df7?w=100&h=100&fit=crop",
    }}
  />
</HorizontalCard>

Accent Color Override​

Use the accentColor prop to override the accent color of the card.

Archaeology

Giant statues on Rapa Nui reveal how the moai were made and moved

November 28, 2025

The tiny, remote island in the Pacific features nearly 1,000 enormous statues. Scientists now understand more about their mysterious origins.

 
<HorizontalCard accentColor="rose">
  <HorizontalCard.Badge>Archaeology</HorizontalCard.Badge>
  <HorizontalCard.Title>
    Giant statues on Rapa Nui reveal how the moai were made and moved
  </HorizontalCard.Title>
  <HorizontalCard.Date>November 28, 2025</HorizontalCard.Date>
  <HorizontalCard.Description>
    The tiny, remote island in the Pacific features nearly 1,000 enormous
    statues. Scientists now understand more about their mysterious
    origins.
  </HorizontalCard.Description>
  <HorizontalCard.UserAvatar
    alt="Phys.org profile image"
    source={{
      uri: "https://images.unsplash.com/photo-1569982175971-d92b01cf8694?w=100&h=100&fit=crop",
    }}
  />
  <HorizontalCard.AssetLeft>
    <Newspaper />
  </HorizontalCard.AssetLeft>
</HorizontalCard>

Color Mode and Accent Color Override​

You can override both the color mode and accent color of the card.

Research

Science Daily

Seven-year study uncovers the holy grail of beer brewing

November 29, 2025

ETH Zurich scientists have found the long-sought formula behind stable beer foam, explaining why different beers rely on different mechanisms.

 
<HorizontalCard
  userName="Science Daily"
  accentColor="blue"
>
  <HorizontalCard.Badge>Research</HorizontalCard.Badge>
  <HorizontalCard.UserAvatar
    alt="Science Daily profile image"
    source={{
      uri: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62?w=100&h=100&fit=crop",
    }}
  />
  <HorizontalCard.Title>
    Seven-year study uncovers the holy grail of beer brewing
  </HorizontalCard.Title>
  <HorizontalCard.Description>
    ETH Zurich scientists have found the long-sought formula behind stable
    beer foam, explaining why different beers rely on different
    mechanisms.
  </HorizontalCard.Description>
  <HorizontalCard.Date>November 29, 2025</HorizontalCard.Date>
  <HorizontalCard.AssetLeft>
    <Newspaper />
  </HorizontalCard.AssetLeft>
</HorizontalCard>