Card

Default

Card content

Card can leverage the max-width property. Learn more in our visual guidelines.

Card Backgrounds

Card Colors

Dark
White / Default
Light

Product Colors

Product 1 Background
Product 7 Highlight
Product 2 Highlight

Add a background color by passing the color name to background. List of all colors can be viewed here under Product Colors.

Highlight Cards

Side Position & Product 6 Highlight Color
Top Position & Warning Color
Side Position & Category 2 Color

Card highlight can pass status, product, and category colors. List of all colors can be viewed here.

Header Cards

Category Colors

Category 1
Category 1
Category 3
Body

Product Colors

Product 2 Background
Body
Product 6 Background
Body

Background Colors

White
Body
Dark
Body

Striped Colors

Striped Category 1
Body

Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed here.

Selected

Card content

Card content

HTML Tag

section

footer

header

article


main


Padding Size

Card content

Card content

Card content

Card content

Card content

Shadow Size

Card content

Card content

Card content

Card content

Content Size

Card Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.

Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.

Separator Card

Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at. Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
Footer

No Border

Card content

Remove card border only for dashboard cards.

Border Radius

Rounded (1000px)

Extra large (16px)

Large (8px)

Medium (6px)

Small (4px)

Extra small (4px)

None

border_radius_md is the card kit default


UI Samples using Card Kit

Get the full picture. See how this kit is used in our samples.

Available Props

Props Type Values

max_width

array
xs
sm
md
lg
xl
xxl
0
none

z_index

array
1
2
3
4
5
6
7
8
9
10

number_spacing

array
tabular

shadow

array
none
deep
deeper
deepest

line_height

array
tightest
tighter
tight
normal
loose
looser
loosest

display

array
block
inline_block
inline
flex
inline_flex
none

cursor

array
auto
default
none
contextMenu
help
pointer
progress
wait
cell
crosshair
text
verticalText
alias
copy
move
noDrop
notAllowed
grab
grabbing
eResize
nResize
neResize
nwResize
sResize
seResize
swResize
wResize
ewResize
nsResize
neswResize
nwseResize
colResize
rowResize
allScroll
zoomIn
zoomOut

flex_direction

array
row
column
rowReverse
columnReverse

flex_wrap

array
wrap
nowrap
wrapReverse

justify_content

array
start
end
center
spaceBetween
spaceAround
spaceEvenly

justify_self

array
auto
start
end
center
stretch

align_items

array
flexStart
flexEnd
start
end
center
baseline
stretch

align_content

array
start
end
center
spaceBetween
spaceAround
spaceEvenly

align_self

array
auto
start
end
center
stretch
baseline

flex

array
auto
initial
0
1
2
3
4
5
6
7
8
9
10
11
12
none

flex_grow

array
1
0

flex_shrink

array
1
0

order

array
1
2
3
4
5
6
7
8
9
10
11
12

position

array
relative
absolute
fixed
sticky

hover

array

text_align

array
start
end
left
right
center
justify
justify-all
match-parent

overflow

array
visible
hidden
scroll
auto

truncate

array
1
2
3
4
5

left

array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

top

array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

right

array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

bottom

array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

overflow_x

array
visible
hidden
scroll
auto

overflow_y

array
visible
hidden
scroll
auto

classname

string

dark

boolean

margin

array
none
xxs
xs
sm
md
lg
xl

margin_bottom

array
none
xxs
xs
sm
md
lg
xl

margin_left

array
none
xxs
xs
sm
md
lg
xl

margin_right

array
none
xxs
xs
sm
md
lg
xl

margin_top

array
none
xxs
xs
sm
md
lg
xl

margin_x

array
none
xxs
xs
sm
md
lg
xl

margin_y

array
none
xxs
xs
sm
md
lg
xl

padding

array
none
xxs
xs
sm
md
lg
xl

padding_bottom

array
none
xxs
xs
sm
md
lg
xl

padding_left

array
none
xxs
xs
sm
md
lg
xl

padding_right

array
none
xxs
xs
sm
md
lg
xl

padding_top

array
none
xxs
xs
sm
md
lg
xl

padding_x

array
none
xxs
xs
sm
md
lg
xl

padding_y

array
none
xxs
xs
sm
md
lg
xl

id

string

data

hashprop

aria

hashprop

html_options

hashprop

children

proc
Props Type Values Default

border_radius

enum
xs
sm
md
lg
xl
none
rounded
md

selected

boolean
false

highlight

hashprop

tag

enum
div
section
footer
header
article
aside
main
nav
div

border_none

boolean
false

background

enum
white
light
dark
product_1_background
product_1_highlight
product_2_background
product_2_highlight
product_3_background
product_3_highlight
product_4_background
product_4_highlight
product_5_background
product_5_highlight
product_6_background
product_6_highlight
product_7_background
product_7_highlight
product_8_background
product_8_highlight
product_9_background
product_9_highlight
product_10_background
product_10_highlight
windows
siding
doors
solar
roofing
gutters
insulation
none
none