Skip to main content

Vertical Card

Basic​

This is a basic example of the VerticalCard component. It displays information about a travel destination, including a badge, user avatar, title, description, date, and an associated image.

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.

 
const BasicComponent = () => {
  return (
    <VerticalCard userName="Science Daily">
      <VerticalCard.Badge>Science</VerticalCard.Badge>
      <VerticalCard.UserAvatar
        alt="Science Daily profile image"
        source={{
          uri: "https://images.unsplash.com/photo-1614732414444-096e5f1122d5?w=100&h=100&fit=crop",
        }}
      />
      <VerticalCard.Title>
        Asteroid loaded with amino acids offers new clues about life on Earth
      </VerticalCard.Title>
      <VerticalCard.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.
      </VerticalCard.Description>
      <VerticalCard.Date>November 29, 2025</VerticalCard.Date>
      <VerticalCard.Asset>
        <Image
          source={{
            uri: "https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?w=800&h=600&fit=crop",
          }}
          alt="Asteroid in space"
        />
      </VerticalCard.Asset>
    </VerticalCard>
  );
};

Floating Mode​

This story showcases different variations of the VerticalCard component in floating mode. It demonstrates how the card can display user avatars, titles, descriptions, dates, and assets in different combinations.

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.

BBC Innovation

Lightning detected on Mars for the first time, scientists say

November 27, 2025

Researchers heard electric crackles on 28 hours of recordings made over two Martian years.

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.

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

      {/* Floating mode with icon */}
      <VerticalCard userName="BBC Innovation">
        ...
      </VerticalCard>

      {/* Floating mode - Text only */}
      <VerticalCard userName="Phys.org">
        ...
      </VerticalCard>
    </VStack>
  );
};

Fixed Mode​

This story showcases different variations of the VerticalCard component in fixed mode. It demonstrates how the card can display user avatars, titles, descriptions, dates, and assets in different combinations with a fixed layout.

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.

BBC Innovation

Experience life aboard the Titanic like never before

November 27, 2025

Tech Now steps aboard the historic Titanic ship for a virtual trip on its maiden voyage in 1912 using cutting-edge VR technology.

 
const FixedModeComponent = () => {
  return (
    <VStack gap="$4" width="$full">
      {/* Fixed mode with image */}
      <VerticalCard contentMode="fixed" userName="Science Daily">
        <VerticalCard.UserAvatar
          alt="Science Daily profile image"
          source={{
            uri: "https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=100&h=100&fit=crop",
          }}
        />
        <VerticalCard.Title>
          Scientists discover a hidden deep sea hotspot bursting with life
        </VerticalCard.Title>
        <VerticalCard.Description>
          Beneath the waters off Papua New Guinea lies an extraordinary deep-sea
          environment where hydrothermal vents and methane seeps coexist.
        </VerticalCard.Description>
        <VerticalCard.Date>November 26, 2025</VerticalCard.Date>
        <VerticalCard.Asset>
          <Image
            source={{
              uri: "https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=800&h=600&fit=crop",
            }}
            alt="Deep sea ocean"
          />
        </VerticalCard.Asset>
      </VerticalCard>

      {/* Fixed mode with icon */}
      <VerticalCard contentMode="fixed" userName="Phys.org">
        ...
      </VerticalCard>

      {/* Fixed mode - Text only */}
      <VerticalCard contentMode="fixed" userName="BBC Innovation">
        ...
      </VerticalCard>
    </VStack>
  );
};

Custom Icon Element​

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

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.

 
const CustomIconElementComponent = () => {
  const { color } = getTokens();
  const iconColorHex = color["red.500"].val;
  
  return (
    <VerticalCard contentMode="fixed" userName="Phys.org">
      <VerticalCard.UserAvatar
        alt="Phys.org profile image"
        source={{
          uri: "https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=100&h=100&fit=crop",
        }}
      />
      <VerticalCard.Title>
        Stars defy black hole by showing stable orbits around Sagittarius A*
      </VerticalCard.Title>
      <VerticalCard.Description>
        An international research team has used new observation instruments to
        study the supermassive black hole at the center of our galaxy.
      </VerticalCard.Description>
      <VerticalCard.Date>November 28, 2025</VerticalCard.Date>
      <VerticalCard.Asset>
        <Map height={36} width={36} color={iconColorHex} />
      </VerticalCard.Asset>
    </VerticalCard>
  );
};

Fixed Height​

This story showcases the VerticalCard component with fixed heights. It displays variations with both floating and fixed content modes, along with user avatars, titles, descriptions, dates, and assets.

Science Daily

Solar superstorm crushed Earth's plasmasphere to a record low

November 23, 2025

A massive solar storm in May 2024 gave scientists an unprecedented look at how Earth's protective plasma layer collapses under intense space weather.

Phys.org

Google Quantum AI realizes dynamic surface code implementations

November 28, 2025

Quantum computers rely on qubits which can store information in a mixture of states, opening new possibilities for computing.

 
const FixedHeightComponent = () => {
  return (
    <VStack gap="$4" width="$full">
      {/* Fixed height, floating content */}
      <VerticalCard
        contentMode="floating"
        userName="Science Daily"
        _container={{
          height: 64 * 4,
        }}
      >
        <VerticalCard.UserAvatar
          alt="Science Daily profile image"
          source={{
            uri: "https://images.unsplash.com/photo-1534088568595-a066f410bcda?w=100&h=100&fit=crop",
          }}
        />
        <VerticalCard.Title>
          Solar superstorm crushed Earth's plasmasphere to a record low
        </VerticalCard.Title>
        <VerticalCard.Description>
          A massive solar storm in May 2024 gave scientists an unprecedented
          look at how Earth's protective plasma layer collapses under intense
          space weather.
        </VerticalCard.Description>
        <VerticalCard.Date>November 23, 2025</VerticalCard.Date>
        <VerticalCard.Asset>
          <Image
            source={{
              uri: "https://images.unsplash.com/photo-1534088568595-a066f410bcda?w=800&h=600&fit=crop",
            }}
            alt="Solar flare and aurora"
          />
        </VerticalCard.Asset>
      </VerticalCard>

      {/* Fixed height, fixed content */}
      <VerticalCard
        contentMode="fixed"
        userName="Phys.org"
        _container={{
          height: 64 * 4,
        }}
      >
        ...
      </VerticalCard>
    </VStack>
  );
};

Using Badges​

This story demonstrates the usage of badges with the VerticalCard component. It displays variations with both image and icon assets, along with titles, dates, and badges indicating travel-related content.

Environment

A surprising new method finally makes Teflon recyclable

November 27, 2025

Technology

Coffee waste helps make lower carbon concrete

November 28, 2025

 
const UsingBadgesComponent = () => {
  return (
    <VStack gap="$4" width="$full">
      {/* Image + Badge */}
      <VerticalCard>
        <VerticalCard.Badge>Environment</VerticalCard.Badge>
        <VerticalCard.Title>
          A surprising new method finally makes Teflon recyclable
        </VerticalCard.Title>
        <VerticalCard.Date>November 27, 2025</VerticalCard.Date>
        <VerticalCard.Asset>
          <Image
            source={{
              uri: "https://images.unsplash.com/photo-1532996122724-e3c354a0b15b?w=800&h=600&fit=crop",
            }}
            alt="Recycling concept"
          />
        </VerticalCard.Asset>
      </VerticalCard>

      {/* Icon + Badge */}
      <VerticalCard>
        <VerticalCard.Badge>Technology</VerticalCard.Badge>
        <VerticalCard.Title>
          Coffee waste helps make lower carbon concrete
        </VerticalCard.Title>
        <VerticalCard.Date>November 28, 2025</VerticalCard.Date>
        <VerticalCard.Asset>
          <Map />
        </VerticalCard.Asset>
      </VerticalCard>
    </VStack>
  );
};

Color Mode Override​

This story showcases the VerticalCard component with color mode override. It demonstrates how the card can adapt its color mode based on the provided prop, allowing for easy integration into light or dark-themed applications.

Science Daily

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.

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

Accent Color Override​

This story demonstrates the VerticalCard component with an accent color override. It shows how you can customize the accent color of the card, allowing for different visual styles in your application.

Archaeology

Phys.org

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.

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

Color Mode & Accent Color Override​

This story showcases the VerticalCard component with both color mode and accent color overrides. It allows you to customize the card's color scheme and accent color, offering greater flexibility in your application's design.

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.

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