zoralabCARD Technical Specification - ZORALab's Hestia

Main Purpose

This package's primary purpose is to provide user interface (UI) styling specifically for card-oriented values. In web UI, it is shown as follows:

Details

Picture above is generated by AI.

Action 1 Action 2 Action 3

Details

Picture above is generated by AI.

Action 1 Action 2 Action 3

Legacy Recording

This package was known as card_hestiaUI before ZORALab's Hestia v1.2.0. The transformation was due to someone attempting to steal the copyrights and makes way for programming package's documentation restructuring.

Designers

This component was designed by the following creators:

Dependencies

This component has the following dependencies (arranged in the order from left-top to right-bottom):

HTML

For HTML, ZORALab's Hestia employs the W3C native syntax for simplicity and maximum compatibility sakes. ZORALab's Hestia recommends the following HTML code structure for this component.

Minimum HTML

The minimum required HTML codes are shown below:

<figure class="card">
	<picture class="thumbnail">
		...
	</picture>
	<div class="content">
		...
	</div>
	<div class="actions">
		...
	</div>
</figure>

CSS

ZORALab's Hestia heavily rely on CSS to style this component and offering its css variables for customizations. Below are the list of available CSS variables at your disposal.

Layout

Affects the grid layout of the rendered component.

VARIABLE     : --card-layout
CSS PROPERTY : grid
DEFAULT      :
(>= v1.2.0)
"thumbnail" minmax(0, var(--card-thumbnail-height))
"content" minmax(0, var(--card-content-height))
"actions" minmax(0, var(--card-actions-height))
/ 100%

Overflow

Affects the overflow of the rendered component.

VARIABLE     : --card-overflow
CSS PROPERTY : overflow
DEFAULT      : hidden (>= v1.2.0)

Margin

Affects the margin of the rendered component.

VARIABLE     : --card-margin
CSS PROPERTY : margin
DEFAULT      : 2rem auto (>= v1.2.0)

Padding

Affects the padding of the rendered component.

VARIABLE     : --card-padding
CSS PROPERTY : padding
DEFAULT      : 0 (>= v1.2.0)

Width

Affects the width of the rendered component.

VARIABLE     : --card-width
CSS PROPERTY : width
DEFAULT      : clamp(22rem, 28rem, 32rem) (>= v1.2.0)

Border

Affects the border of the rendered component.

VARIABLE     : --card-border
CSS PROPERTY : border
DEFAULT      : 1px solid var(--color-typography-200) (>= v1.2.0)

Border (Focused)

Affects the border of the rendered component when focused.

VARIABLE     : --card-border-focus
CSS PROPERTY : border
DEFAULT      : none (>= v1.2.0)

Border (Inverted)

Affects the border of the rendered component while in inverted mode.

VARIABLE     : --card-border-inverted
CSS PROPERTY : border
DEFAULT      : none (>= v1.2.0)

Border (Inverted+Focused)

Affects the border of the rendered component when focused in the inverted mode.

VARIABLE     : --card-border-inverted-focus
CSS PROPERTY : border
DEFAULT      : none (>= v1.2.0)

Border Radius

Affects the border radius of the rendered component.

VARIABLE     : --card-border-radius
CSS PROPERTY : border-radius
DEFAULT      : 1rem (>= v1.2.0)

Color

Affects the color of the rendered component.

VARIABLE     : --card-color
CSS PROPERTY : color
DEFAULT      : var(--body-color) (>= v1.2.0)

Color (Print Mode)

Affects the color of the rendered component during print mode.

VARIABLE     : --card-color-print
CSS PROPERTY : color
DEFAULT      : var(--body-color-print) (>= v1.2.0)

Background

Affects the background of the rendered component.

VARIABLE     : --card-background
CSS PROPERTY : background
DEFAULT      : var(--body-background) (>= v1.2.0)

Background (Print Mode)

Affects the background of the rendered component during print mode.

VARIABLE     : --card-background-print
CSS PROPERTY : background
DEFAULT      : var(--body-background-print) (>= v1.2.0)

Transition

Affects the animation timing of the rendered component.

VARIABLE     : --card-timing
CSS PROPERTY : transition
DEFAULT      : var(--timing-normal) (>= v1.2.0)

Filter (Focused)

Affects the animation behavior of the rendered component when focused.

VARIABLE     : --card-filter-focus
CSS PROPERTY : filter
DEFAULT      : drop-shadow(0 1rem 2rem var(--color-typography-800)) (>= v1.2.0)

Filter (Inverted + Focused)

Affects the animation timing of the rendered component when focused while in inverted mode.

VARIABLE     : --card-filter-inverted-focus
CSS PROPERTY : filter
DEFAULT      : drop-shadow(0 1rem 2rem var(--color-typography-50)) (>= v1.2.0)

Thumbnail Overflow

Affects the thumbnail's overflow of the rendered component.

VARIABLE     : --card-thumbnail-overflow
CSS PROPERTY : overflow
DEFAULT      : hidden (>= v1.2.0)

Thumbnail Object-Fit

Affects the thumbnail's object fitting condition of the rendered component.

VARIABLE     : --card-thumbnail-object-fit
CSS PROPERTY : object-fit
DEFAULT      : contain (>= v1.2.0)

Thumbnail Height

Affects the thumbnail's height of the rendered component.

VARIABLE     : --card-thumbnail-height
CSS PROPERTY : height
DEFAULT      : max-content (>= v1.2.0)

Thumbnail Margin

Affects the thumbnail's margin of the rendered component.

VARIABLE     : --card-thumbnail-margin
CSS PROPERTY : margin
DEFAULT      : 0 (>= v1.2.0)

Thumbnail Padding

Affects the thumbnail's padding of the rendered component.

VARIABLE     : --card-thumbnail-padding
CSS PROPERTY : padding
DEFAULT      : 0 (>= v1.2.0)

Content Overflow

Affects the content's overflow of the rendered component.

VARIABLE     : --card-content-overflow
CSS PROPERTY : overflow
DEFAULT      : auto (>= v1.2.0)

Content Height

Affects the content's height of the rendered component.

VARIABLE     : --card-content-height
CSS PROPERTY : height
DEFAULT      : auto (>= v1.2.0)

Content Margin

Affects the content's margin of the rendered component.

VARIABLE     : --card-content-margin
CSS PROPERTY : margin
DEFAULT      : 0 (>= v1.2.0)

Content Padding

Affects the content's padding of the rendered component.

VARIABLE     : --card-content-padding
CSS PROPERTY : padding
DEFAULT      : 0 1rem (>= v1.2.0)

Actions Overflow

Affects the actions' overflow of the rendered component.

VARIABLE     : --card-actions-overflow
CSS PROPERTY : overflow
DEFAULT      : hidden (>= v1.2.0)

Actions Height

Affects the actions' height of the rendered component.

VARIABLE     : --card-actions-height
CSS PROPERTY : height
DEFAULT      : max-content (>= v1.2.0)

Actions Margin

Affects the actions margin of the rendered component.

VARIABLE     : --card-actions-margin
CSS PROPERTY : margin
DEFAULT      : 0 (>= v1.2.0)

Actions Padding

Affects the actions' padding of the rendered component.

VARIABLE     : --card-actions-padding
CSS PROPERTY : padding
DEFAULT      : 3.5rem 0 (>= v1.2.0)

Title Margin

Affects the title's margin of the rendered component.

VARIABLE     : --card-title-margin
CSS PROPERTY : margin
DEFAULT      : .3rem auto (>= v1.2.0)

JavaScript

Fortunately, this component does not use any JavaScript. Relax.

ToCSS

Render the CSS output for this UI component.

Hugo

Usage example:

{{- $ret := partial "hestiaGUI/zoralabCARD/ToCSS" . -}}
<pre>{{- printf "%#v\n" $ret -}}</pre>