Card
Usage
The ShCard constructor represents a card divided in two halfs, with upper half containing image, and lower half containing text with additional options for inserting labels. Text & labels both fully support Markdown syntax.
Basic
NASA Space Program
Per aspera ad astra
NASA explores the unknown in air and space, innovates for the benefit of humanity, and inspires the world through discovery. At its 20 centers and facilities across the country – and the only National Laboratory in space – NASA studies Earth, including its climate, our Sun, and our solar system and beyond. We conduct research, testing, and development to advance aeronautics, including electric propulsion and supersonic flight. We develop and fund space technologies that will enable future exploration and benefit life on Earth.
::ShCard
---
text: |
NASA explores the unknown in air and space, innovates for the benefit of humanity, and inspires the world through discovery. At its 20 centers and facilities across the country – and the only National Laboratory in space – [NASA](https://www.nasa.gov/) studies <a href="https://earth.google.com/web/" target="_blank">Earth</a>, including its climate, our Sun, and our solar system and beyond. We conduct research, testing, and development to advance aeronautics, including electric propulsion and supersonic flight. We develop and fund space technologies that will enable future exploration and benefit life on Earth.
title: |
NASA Space Program
subtitle: |
Per aspera ad astra
leftLabel: |
Hello left [label](https://www.nasa.gov)
centerLabel: |
Hello <a href="https://earth.google.com/" target="_blank">center</a> label
rightLabel: |
Hello <a href="https://earth.google.com/" target="_blank">right</a> label
imageBackground: https://static.vecteezy.com/system/resources/previews/026/459/005/non_2x/abstract-background-images-wallpaper-ai-generated-free-photo.jpg
urlImage: https://www.nasa.gov/wp-content/themes/nasa/assets/images/nasa-logo.svg
urlUpperBase: https://www.nasa.gov
---
::
Cover effects
Special cover effect can be applied to any ShCard, allowing the main content to be 'hidden' from the first sight, while revealing itself only on hover over. The cover can be an image (coverImage), an icon (coverIcon) or a text (coverText), and each can reveal the card with a transition (default) or with opacity (opacity: true). Every combination is shown below on its own.
Image w/ Transition
On hover the image cover slides away to reveal the card.
NASA Space Program
Per aspera ad astra
NASA explores the unknown in air and space, innovates for the benefit of humanity, and inspires the world through discovery. At its 20 centers and facilities across the country – and the only National Laboratory in space – NASA studies Earth, including its climate, our Sun, and our solar system and beyond. We conduct research, testing, and development to advance aeronautics, including electric propulsion and supersonic flight. We develop and fund space technologies that will enable future exploration and benefit life on Earth.
::ShCard
---
coverImage: https://www.nasa.gov/wp-content/uploads/2024/11/sts066-s-011orig.jpg
text: |
NASA explores the unknown in air and space, innovates for the benefit of humanity, and inspires the world through discovery. At its 20 centers and facilities across the country – and the only National Laboratory in space – [NASA](https://www.nasa.gov/) studies <a href="https://earth.google.com/web/" target="_blank">Earth</a>, including its climate, our Sun, and our solar system and beyond. We conduct research, testing, and development to advance aeronautics, including electric propulsion and supersonic flight. We develop and fund space technologies that will enable future exploration and benefit life on Earth.
title: |
NASA Space Program
subtitle: |
Per aspera ad astra
leftLabel: |
Hello left [label](https://www.nasa.gov)
centerLabel: |
Hello <a href="https://earth.google.com/" target="_blank">center</a> label
rightLabel: |
Hello <a href="https://earth.google.com/" target="_blank">right</a> label
imageBackground: https://static.vecteezy.com/system/resources/previews/026/459/005/non_2x/abstract-background-images-wallpaper-ai-generated-free-photo.jpg
urlImage: https://www.nasa.gov/wp-content/themes/nasa/assets/images/nasa-logo.svg
urlUpperBase: https://www.nasa.gov
---
::
Image w/ Opacity
On hover the image cover fades out to reveal the card.
NASA Space Program
Per aspera ad astra
NASA explores the unknown in air and space, innovates for the benefit of humanity, and inspires the world through discovery. At its 20 centers and facilities across the country – and the only National Laboratory in space – NASA studies Earth, including its climate, our Sun, and our solar system and beyond. We conduct research, testing, and development to advance aeronautics, including electric propulsion and supersonic flight. We develop and fund space technologies that will enable future exploration and benefit life on Earth.
::ShCard
---
coverImage: https://www.nasa.gov/wp-content/uploads/2024/11/sts066-s-011orig.jpg
opacity: true
text: |
NASA explores the unknown in air and space, innovates for the benefit of humanity, and inspires the world through discovery. At its 20 centers and facilities across the country – and the only National Laboratory in space – [NASA](https://www.nasa.gov/) studies <a href="https://earth.google.com/web/" target="_blank">Earth</a>, including its climate, our Sun, and our solar system and beyond. We conduct research, testing, and development to advance aeronautics, including electric propulsion and supersonic flight. We develop and fund space technologies that will enable future exploration and benefit life on Earth.
title: |
NASA Space Program
subtitle: |
Per aspera ad astra
leftLabel: |
Hello left [label](https://www.nasa.gov)
centerLabel: |
Hello <a href="https://earth.google.com/" target="_blank">center</a> label
rightLabel: |
Hello <a href="https://earth.google.com/" target="_blank">right</a> label
imageBackground: https://static.vecteezy.com/system/resources/previews/026/459/005/non_2x/abstract-background-images-wallpaper-ai-generated-free-photo.jpg
urlImage: https://www.nasa.gov/wp-content/themes/nasa/assets/images/nasa-logo.svg
urlUpperBase: https://www.nasa.gov
---
::
Icon w/ Transition
On hover the icon cover slides away to reveal the card.
NASA Space Program
Per aspera ad astra
NASA explores the unknown in air and space, innovates for the benefit of humanity, and inspires the world through discovery. At its 20 centers and facilities across the country – and the only National Laboratory in space – NASA studies Earth, including its climate, our Sun, and our solar system and beyond. We conduct research, testing, and development to advance aeronautics, including electric propulsion and supersonic flight. We develop and fund space technologies that will enable future exploration and benefit life on Earth.
::ShCard
---
coverIcon: streamline-emojis:rocket
text: |
NASA explores the unknown in air and space, innovates for the benefit of humanity, and inspires the world through discovery. At its 20 centers and facilities across the country – and the only National Laboratory in space – [NASA](https://www.nasa.gov/) studies <a href="https://earth.google.com/web/" target="_blank">Earth</a>, including its climate, our Sun, and our solar system and beyond. We conduct research, testing, and development to advance aeronautics, including electric propulsion and supersonic flight. We develop and fund space technologies that will enable future exploration and benefit life on Earth.
title: |
NASA Space Program
subtitle: |
Per aspera ad astra
leftLabel: |
Hello left [label](https://www.nasa.gov)
centerLabel: |
Hello <a href="https://earth.google.com/" target="_blank">center</a> label
rightLabel: |
Hello <a href="https://earth.google.com/" target="_blank">right</a> label
imageBackground: https://static.vecteezy.com/system/resources/previews/026/459/005/non_2x/abstract-background-images-wallpaper-ai-generated-free-photo.jpg
urlImage: https://www.nasa.gov/wp-content/themes/nasa/assets/images/nasa-logo.svg
urlUpperBase: https://www.nasa.gov
---
::
Icon w/ Opacity
On hover the icon cover fades out to reveal the card.
NASA Space Program
Per aspera ad astra
NASA explores the unknown in air and space, innovates for the benefit of humanity, and inspires the world through discovery. At its 20 centers and facilities across the country – and the only National Laboratory in space – NASA studies Earth, including its climate, our Sun, and our solar system and beyond. We conduct research, testing, and development to advance aeronautics, including electric propulsion and supersonic flight. We develop and fund space technologies that will enable future exploration and benefit life on Earth.
::ShCard
---
coverIcon: streamline-emojis:rocket
opacity: true
text: |
NASA explores the unknown in air and space, innovates for the benefit of humanity, and inspires the world through discovery. At its 20 centers and facilities across the country – and the only National Laboratory in space – [NASA](https://www.nasa.gov/) studies <a href="https://earth.google.com/web/" target="_blank">Earth</a>, including its climate, our Sun, and our solar system and beyond. We conduct research, testing, and development to advance aeronautics, including electric propulsion and supersonic flight. We develop and fund space technologies that will enable future exploration and benefit life on Earth.
title: |
NASA Space Program
subtitle: |
Per aspera ad astra
leftLabel: |
Hello left [label](https://www.nasa.gov)
centerLabel: |
Hello <a href="https://earth.google.com/" target="_blank">center</a> label
rightLabel: |
Hello <a href="https://earth.google.com/" target="_blank">right</a> label
imageBackground: https://static.vecteezy.com/system/resources/previews/026/459/005/non_2x/abstract-background-images-wallpaper-ai-generated-free-photo.jpg
urlImage: https://www.nasa.gov/wp-content/themes/nasa/assets/images/nasa-logo.svg
urlUpperBase: https://www.nasa.gov
---
::
Text w/ Transition
On hover the text cover slides away to reveal the card.
Welcome to
NASA
NASA Space Program
Per aspera ad astra
NASA explores the unknown in air and space, innovates for the benefit of humanity, and inspires the world through discovery. At its 20 centers and facilities across the country – and the only National Laboratory in space – NASA studies Earth, including its climate, our Sun, and our solar system and beyond. We conduct research, testing, and development to advance aeronautics, including electric propulsion and supersonic flight. We develop and fund space technologies that will enable future exploration and benefit life on Earth.
::ShCard
---
ui:
coverText: text-6xl bg-gradient-to-b from-[#0B3D91] via-sky-500 to-white
coverText: |
Welcome to </br> NASA
text: |
NASA explores the unknown in air and space, innovates for the benefit of humanity, and inspires the world through discovery. At its 20 centers and facilities across the country – and the only National Laboratory in space – [NASA](https://www.nasa.gov/) studies <a href="https://earth.google.com/web/" target="_blank">Earth</a>, including its climate, our Sun, and our solar system and beyond. We conduct research, testing, and development to advance aeronautics, including electric propulsion and supersonic flight. We develop and fund space technologies that will enable future exploration and benefit life on Earth.
title: |
NASA Space Program
subtitle: |
Per aspera ad astra
leftLabel: |
Hello left [label](https://www.nasa.gov)
centerLabel: |
Hello <a href="https://earth.google.com/" target="_blank">center</a> label
rightLabel: |
Hello <a href="https://earth.google.com/" target="_blank">right</a> label
imageBackground: https://static.vecteezy.com/system/resources/previews/026/459/005/non_2x/abstract-background-images-wallpaper-ai-generated-free-photo.jpg
urlImage: https://www.nasa.gov/wp-content/themes/nasa/assets/images/nasa-logo.svg
urlUpperBase: https://www.nasa.gov
---
::
Text w/ Opacity
On hover the text cover fades out to reveal the card.
Welcome to
NASA
NASA Space Program
Per aspera ad astra
NASA explores the unknown in air and space, innovates for the benefit of humanity, and inspires the world through discovery. At its 20 centers and facilities across the country – and the only National Laboratory in space – NASA studies Earth, including its climate, our Sun, and our solar system and beyond. We conduct research, testing, and development to advance aeronautics, including electric propulsion and supersonic flight. We develop and fund space technologies that will enable future exploration and benefit life on Earth.
::ShCard
---
ui:
coverText: text-6xl bg-gradient-to-b from-[#0B3D91] via-sky-500 to-white
coverText: |
Welcome to </br> NASA
opacity: true
text: |
NASA explores the unknown in air and space, innovates for the benefit of humanity, and inspires the world through discovery. At its 20 centers and facilities across the country – and the only National Laboratory in space – [NASA](https://www.nasa.gov/) studies <a href="https://earth.google.com/web/" target="_blank">Earth</a>, including its climate, our Sun, and our solar system and beyond. We conduct research, testing, and development to advance aeronautics, including electric propulsion and supersonic flight. We develop and fund space technologies that will enable future exploration and benefit life on Earth.
title: |
NASA Space Program
subtitle: |
Per aspera ad astra
leftLabel: |
Hello left [label](https://www.nasa.gov)
centerLabel: |
Hello <a href="https://earth.google.com/" target="_blank">center</a> label
rightLabel: |
Hello <a href="https://earth.google.com/" target="_blank">right</a> label
imageBackground: https://static.vecteezy.com/system/resources/previews/026/459/005/non_2x/abstract-background-images-wallpaper-ai-generated-free-photo.jpg
urlImage: https://www.nasa.gov/wp-content/themes/nasa/assets/images/nasa-logo.svg
urlUpperBase: https://www.nasa.gov
---
::
Advanced settings
Customized ui:
NASA Space Program
Per aspera ad astra
NASA explores the unknown in air and space, innovates for the benefit of humanity, and inspires the world through discovery. At its 20 centers and facilities across the country – and the only National Laboratory in space – NASA studies Earth, including its climate, our Sun, and our solar system and beyond. We conduct research, testing, and development to advance aeronautics, including electric propulsion and supersonic flight. We develop and fund space technologies that will enable future exploration and benefit life on Earth.
::ShCard
---
ui:
wrapper: shadow-xl bg-red-500
title: text-4xl text-pink-800
subtitle: font-mono text-cyan-700
text: text-primary dark:text-black # Add text-color
leftLabel: text-primary # Add text-color
centerLabel: text-primary
rightLabel: text-primary
upperBase: bg-red-300 # in order for this bg color to be displayed, we need to remove background prop
lowerBase: bg-red-100
image: hover:saturate-200 hover:scale-125 duration-300 # Options to style image
text: |
NASA explores the unknown in air and space, innovates for the benefit of humanity, and inspires the world through discovery. At its 20 centers and facilities across the country – and the only National Laboratory in space – [NASA](https://www.nasa.gov/) studies <a href="https://earth.google.com/web/" target="_blank">Earth</a>, including its climate, our Sun, and our solar system and beyond. We conduct research, testing, and development to advance aeronautics, including electric propulsion and supersonic flight. We develop and fund space technologies that will enable future exploration and benefit life on Earth.
title: |
NASA Space Program
subtitle: |
Per aspera ad astra
leftLabel: | #Comment can be added on the first line
Hello left [label](https://www.nasa.gov)
centerLabel: |
Hello <a href="https://earth.google.com/" target="_blank">center</a> label
rightLabel: |
Hello <a href="https://earth.google.com/" target="_blank">right</a> label
imageBackground: https://static.vecteezy.com/system/resources/previews/026/459/005/non_2x/abstract-background-images-wallpaper-ai-generated-free-photo.jpg
urlImage: https://www.nasa.gov/wp-content/themes/nasa/assets/images/nasa-logo.svg
urlUpperBase: https://www.nasa.gov
---
::
Props
| Prop | Type | Default | Description |
|---|---|---|---|
coverImage | string | "" | Link to external or internal image that will be presented as a cover across the whole constructor |
coverIcon | string | "" | Any valid icon from Iconify |
coverText | string | "" | Inscription that will be presented as a cover across the whole constructor (full Markdown support) |
opacity | boolean | false | Setting this to true will trigger fadeaway effect on `coverImage` or `coverText`. Default state triggers the transition effect |
urlUpperBase | string | "" | The URL that wraps the upper section of the component, typically for navigation purposes. |
upperBaseText | string | "" | Allows you to have text in upper section of this constructor, instead of an image |
urlImage | string | "" | The source URL of the image to be displayed. |
target | string | "_self" | Specifies where to open the linked document referenced by `urlUpperBase`. |
altImage | string | "" | Alternative text for the image, used for accessibility and in case the image fails to load. |
title | string | "" | The title text to be displayed. |
subtitle | string | "" | The subtitle text to be displayed, if any. |
text | string | "" | The main text content to be displayed. |
excerpt | object | – | An object used as a fallback for `text`; rendered with `ContentRenderer` when `text` is not provided. |
leftLabel | string | "" | The text to be displayed in the left label. |
centerLabel | string | "" | The text to be displayed in the center label. |
rightLabel | string | "" | The text to be displayed in the right label. |
imageBackground | string | "" | The background image for the component's image section. |
articleURL | string | – | The URL used for the "Read More" link shown on blog/news pages. |
description | string | "" | Note for content writers. It is not rendered on the website. |
ui | Record<string, any> | – | Overrides the default classes of the UI config below. Values are merged with the defaults using tailwind-merge. |
Slots
This component has no slots.
UI config
Default classes of every styled element. Override any key through the ui prop.
| Key | Default classes | Description |
|---|---|---|
wrapper | flex flex-col max-h-fit relative group justify-between border border-golden dark:border-neutral-700 hover:border-neutral-400 dark:hover:border-golden rounded-md mx-auto max-w-lg overflow-hidden bg-inherit shadow-xs hover:shadow-md transition-shadow duration-200 | Defines the overall styling for the container that holds all the elements of the component. |
coverImage | absolute mb-0 bottom-0 w-full h-screen object-cover opacity-100 ease-in-out | Defines the styling for the cover image that spans across the whole constructor |
coverIconWrapper | bg-white dark:bg-neutral-800 absolute inset-0 w-full h-full object-cover z-40 | Container of the cover icon. |
coverIcon | absolute inset-0 w-full h-full object-cover opacity-100 ease-in-out z-40 | Defines the styling for the icon used for covering the constructor |
coverText | absolute bottom-0 w-full h-full flex items-center justify-center text-center ease-in-out dark:bg-neutral-800 bg-white opacity-100 | Defines the styling for the cover text (including the color of the background) that spans across the whole constructor |
upperBase | flex items-center justify-center rounded-t-md | Defines the styling for the upper section of the component, typically where the image is displayed. |
