Action Card
Usage
The ShActionCard constructor displays a call-to-action card with an image or icon, a title, subtitle and text, and a button that sends readers to another page, such as a newsletter or membership sign-up page.
Basic
::ShActionCard
---
title: |
Stay updated with our articles updates
subtitle: |
Per aspera ad astra
labelButton: Sign up
colorButton: blue
urlButton: https://www.nasa.gov/
text: |
*New text goes [here](https://www.nasa.gov/).*
---
::
Advanced settings
An example with customized ui attributes for enhanced display:
::ShActionCard
---
ui:
wrapper: shadow-xl
title: text-4xl
subtitle: font-mono
text: text-primary
imageBackground: https://static.vecteezy.com/system/resources/previews/026/459/005/non_2x/abstract-background-images-wallpaper-ai-generated-free-photo.jpg
title: |
Stay updated with our articles updates
subtitle: |
Per aspera ad astra
labelButton: Sign up
colorButton: blue
urlButton: https://www.nasa.gov/
urlImage: https://gpm.nasa.gov/sites/default/files/document_files/NASA-Logo-Large.png
altImage: NASA Logo
icon: noto:rocket
altIcon: Rocket
text: |
*New text goes [here](https://www.nasa.gov/).*
---
::
Props
| Prop | Type | Default | Description |
|---|---|---|---|
description | string | "" | Note for content writers. It is not rendered on the website. |
titlerequired | 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. |
urlImage | string | "" | The source URL of the image to be displayed. |
altImage | string | "" | Alternative text for the image, used for accessibility and in case the image fails to load. |
urlButton | string | "" | The URL link the button will navigate to when clicked. |
labelButton | string | "" | The label text displayed on the button. |
colorButton | string | "" | The color of the button. |
styleButton | 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'link' | "solid" | The style of the button (can be: `outline`, `soft`, `solid`, `link`, `ghost`). |
icon | string | "" | The name of the icon to be displayed. |
altIcon | string | "" | Alternative text for the icon, used for accessibility. |
imageBackground | string | "" | Sets a background image on the card via inline CSS background-image. |
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 | mt-6 dark:bg-inherit border border-neutral-300 dark:border-neutral-700 mx-auto p-4 rounded-md shadow-xs bg-no-repeat bg-cover size-full max-w-4xl max-h-3xl | Defines the overall styling for the container that holds all the elements of the component. |
image | my-[2em] col-start-1 col-span-1 size-4/6 self-center place-self-center row-span-2 w-fit h-fit | Styles applied to the image element, including properties like size and border radius. |
title | title text-xl md:text-2xl text-neutral-900 dark:text-neutral-100 text-center font-semibold | Styles applied to the title text, such as font size and color. |
subtitle | subtitle text-lg text-center font-semibold text-neutral-500 dark:text-neutral-400 -mt-8 | Styles applied to the subtitle text, such as font size and color. |
text | text text-md text-center font-normal not-prose | Styles applied to the text content, such as font size and color. |
button | col-start-3 col-span-1 mx-auto mb-4 not-prose | Defines the styling for the button element, including hover effects and transition animations. |
