Action Card

Usage

Presentation

This is the display format for the ShActionCard constructor, designed to showcase what are its capabilities.

Example Basic

This is how it is constructed

::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/).*
---
::

Props

These are the properties and attributes associated to the ShActionCard constructor:

Properties and Attributes Description

The ShActionCard constructor allows for clients and customers to subscribe to a newsletter or any other subscription-type format. Below is a detailed description of the properties and attributes used in the ShActionCard constructor.

Example Usage

Advanced Settings

An example with customized ui attributes for enhanced display:

Stay updated with our articles updates

Per aspera ad astra

New text goes here.

Sign up

This is 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/).*
---
::

Config

These style properties can be modified via ui and are stored in the ShActionCard.ts file:

export default {
    wrapper: "mt-6 dark:bg-inherit border-2 border-neutral-300 dark:border-neutral-500 mx-auto p-4 rounded-xl bg-no-repeat bg-cover size-full max-w-4xl max-h-3xl",
    image: "col-start-1 col-span-1 size-4/6 self-center place-self-center row-span-2 w-fit h-fit",
    title: "text-2xl text-black dark:text-white text-center font-bold",
    subtitle: "text-lg text-center font-semibold text-gray-400 -mt-8",
    text: "text-md text-center font-light not-prose",
    button: "hover:drop-shadow-xl hover:saturate-200 col-start-3 col-span-1 mx-auto mb-4 not-prose",
    colorButton: "black",
    icon: "self-center place-self-center row-start-1 row-span-2 col-start-5 col-span-1",
    // Default Tailwind CSS values
    default: {
    }
  }

Class Descriptions

These represent the class values utilized in the ShActionCard constructor. These values are customizable and can be strengthened or overridden through the ui properties' attributes.

wrapper

• Value: "mt-6 border-2 dark:border-gray-700 mx-auto p-4 rounded-xl bg-no-repeat bg-cover size-full max-w-4xl max-h-3xl"
• Description: This defines the overall styling for the container holding the elements. The value "mt-6 border-2 dark:border-gray-700 mx-auto p-4 rounded-xl bg-no-repeat bg-cover size-full max-w-4xl max-h-3xl" indicates a top margin of 6 units (mt-6), a 2-unit border (border-2), a gray border in dark mode (dark:border-gray-700), centered horizontally (mx-auto), padding of 4 units (p-4), rounded corners (rounded-xl), background properties (bg-no-repeat bg-cover), and size constraints with maximum width and height set (max-w-4xl max-h-3xl).

image

• Value: "col-start-1 col-span-1 size-4/6 self-center place-self-center row-span-2 w-fit h-fit"
• Description: This specifies styles for an image. The value "col-start-1 col-span-1 size-4/6 self-center place-self-center row-span-2 w-fit h-fit" includes starting at column 1 (col-start-1), spanning 1 column (col-span-1), a size of 4/6 of the container (size-4/6), centered alignment within its cell (self-center), placement at the center of its grid cell (place-self-center), spanning 2 rows (row-span-2), and fitting width and height (w-fit h-fit).

title

• Value: "text-2xl text-black text-center font-bold"
• Description: This defines the styling for the title text. The value "text-2xl text-black text-center font-bold" includes a large font size (text-2xl), black text color (text-black), centered text alignment (text-center), and bold font weight (font-bold).

subtitle

• Value: "text-lg text-center font-semibold text-gray-600 -mt-8"
• Description: This specifies the styling for the subtitle text. The value "text-lg text-center font-semibold text-gray-600 -mt-8" includes a medium-large font size (text-lg), centered text alignment (text-center), semi-bold font weight (font-semibold), gray text color (text-gray-600), and a top margin of -8 units (-mt-8).

text

• Value: "text-md text-center font-light text-gray-600"
• Description: This defines the styling for general text. The value "text-md text-center font-light text-gray-600" includes a medium font size (text-md), centered text alignment (text-center), light font weight (font-light), and gray text color (text-gray-600).

button

• Value: "hover:drop-shadow-xl hover:saturate-200 col-start-3 col-span-1 mx-auto mb-4 not-prose"
• Description: This specifies the styling for a button. The value "hover:drop-shadow-xl hover:saturate-200 col-start-3 col-span-1 mx-auto mb-4 not-prose" includes an extra-large drop shadow on hover (hover:drop-shadow-xl), increased saturation on hover (hover:saturate-200), starting at column 3 (col-start-3), spanning 1 column (col-span-1), centered horizontally (mx-auto), a bottom margin of 4 units (mb-4), and excludes prose formatting (not-prose).

colorButton

• Value: "black"
• Description: This defines the color of the button. The value "black" sets the button's color to black.

icon

• Value: "self-center place-self-center row-start-1 row-span-2 col-start-5 col-span-1"
• Description: This specifies the styling for an icon. The value "self-center place-self-center row-start-1 row-span-2 col-start-5 col-span-1" includes centered alignment within its cell (self-center), placement at the center of its grid cell (place-self-center), starting at row 1 (row-start-1), spanning 2 rows (row-span-2), starting at column 5 (col-start-5), and spanning 1 column (col-span-1).

default

• Value: {}
• Description: This object is intended to hold any default Tailwind CSS values that might be used as fallback or initial styles.

These style properties ensure that the ShActionCard component is visually appealing and flexible, allowing for a wide range of customization to meet specific design requirements.