Skip to main content

Card

Overview

A visible card component that acts as a container for other components

Component Properties

PropertyDescription
DirectionIt aligns its children in the selected way.
AlignIt positions its children in the selected way.
GapThe gap between the childrens in it.
wrapIf enabled, it wraps its children onto multiple lines as necessary, if disabled doesnot wraps its children.
scrollif enabled, the browser provides scroll bar for the card when necessary, if disabled doesnot provides scroll bar for the card when necessary.

Blocks

Events

On Click

Event triggers when user clicked on card

loading block...

Properties

direction

Accepts: String

Sets the direction of the children in the card. Valid values are row, column, row sets the direction of children from left to right. column sets the direction of children from top to bottom.

loading block...

direction

Returns: String

Gets the direction of the children in the card. Valid values are row, column. row means the direction of children is from left to right. column means the direction of children is from top to bottom.

loading block...

align

Accepts: String

Sets the alignment of the children in the card. Valid values are left, center, right.

loading block...

align

Returns: String

Gets the alignment of the children in the card. Valid values are left, center, right.

loading block...

gap

Accepts: String

Sets the gap between the children in the card. Example: 10px or 1rem or 2em etc...

loading block...

gap

Returns: String

Gets the gap between the children in the card.

loading block...

wrap

Accepts: Boolean

If true, it wraps its children onto multiple lines as necessary, if false doesnot wraps its children.

loading block...

wrap

Returns: Boolean

Returns true, if it wraps its children onto multiple lines as necessary, returns false if doesnot wraps its children.

loading block...

scroll

Accepts: Boolean

if true, the browser provides scroll bar for the card when necessary, if false doesnot provides scroll bar for the card when necessary.

loading block...

scroll

Returns: Boolean

Returns true if the browser provides scroll bar for the card when necessary, returns false if it doesnot provides scroll bar for the card when necessary.

loading block...

hide

Accepts: Boolean

Hides the component if the input is true and shows it if the input is false

loading block...

hidden

Returns: Boolean

Returns true if the component is hidden and false if it is not

loading block...