Card

Usage

Presentation

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

Example 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.

Hello left label

Hello center label

Hello right label

This is how it is constructed

::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
---
::

Props

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

Properties and Attributes Description

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. Below is a detailed description of the properties and attributes used in the ShCard constructor.

Example Usage

Advanced Settings

An example with customized ui attributes for enhanced display:

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.

Hello left label

Hello center label

Hello right label

This is an example with customized ui attributes for enhanced display:

::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
---
::

Config

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

export default {
  wrapper: "flex flex-col justify-between border-2 dark:border-neutral-700 hover:border-2 hover:border-primary dark:hover:border-2 dark:hover:border-primary rounded-xl mx-auto max-w-lg overflow-hidden bg-inherit shadow-2xl",
  upperBase: "flex items-center justify-center rounded-t-xl",
  image: "h-full w-screen rounded-b-xl overflow-hidden",
  lowerBase: "p-6 rounded-b-xl",
  title: "text-3xl font-extrabold text-primary",
  subtitle: "text-xl font-semibold text-primary-700 -mt-8",
  text: "text-base text-gray-800 dark:text-gray-200 not-prose",
  leftLabel: "mt-3 text-lg text-gray-600 dark:text-gray-400 not-prose",
  centerLabel: "mt-3 text-lg text-gray-600 dark:text-gray-400 not-prose",
  rightLabel: "mt-3 text-lg text-gray-600 dark:text-gray-400 not-prose",
  // Default Tailwind CSS values
  default: {
  }
}

Class Descriptions

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

wrapper

• Value: "flex flex-col justify-between border-2 rounded-xl mx-auto max-w-lg overflow-hidden"
• Description: Defines the overall container styles. The value "flex flex-col justify-between border-2 rounded-xl mx-auto max-w-lg overflow-hidden" sets a flexible column layout (flex flex-col), evenly spaces items (justify-between), applies a 2-unit border (border-2), rounds corners (rounded-xl), centers horizontally (mx-auto), constrains maximum width (max-w-lg), and hides overflow (overflow-hidden).

upperBase

• Value: "flex items-center justify-center rounded-t-xl overflow-hidden"
• Description: Specifies styles for the upper section. The value "flex items-center justify-center rounded-t-xl overflow-hidden" uses a flexible box layout (flex), centers items (items-center justify-center), rounds the top corners (rounded-t-xl), and hides overflow (overflow-hidden).

image

• Value: "h-full w-auto p-8 object-cover"
• Description: Defines styles for the image. The value "h-full w-auto p-8 object-cover" makes the image fill its container height (h-full), adjusts width automatically (w-auto), adds padding of 8 units (p-8), and ensures the image covers the container while maintaining aspect ratio (object-cover).

lowerBase

• Value: "p-6 rounded-b-xl"
• Description: Specifies styles for the lower section. The value "p-6 rounded-b-xl" adds padding of 6 units (p-6) and rounds the bottom corners (rounded-b-xl).

title

• Value: "text-3xl font-extrabold"
• Description: Defines styles for the title text. The value "text-3xl font-extrabold" sets a large font size (text-3xl) and applies an extra-bold font weight (font-extrabold).

subtitle

• Value: "text-xl font-semibold text-gray-600 dark:text-gray-400 -mt-8"
• Description: Specifies styles for the subtitle text. The value "text-xl font-semibold text-gray-600 dark:text-gray-400 -mt-8" includes a large font size (text-xl), semi-bold font weight (font-semibold), gray text color (text-gray-600), dark mode gray text color (dark:text-gray-400), and a top margin of -8 units (-mt-8).

text

• Value: "text-base text-gray-800 dark:text-gray-200"
• Description: Defines styles for general text. The value "text-base text-gray-800 dark:text-gray-200" includes a base font size (text-base), gray text color (text-gray-800), and dark mode gray text color (dark:text-gray-200).

leftLabel

• Value: "text-lg text-gray-600 dark:text-gray-400"
• Description: Defines styles for the left label text. The value "text-lg text-gray-600 dark:text-gray-400" includes a large font size (text-lg), gray text color (text-gray-600), and dark mode gray text color (dark:text-gray-400).

centerLabel

• Value: "text-lg text-gray-600 dark:text-gray-400"
• Description: Specifies styles for the center label text. The value "text-lg text-gray-600 dark:text-gray-400" includes a large font size (text-lg), gray text color (text-gray-600), and dark mode gray text color (dark:text-gray-400).

rightLabel

• Value: "text-lg text-gray-600 dark:text-gray-400"
• Description: Defines styles for the right label text. The value "text-lg text-gray-600 dark:text-gray-400" includes a large font size (text-lg), gray text color (text-gray-600), and dark mode gray text color (dark:text-gray-400).

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 ShCard component is visually appealing and flexible, allowing for a wide range of customization to meet specific design requirements.