Details
Picture above is generated by AI.
The technical specifications to refer when using the package. Easy-going, offline supported (via web PWA installation), and detailed oriented. Courtesy from ZORALab's Hestia.
This package's primary purpose is to provide user interface (UI) styling
specifically for tile-oriented values. In web UI, it is shown as follows: Picture above is generated by AI.Details
This package was first released in ZORALab's Hestia v1.2.0
.
This component was designed by the following creators:
(Holloway) Chew, Kean HoThis component has the following dependencies (arranged in the order from left-top to right-bottom):
zoralabCOREFor 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.
The minimum required HTML codes are shown below:
<figure class="tile"> <picture class="thumbnail"> ... </picture> <div class="content"> ... </div> <div class="actions"> ... </div> </figure>
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.
Affects the grid layout of the rendered component.
VARIABLE : --tile-layout CSS PROPERTY : grid DEFAULT : (>= v1.2.0) "thumbnail" minmax(0, var(--tile-thumbnail-height)) "content" minmax(0, var(--tile-content-height)) "actions" minmax(0, var(--tile-actions-height)) / 100%
Affects the overflow of the rendered component.
VARIABLE : --tile-overflow CSS PROPERTY : overflow DEFAULT : hidden (>= v1.2.0)
Affects the margin of the rendered component.
VARIABLE : --tile-margin CSS PROPERTY : margin DEFAULT : 2rem auto (>= v1.2.0)
Affects the padding of the rendered component.
VARIABLE : --tile-padding CSS PROPERTY : padding DEFAULT : 0 (>= v1.2.0)
Affects the width of the rendered component.
VARIABLE : --tile-width CSS PROPERTY : width DEFAULT : clamp(22rem, 28rem, 32rem) (>= v1.2.0)
Affects the border of the rendered component.
VARIABLE : --tile-border CSS PROPERTY : border DEFAULT : none (>= v1.2.0)
Affects the border radius of the rendered component.
VARIABLE : --tile-border-radius CSS PROPERTY : border-radius DEFAULT : 1rem (>= v1.2.0)
Affects the color of the rendered component.
VARIABLE : --tile-color CSS PROPERTY : color DEFAULT : var(--body-color) (>= v1.2.0)
Affects the color of the rendered component while in inverted mode.
VARIABLE : --tile-color-inverted CSS PROPERTY : color DEFAULT : var(--body-color-inverted) (>= v1.2.0)
Affects the color of the rendered component during print mode.
VARIABLE : --tile-color-print CSS PROPERTY : color DEFAULT : var(--body-color-print) (>= v1.2.0)
Affects the background of the rendered component.
VARIABLE : --tile-background CSS PROPERTY : background DEFAULT : var(--body-background) (>= v1.2.0)
Affects the background of the rendered component while in inverted mode.
VARIABLE : --tile-background-inverted CSS PROPERTY : background DEFAULT : var(--body-background-inverted) (>= v1.2.0)
Affects the background of the rendered component during print mode.
VARIABLE : --tile-background-print CSS PROPERTY : background DEFAULT : var(--body-background-print) (>= v1.2.0)
Affects the animation timing of the rendered component.
VARIABLE : --tile-timing CSS PROPERTY : transition DEFAULT : var(--timing-normal) (>= v1.2.0)
Affects the thumbnail's overflow of the rendered component.
VARIABLE : --tile-thumbnail-overflow CSS PROPERTY : overflow DEFAULT : hidden (>= v1.2.0)
Affects the thumbnail's object fitting condition of the rendered component.
VARIABLE : --tile-thumbnail-object-fit CSS PROPERTY : object-fit DEFAULT : contain (>= v1.2.0)
Affects the thumbnail's height of the rendered component.
VARIABLE : --tile-thumbnail-height CSS PROPERTY : height DEFAULT : max-content (>= v1.2.0)
Affects the thumbnail's margin of the rendered component.
VARIABLE : --tile-thumbnail-margin CSS PROPERTY : margin DEFAULT : 0 (>= v1.2.0)
Affects the thumbnail's padding of the rendered component.
VARIABLE : --tile-thumbnail-padding CSS PROPERTY : padding DEFAULT : 0 (>= v1.2.0)
Affects the content's overflow of the rendered component.
VARIABLE : --tile-content-overflow CSS PROPERTY : overflow DEFAULT : auto (>= v1.2.0)
Affects the content's height of the rendered component.
VARIABLE : --tile-content-height CSS PROPERTY : height DEFAULT : auto (>= v1.2.0)
Affects the content's margin of the rendered component.
VARIABLE : --tile-content-margin CSS PROPERTY : margin DEFAULT : 0 (>= v1.2.0)
Affects the content's padding of the rendered component.
VARIABLE : --tile-content-padding CSS PROPERTY : padding DEFAULT : 0 1rem (>= v1.2.0)
Affects the actions' overflow of the rendered component.
VARIABLE : --tile-actions-overflow CSS PROPERTY : overflow DEFAULT : hidden (>= v1.2.0)
Affects the actions' height of the rendered component.
VARIABLE : --tile-actions-height CSS PROPERTY : height DEFAULT : max-content (>= v1.2.0)
Affects the actions margin of the rendered component.
VARIABLE : --tile-actions-margin CSS PROPERTY : margin DEFAULT : 0 (>= v1.2.0)
Affects the actions' padding of the rendered component.
VARIABLE : --tile-actions-padding CSS PROPERTY : padding DEFAULT : 3.5rem 0 (>= v1.2.0)
Affects the title's margin of the rendered component.
VARIABLE : --tile-title-margin CSS PROPERTY : margin DEFAULT : .3rem auto (>= v1.2.0)
Fortunately, this component does not use any JavaScript. Relax.
This package does not offer any constant value.
This package does not offer any variable.
Render the CSS output for this UI component.
Usage example:
{{- $ret := partial "hestiaGUI/zoralabTILE/ToCSS" . -}} <pre>{{- printf "%#v\n" $ret -}}</pre>
This package does not offer any data type.
Looks like we have arrived to the last station. Intrigued to get in touch? Please feel free to start contacting us via the following public channels: