ListCards

Usage

Presentation

This is the display format for the ShListCards constructor, designed to showcase its capabilities.

Example Basic

Props

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

Properties and Attributes Description

The constructor creates a display format for a list of cards, including a header section and a grid layout for the cards. Below is a detailed description of the properties and attributes used in the ShListCards constructor.

Property	Attribute	Default	Description
`ui`	n/a	n/a	The `ui` property in the `ShListCards` constructor is a comprehensive configuration object that allows for the customization of various styling aspects of the list cards component. Each attribute within the `ui` property targets a specific part of the list cards display, providing detailed control over its appearance and layout. Below is a detailed description of each attribute within the `ui` property:
	`wrapper`	`config.wrapper`	Defines the overall styling for the container that holds the entire list of cards. This typically includes padding, margins, and general layout settings.
	`header`	`config.header`	Styles applied to the header section, including the title, subtitle, and description. This can include font size, color, and alignment settings.
	`title`	`config.title`	Define the style of title fonts, displayed prominently at the top of the header section.
	`subtitle`	`config.subtitle`	Define the style of subtitle fonts, which provides additional context or description for the list of cards.
	`text`	`config.text`	Define the style of text fonts
	`base`	`config.base`	Styles applied to the grid layout of the cards. This typically includes grid columns and gap settings.
	`gap`	`config.gap`	The gap size between the cards in the grid layout.
`title`	n/a	n/a	The title of the list of cards, displayed prominently at the top of the header section.
`subtitle`	n/a	n/a	The subtitle, which provides additional context or description for the list of cards.
`text`	n/a	n/a	Additional descriptive text or instructions displayed below the subtitle.
`cols`	n/a	`gridClass`	The number of columns in the grid layout for the cards. The `gridClass` inteligentlly calculates number of cols that can be visible depending of the width of the screen. For any screen larger than `1300px` this component will allow user to enter his desired number of columns. Any width lower than that, it will automatically set columns to either 3, 2 or 1. User can always set a smaller number if screen is beyond `1300px`.
`cardID`	n/a	n/a	This prop allows this constructor to list cards in order that is inputed
`description`	n/a	n/a	This is used to help content writers. Doesn`t render on site.

Example Usage

Advanced Settings

An example with customized ui attributes for enhanced display:

Config

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

export default {
  wrapper: "pl-4 pr-4 pb-10 shadow-md dark:shadow-none bg-neutral-100 dark:bg-neutral-900/[0.6] rounded-2xl",
  inner: "",
  tags: {
    title: "title flex flex-wrap justify-center",
    clear: "mt-3 text-lg px-3 border border-oma-red-500 bg-oma-red-600 hover:bg-oma-red-500 hover:border-oma-red-600 text-white dark:border-oma-red-500 dark:bg-oma-red-600 dark:hover:bg-oma-red-500 dark:hover:border-oma-red-600 dark:text-white rounded-3xl",
    list: "inline-block overflow-hidden hover:scale-105 duration-200 ease-in-out rounded-3xl text-lg cursor-pointer px-3 mx-2 mt-4 hover:shadow-xl hover:shadow-primary/[0.3] border border-primary dark:text-white dark:border-primary dark:shadow-primary/[0.3]",
  },
  header: "",
  title: "title pt-6 text-3xl font-extrabold text-center dark:text-golden",
  subtitle: "subtitle pb-6 text-xl font-semibold text-gray-600 dark:text-golden/[0.9] -mt-8 text-center",
  text: "text pb-16 text-center font-light dark:text-golden/[0.8]",
  base: "justify-between flex flex-wrap",
  gap: "gap-0",
  // Default Tailwind CSS values
  default: {
  }
}

Class Descriptions

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

wrapper

Value: "pl-4 pr-4 pb-10 shadow-md dark:shadow-none bg-neutral-100 dark:bg-neutral-900/[0.6] rounded-2xl"
Description: Provides padding on the left, right, and bottom, a shadow for light mode, and a neutral background color with transparency in dark mode. Also includes large rounded corners.

inner

Value: ""
Description: No default styles are applied; this class is intentionally left blank for custom inner container styling.

tags.title

Value: "title flex flex-wrap justify-center"
Description: Defines a flexible layout for wrapping and centering content, used for tag titles.

tags.clear

Value: "mt-3 text-lg px-3 border border-oma-red-500 bg-oma-red-600 hover:bg-oma-red-500 hover:border-oma-red-600 text-white dark:border-oma-red-500 dark:bg-oma-red-600 dark:hover:bg-oma-red-500 dark:hover:border-oma-red-600 dark:text-white rounded-3xl"
Description: A button-like style with red-themed borders and background, hover effects, and rounded corners, adapting to light and dark modes.

tags.list

Value: "inline-block overflow-hidden hover:scale-105 duration-200 ease-in-out rounded-3xl text-lg cursor-pointer px-3 mx-2 mt-4 hover:shadow-xl hover:shadow-primary/[0.3] border border-primary dark:text-white dark:border-primary dark:shadow-primary/[0.3]"
Description: Provides hover animations with scaling, shadow effects, and rounded corners. Includes padding, margin, and a border for tag items.

header

Value: ""
Description: No default styles are applied; this class is intentionally left blank for custom header styling.

title

Value: "title pt-6 text-3xl font-extrabold text-center dark:text-golden"
Description: Defines padding at the top, large bold text, and centered alignment, with a golden text color in dark mode.

subtitle

Value: "subtitle pb-6 text-xl font-semibold text-gray-600 dark:text-golden/[0.9] -mt-8 text-center"
Description: Applies bottom padding, medium-bold text style, gray coloring (light mode) or golden coloring (dark mode), and centered alignment. Includes a negative top margin for positioning adjustments.

text

Value: "text pb-16 text-center font-light dark:text-golden/[0.8]"
Description: Centers light-text font style with golden coloring in dark mode and adds bottom padding for spacing.

base