UI components

UI componenet installation

To incorporate the UI compoenents such as card, button, form, image, list or tooltip, below formula:
"<" div class="(enter the UI componenet class)" ">"

Card

Card features:

The card is preset with standard margin and padding, and there are 2 types of cards: the one with a rectangular corner and the one with rounded corner. For card color there are 5 presets to choose from. And the card size will vary when passing breakpoint.

Card Class:

class	description
.card-container	The card container is displayed in flex row wrap with 75% of width and all content centered
.card	The card is set to have standard card margin and padding
.card-body-1	The card with corner styles that is rectangle
.card-body-2	The-card with corner style that is rounded
.card-[color:beet\|kale\|deepwater\|mute\|dark]	The card with preset background colors and text colors

Button

Card features:

The default value of the button is set as general-button, and it changes size after passing each breakpoint. The button is also stylized to have different width, corner style, to be filled or just outlined.

Button Class:

class	description
.general-button	The standard button setup with beet colored background, Giulia as typeface in 16px
.button-[width:s\|m\|l\|xl]	The button padding width has 4 sets vary from s to xl
.button-[corner style:sq\|semisquare\|semipill\|pill]	The progression of button corner from square to pill shape by adjusting the border radius
.button-[filled:beet\|kale\|tomatoe\|deepwater\|dark\|mute\|gray\|peach]	There are 8 color sets of filled button to choose from
.button-[outlined:beet\|kale\|tomatoe\|deepwater\|dark\|gray]	There are 6 color sets of outlined button to choose from

Form:

Form features:

TheThere are 4 stylized form presets from bottom lined focused input form, animated search form that will elongate the full screen width when hovering to textarea, select menu with options. And the form width can be set to half or full screen width which comes handy.

class	description
.bottom-line-focused-input-form	The form is set to have a bottom line in beet color, with focus of light gray color when focus
.animated search form	The search form is equipped with search button and it will elongate to occupy the full width of the screen when hover overThe button padding width has 4 sets vary from s to xl
.textarea	The blank space with standard height and beet colored border and light background color
.select	The menu with different options to be selected
.form-[width:full\|half]	Determinate form width to the full screen width or half screen width

Image:

Image features:

The multiple images can be displayed as image galleries that stack each image on top of each other as a block when it’s displayed in a small size screen and display 2 images horizontally when it’s in tablet version. The padding and stylish border for the image are preset and ready to use.

List:

Image features:

The list is divided in 2 categories, the unordered list that has the option of circle or square as list style type or you can incorporate list style images such as icons. And the ordered list has upper-roman and lower alpha as list style type.

Tooltip:

Tooltip features:

The Tooltip is set up in 2 styles, square or arrow and it's positioned left, right, top or bottom. Also, we add a fade in animation for tooltip to appear gradually.

class	description
.tooltip	The beet color dotted section of the text that indicates there will be tooltip when hovering over
.tooltip .tooltiptext	The default setting of the tooltip itself with beet background color, light text color
.tooltiptext-[position:right\|left\|top\|bottom]	It determinate the position of the tool tip
%general-tooltip-arrow	The general arrow style tooltip setting with beet background and light color
.tooltip-arrow-[position:right\|left\|top\|bottom]	It determinate the position of the arrow tool tip
.tooltip-fadein	The fade in transition of tooltip