zoralabNOTE_WARNING Technical Specification - ZORALab's Hestia

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.

Objectives and Purposes

Main Purpose

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

This is an important note for you to pay attention to. Just in case, you can minimize this note if required. It is set to open by default. Try clicking on the title.



This is an important note for you to pay attention to. Just in case, you can minimize this note if required. It is set to open by default. Try clicking on the title.

Legacy Recording

This package was known as note-warning_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.

Product Designs

Designers

This component was designed by the following creators:

(Holloway) Chew, Kean Ho

Dependencies

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

zoralabCORE zoralabNOTE

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:

<div class="note warning">
	... same as zoralabNOTE ...
</div>

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.

Title Border Color

Affects the title's border color of the rendered component.

VARIABLE     : --note-title-warning-border-color
CSS PROPERTY : border-color
DEFAULT      : var(--body-color-indicator-yellow) (>= v1.2.0)

Title Color

Affects the title's color of the rendered component.

VARIABLE     : --note-title-warning-color
CSS PROPERTY : color
DEFAULT      : #FFF (>= v1.2.0)

Title Indicator Color

Affects the title indicator's color of the rendered component.

VARIABLE     : --note-title-warning-indicator-color
CSS PROPERTY : color
DEFAULT      : #FFF (>= v1.2.0)

Title Background

Affects the title's background of the rendered component.

VARIABLE     : --note-title-warning-background
CSS PROPERTY : background
DEFAULT      : var(--body-color-indicator-yellow) (>= v1.2.0)

Content Color

Affects the content's color of the rendered component.

VARIABLE     : --note-content-warning-color
CSS PROPERTY : color
DEFAULT      : var(--body-color-indicator-yellow) (>= v1.2.0)

Content Background

Affects the content's background of the rendered component.

VARIABLE     : --note-content-warning-background
CSS PROPERTY : background
DEFAULT      : var(--body-background-indicator-yellow) (>= v1.2.0)

JavaScript

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

Constants

This package does not offer any constant value.

Variables

This package does not offer any variable.

Offered Functions

ToCSS

Render the CSS output for this UI component.

Hugo

Usage example:

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

Data Types

This package does not offer any data type.

Epilogue

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:


GitHub Discussion Portal