Container CSS

Brutalist. Opinionated. Functional.

API

<container-box>

Attributes

Name	Description	Type	Default
as		\| 'main' \| 'div' \| 'footer' \| 'header' \| 'aside' \| 'section' \| 'article' \| 'nav' \| undefined
p		string \| undefined
pb		string \| undefined
bg		string \| undefined
border-color		string \| undefined
border-radius		string \| undefined
border-style		string \| undefined
border-w		string \| undefined
border-top-w		string \| undefined
border-top-style		string \| undefined
border-top-color		string \| undefined
border-right-w		string \| undefined
border-right-style		string \| undefined
border-right-color		string \| undefined
border-bottom-w		string \| undefined
border-bottom-style		string \| undefined
border-bottom-color		string \| undefined
border-left-w		string \| undefined
border-left-style		string \| undefined
border-left-color		string \| undefined
flex		string \| undefined
pl		string \| undefined
pr		string \| undefined
pt		string \| undefined
w		string \| undefined
min-w		string \| undefined
max-w		string \| undefined
sm-p		string \| undefined
sm-pb		string \| undefined
sm-bg		string \| undefined
sm-border-color		string \| undefined
sm-border-radius		string \| undefined
sm-border-style		string \| undefined
sm-border-w		string \| undefined
sm-border-top-w		string \| undefined
sm-border-top-style		string \| undefined
sm-border-top-color		string \| undefined
sm-border-right-w		string \| undefined
sm-border-right-style		string \| undefined
sm-border-right-color		string \| undefined
sm-border-bottom-w		string \| undefined
sm-border-bottom-style		string \| undefined
sm-border-bottom-color		string \| undefined
sm-border-left-w		string \| undefined
sm-border-left-style		string \| undefined
sm-border-left-color		string \| undefined
sm-flex		string \| undefined
sm-pl		string \| undefined
sm-pr		string \| undefined
sm-pt		string \| undefined
sm-w		string \| undefined
sm-min-w		string \| undefined
sm-max-w		string \| undefined
md-p		string \| undefined
md-pb		string \| undefined
md-bg		string \| undefined
md-border-color		string \| undefined
md-border-radius		string \| undefined
md-border-style		string \| undefined
md-border-w		string \| undefined
md-border-top-w		string \| undefined
md-border-top-style		string \| undefined
md-border-top-color		string \| undefined
md-border-right-w		string \| undefined
md-border-right-style		string \| undefined
md-border-right-color		string \| undefined
md-border-bottom-w		string \| undefined
md-border-bottom-style		string \| undefined
md-border-bottom-color		string \| undefined
md-border-left-w		string \| undefined
md-border-left-style		string \| undefined
md-border-left-color		string \| undefined
md-flex		string \| undefined
md-pl		string \| undefined
md-pr		string \| undefined
md-pt		string \| undefined
md-w		string \| undefined
md-min-w		string \| undefined
md-max-w		string \| undefined
lg-p		string \| undefined
lg-pb		string \| undefined
lg-bg		string \| undefined
lg-border-color		string \| undefined
lg-border-radius		string \| undefined
lg-border-style		string \| undefined
lg-border-w		string \| undefined
lg-border-top-w		string \| undefined
lg-border-top-style		string \| undefined
lg-border-top-color		string \| undefined
lg-border-right-w		string \| undefined
lg-border-right-style		string \| undefined
lg-border-right-color		string \| undefined
lg-border-bottom-w		string \| undefined
lg-border-bottom-style		string \| undefined
lg-border-bottom-color		string \| undefined
lg-border-left-w		string \| undefined
lg-border-left-style		string \| undefined
lg-border-left-color		string \| undefined
lg-flex		string \| undefined
lg-pl		string \| undefined
lg-pr		string \| undefined
lg-pt		string \| undefined
lg-w		string \| undefined
lg-min-w		string \| undefined
lg-max-w		string \| undefined
xl-p		string \| undefined
xl-pb		string \| undefined
xl-bg		string \| undefined
xl-border-color		string \| undefined
xl-border-radius		string \| undefined
xl-border-style		string \| undefined
xl-border-w		string \| undefined
xl-border-top-w		string \| undefined
xl-border-top-style		string \| undefined
xl-border-top-color		string \| undefined
xl-border-right-w		string \| undefined
xl-border-right-style		string \| undefined
xl-border-right-color		string \| undefined
xl-border-bottom-w		string \| undefined
xl-border-bottom-style		string \| undefined
xl-border-bottom-color		string \| undefined
xl-border-left-w		string \| undefined
xl-border-left-style		string \| undefined
xl-border-left-color		string \| undefined
xl-flex		string \| undefined
xl-pl		string \| undefined
xl-pr		string \| undefined
xl-pt		string \| undefined
xl-w		string \| undefined
xl-min-w		string \| undefined
xl-max-w		string \| undefined
2xl-p		string \| undefined
2xl-pb		string \| undefined
2xl-bg		string \| undefined
2xl-border-color		string \| undefined
2xl-border-radius		string \| undefined
2xl-border-style		string \| undefined
2xl-border-w		string \| undefined
2xl-border-top-w		string \| undefined
2xl-border-top-style		string \| undefined
2xl-border-top-color		string \| undefined
2xl-border-right-w		string \| undefined
2xl-border-right-style		string \| undefined
2xl-border-right-color		string \| undefined
2xl-border-bottom-w		string \| undefined
2xl-border-bottom-style		string \| undefined
2xl-border-bottom-color		string \| undefined
2xl-border-left-w		string \| undefined
2xl-border-left-style		string \| undefined
2xl-border-left-color		string \| undefined
2xl-flex		string \| undefined
2xl-pl		string \| undefined
2xl-pr		string \| undefined
2xl-pt		string \| undefined
2xl-w		string \| undefined
2xl-min-w		string \| undefined
2xl-max-w		string \| undefined

Properties

Name	Attribute	Type
as	as	\| 'main' \| 'div' \| 'footer' \| 'header' \| 'aside' \| 'section' \| 'article' \| 'nav' \| undefined
p	p	string \| undefined
pb	pb	string \| undefined
bg	bg	string \| undefined
borderColor	border-color	string \| undefined
borderRadius	border-radius	string \| undefined
borderStyle	border-style	string \| undefined
borderW	border-w	string \| undefined
borderTopW	border-top-w	string \| undefined
borderTopStyle	border-top-style	string \| undefined
borderTopColor	border-top-color	string \| undefined
borderRightW	border-right-w	string \| undefined
borderRightStyle	border-right-style	string \| undefined
borderRightColor	border-right-color	string \| undefined
borderBottomW	border-bottom-w	string \| undefined
borderBottomStyle	border-bottom-style	string \| undefined
borderBottomColor	border-bottom-color	string \| undefined
borderLeftW	border-left-w	string \| undefined
borderLeftStyle	border-left-style	string \| undefined
borderLeftColor	border-left-color	string \| undefined
flex	flex	string \| undefined
pl	pl	string \| undefined
pr	pr	string \| undefined
pt	pt	string \| undefined
w	w	string \| undefined
minW	min-w	string \| undefined
maxW	max-w	string \| undefined
smP	sm-p	string \| undefined
smPb	sm-pb	string \| undefined
smBg	sm-bg	string \| undefined
smBorderColor	sm-border-color	string \| undefined
smBorderRadius	sm-border-radius	string \| undefined
smBorderStyle	sm-border-style	string \| undefined
smBorderW	sm-border-w	string \| undefined
smBorderTopW	sm-border-top-w	string \| undefined
smBorderTopStyle	sm-border-top-style	string \| undefined
smBorderTopColor	sm-border-top-color	string \| undefined
smBorderRightW	sm-border-right-w	string \| undefined
smBorderRightStyle	sm-border-right-style	string \| undefined
smBorderRightColor	sm-border-right-color	string \| undefined
smBorderBottomW	sm-border-bottom-w	string \| undefined
smBorderBottomStyle	sm-border-bottom-style	string \| undefined
smBorderBottomColor	sm-border-bottom-color	string \| undefined
smBorderLeftW	sm-border-left-w	string \| undefined
smBorderLeftStyle	sm-border-left-style	string \| undefined
smBorderLeftColor	sm-border-left-color	string \| undefined
smFlex	sm-flex	string \| undefined
smPl	sm-pl	string \| undefined
smPr	sm-pr	string \| undefined
smPt	sm-pt	string \| undefined
smW	sm-w	string \| undefined
smMinW	sm-min-w	string \| undefined
smMaxW	sm-max-w	string \| undefined
mdP	md-p	string \| undefined
mdPb	md-pb	string \| undefined
mdBg	md-bg	string \| undefined
mdBorderColor	md-border-color	string \| undefined
mdBorderRadius	md-border-radius	string \| undefined
mdBorderStyle	md-border-style	string \| undefined
mdBorderW	md-border-w	string \| undefined
mdBorderTopW	md-border-top-w	string \| undefined
mdBorderTopStyle	md-border-top-style	string \| undefined
mdBorderTopColor	md-border-top-color	string \| undefined
mdBorderRightW	md-border-right-w	string \| undefined
mdBorderRightStyle	md-border-right-style	string \| undefined
mdBorderRightColor	md-border-right-color	string \| undefined
mdBorderBottomW	md-border-bottom-w	string \| undefined
mdBorderBottomStyle	md-border-bottom-style	string \| undefined
mdBorderBottomColor	md-border-bottom-color	string \| undefined
mdBorderLeftW	md-border-left-w	string \| undefined
mdBorderLeftStyle	md-border-left-style	string \| undefined
mdBorderLeftColor	md-border-left-color	string \| undefined
mdFlex	md-flex	string \| undefined
mdPl	md-pl	string \| undefined
mdPr	md-pr	string \| undefined
mdPt	md-pt	string \| undefined
mdW	md-w	string \| undefined
mdMinW	md-min-w	string \| undefined
mdMaxW	md-max-w	string \| undefined
lgP	lg-p	string \| undefined
lgPb	lg-pb	string \| undefined
lgBg	lg-bg	string \| undefined
lgBorderColor	lg-border-color	string \| undefined
lgBorderRadius	lg-border-radius	string \| undefined
lgBorderStyle	lg-border-style	string \| undefined
lgBorderW	lg-border-w	string \| undefined
lgBorderTopW	lg-border-top-w	string \| undefined
lgBorderTopStyle	lg-border-top-style	string \| undefined
lgBorderTopColor	lg-border-top-color	string \| undefined
lgBorderRightW	lg-border-right-w	string \| undefined
lgBorderRightStyle	lg-border-right-style	string \| undefined
lgBorderRightColor	lg-border-right-color	string \| undefined
lgBorderBottomW	lg-border-bottom-w	string \| undefined
lgBorderBottomStyle	lg-border-bottom-style	string \| undefined
lgBorderBottomColor	lg-border-bottom-color	string \| undefined
lgBorderLeftW	lg-border-left-w	string \| undefined
lgBorderLeftStyle	lg-border-left-style	string \| undefined
lgBorderLeftColor	lg-border-left-color	string \| undefined
lgFlex	lg-flex	string \| undefined
lgPl	lg-pl	string \| undefined
lgPr	lg-pr	string \| undefined
lgPt	lg-pt	string \| undefined
lgW	lg-w	string \| undefined
lgMinW	lg-min-w	string \| undefined
lgMaxW	lg-max-w	string \| undefined
xlP	xl-p	string \| undefined
xlPb	xl-pb	string \| undefined
xlBg	xl-bg	string \| undefined
xlBorderColor	xl-border-color	string \| undefined
xlBorderRadius	xl-border-radius	string \| undefined
xlBorderStyle	xl-border-style	string \| undefined
xlBorderW	xl-border-w	string \| undefined
xlBorderTopW	xl-border-top-w	string \| undefined
xlBorderTopStyle	xl-border-top-style	string \| undefined
xlBorderTopColor	xl-border-top-color	string \| undefined
xlBorderRightW	xl-border-right-w	string \| undefined
xlBorderRightStyle	xl-border-right-style	string \| undefined
xlBorderRightColor	xl-border-right-color	string \| undefined
xlBorderBottomW	xl-border-bottom-w	string \| undefined
xlBorderBottomStyle	xl-border-bottom-style	string \| undefined
xlBorderBottomColor	xl-border-bottom-color	string \| undefined
xlBorderLeftW	xl-border-left-w	string \| undefined
xlBorderLeftStyle	xl-border-left-style	string \| undefined
xlBorderLeftColor	xl-border-left-color	string \| undefined
xlFlex	xl-flex	string \| undefined
xlPl	xl-pl	string \| undefined
xlPr	xl-pr	string \| undefined
xlPt	xl-pt	string \| undefined
xlW	xl-w	string \| undefined
xlMinW	xl-min-w	string \| undefined
xlMaxW	xl-max-w	string \| undefined
xxlP	2xl-p	string \| undefined
xxlPb	2xl-pb	string \| undefined
xxlBg	2xl-bg	string \| undefined
xxlBorderColor	2xl-border-color	string \| undefined
xxlBorderRadius	2xl-border-radius	string \| undefined
xxlBorderStyle	2xl-border-style	string \| undefined
xxlBorderW	2xl-border-w	string \| undefined
xxlBorderTopW	2xl-border-top-w	string \| undefined
xxlBorderTopStyle	2xl-border-top-style	string \| undefined
xxlBorderTopColor	2xl-border-top-color	string \| undefined
xxlBorderRightW	2xl-border-right-w	string \| undefined
xxlBorderRightStyle	2xl-border-right-style	string \| undefined
xxlBorderRightColor	2xl-border-right-color	string \| undefined
xxlBorderBottomW	2xl-border-bottom-w	string \| undefined
xxlBorderBottomStyle	2xl-border-bottom-style	string \| undefined
xxlBorderBottomColor	2xl-border-bottom-color	string \| undefined
xxlBorderLeftW	2xl-border-left-w	string \| undefined
xxlBorderLeftStyle	2xl-border-left-style	string \| undefined
xxlBorderLeftColor	2xl-border-left-color	string \| undefined
xxlFlex	2xl-flex	string \| undefined
xxlPl	2xl-pl	string \| undefined
xxlPr	2xl-pr	string \| undefined
xxlPt	2xl-pt	string \| undefined
xxlW	2xl-w	string \| undefined
xxlMinW	2xl-min-w	string \| undefined
xxlMaxW	2xl-max-w	string \| undefined

<container-flex>

Attributes

Name	Description	Type	Default
as		\| 'main' \| 'div' \| 'footer' \| 'header' \| 'aside' \| 'section' \| 'article' \| 'nav' \| undefined
align-items		string \| undefined
direction		string \| undefined
flex		string \| undefined
gap		string \| undefined
justify-content		string \| undefined
w		string \| undefined
min-w		string \| undefined
max-w		string \| undefined
sm-align-items		string \| undefined
sm-direction		string \| undefined
sm-flex		string \| undefined
sm-gap		string \| undefined
sm-justify-content		string \| undefined
sm-w		string \| undefined
sm-min-w		string \| undefined
sm-max-w		string \| undefined
md-align-items		string \| undefined
md-direction		string \| undefined
md-flex		string \| undefined
md-gap		string \| undefined
md-justify-content		string \| undefined
md-w		string \| undefined
md-min-w		string \| undefined
md-max-w		string \| undefined
lg-align-items		string \| undefined
lg-direction		string \| undefined
lg-flex		string \| undefined
lg-gap		string \| undefined
lg-justify-content		string \| undefined
lg-w		string \| undefined
lg-min-w		string \| undefined
lg-max-w		string \| undefined
xl-align-items		string \| undefined
xl-direction		string \| undefined
xl-flex		string \| undefined
xl-gap		string \| undefined
xl-justify-content		string \| undefined
xl-w		string \| undefined
xl-min-w		string \| undefined
xl-max-w		string \| undefined
2xl-align-items		string \| undefined
2xl-direction		string \| undefined
2xl-flex		string \| undefined
2xl-gap		string \| undefined
2xl-justify-content		string \| undefined
2xl-w		string \| undefined
2xl-min-w		string \| undefined
2xl-max-w		string \| undefined

Properties

Name	Attribute	Type
as	as	\| 'main' \| 'div' \| 'footer' \| 'header' \| 'aside' \| 'section' \| 'article' \| 'nav' \| undefined
alignItems	align-items	string \| undefined
direction	direction	string \| undefined
flex	flex	string \| undefined
gap	gap	string \| undefined
justifyContent	justify-content	string \| undefined
w	w	string \| undefined
minW	min-w	string \| undefined
maxW	max-w	string \| undefined
smAlignItems	sm-align-items	string \| undefined
smDirection	sm-direction	string \| undefined
smFlex	sm-flex	string \| undefined
smGap	sm-gap	string \| undefined
smJustifyContent	sm-justify-content	string \| undefined
smW	sm-w	string \| undefined
smMinW	sm-min-w	string \| undefined
smMaxW	sm-max-w	string \| undefined
mdAlignItems	md-align-items	string \| undefined
mdDirection	md-direction	string \| undefined
mdFlex	md-flex	string \| undefined
mdGap	md-gap	string \| undefined
mdJustifyContent	md-justify-content	string \| undefined
mdW	md-w	string \| undefined
mdMinW	md-min-w	string \| undefined
mdMaxW	md-max-w	string \| undefined
lgAlignItems	lg-align-items	string \| undefined
lgDirection	lg-direction	string \| undefined
lgFlex	lg-flex	string \| undefined
lgGap	lg-gap	string \| undefined
lgJustifyContent	lg-justify-content	string \| undefined
lgW	lg-w	string \| undefined
lgMinW	lg-min-w	string \| undefined
lgMaxW	lg-max-w	string \| undefined
xlAlignItems	xl-align-items	string \| undefined
xlDirection	xl-direction	string \| undefined
xlFlex	xl-flex	string \| undefined
xlGap	xl-gap	string \| undefined
xlJustifyContent	xl-justify-content	string \| undefined
xlW	xl-w	string \| undefined
xlMinW	xl-min-w	string \| undefined
xlMaxW	xl-max-w	string \| undefined
xxlAlignItems	2xl-align-items	string \| undefined
xxlDirection	2xl-direction	string \| undefined
xxlFlex	2xl-flex	string \| undefined
xxlGap	2xl-gap	string \| undefined
xxlJustifyContent	2xl-justify-content	string \| undefined
xxlW	2xl-w	string \| undefined
xxlMinW	2xl-min-w	string \| undefined
xxlMaxW	2xl-max-w	string \| undefined

<container-flexcol>

Attributes

Name	Description	Type	Default
as		\| 'main' \| 'div' \| 'footer' \| 'header' \| 'aside' \| 'section' \| 'article' \| 'nav' \| undefined
align-items		string \| undefined
flex		string \| undefined
gap		string \| undefined
justify-content		string \| undefined
w		string \| undefined
min-w		string \| undefined
max-w		string \| undefined
sm-align-items		string \| undefined
sm-flex		string \| undefined
sm-gap		string \| undefined
sm-justify-content		string \| undefined
sm-w		string \| undefined
sm-min-w		string \| undefined
sm-max-w		string \| undefined
md-align-items		string \| undefined
md-flex		string \| undefined
md-gap		string \| undefined
md-justify-content		string \| undefined
md-w		string \| undefined
md-min-w		string \| undefined
md-max-w		string \| undefined
lg-align-items		string \| undefined
lg-flex		string \| undefined
lg-gap		string \| undefined
lg-justify-content		string \| undefined
lg-w		string \| undefined
lg-min-w		string \| undefined
lg-max-w		string \| undefined
xl-align-items		string \| undefined
xl-flex		string \| undefined
xl-gap		string \| undefined
xl-justify-content		string \| undefined
xl-w		string \| undefined
xl-min-w		string \| undefined
xl-max-w		string \| undefined
2xl-align-items		string \| undefined
2xl-flex		string \| undefined
2xl-gap		string \| undefined
2xl-justify-content		string \| undefined
2xl-w		string \| undefined
2xl-min-w		string \| undefined
2xl-max-w		string \| undefined

Properties

Name	Attribute	Type
as	as	\| 'main' \| 'div' \| 'footer' \| 'header' \| 'aside' \| 'section' \| 'article' \| 'nav' \| undefined
alignItems	align-items	string \| undefined
flex	flex	string \| undefined
gap	gap	string \| undefined
justifyContent	justify-content	string \| undefined
w	w	string \| undefined
minW	min-w	string \| undefined
maxW	max-w	string \| undefined
smAlignItems	sm-align-items	string \| undefined
smFlex	sm-flex	string \| undefined
smGap	sm-gap	string \| undefined
smJustifyContent	sm-justify-content	string \| undefined
smW	sm-w	string \| undefined
smMinW	sm-min-w	string \| undefined
smMaxW	sm-max-w	string \| undefined
mdAlignItems	md-align-items	string \| undefined
mdFlex	md-flex	string \| undefined
mdGap	md-gap	string \| undefined
mdJustifyContent	md-justify-content	string \| undefined
mdW	md-w	string \| undefined
mdMinW	md-min-w	string \| undefined
mdMaxW	md-max-w	string \| undefined
lgAlignItems	lg-align-items	string \| undefined
lgFlex	lg-flex	string \| undefined
lgGap	lg-gap	string \| undefined
lgJustifyContent	lg-justify-content	string \| undefined
lgW	lg-w	string \| undefined
lgMinW	lg-min-w	string \| undefined
lgMaxW	lg-max-w	string \| undefined
xlAlignItems	xl-align-items	string \| undefined
xlFlex	xl-flex	string \| undefined
xlGap	xl-gap	string \| undefined
xlJustifyContent	xl-justify-content	string \| undefined
xlW	xl-w	string \| undefined
xlMinW	xl-min-w	string \| undefined
xlMaxW	xl-max-w	string \| undefined
xxlAlignItems	2xl-align-items	string \| undefined
xxlFlex	2xl-flex	string \| undefined
xxlGap	2xl-gap	string \| undefined
xxlJustifyContent	2xl-justify-content	string \| undefined
xxlW	2xl-w	string \| undefined
xxlMinW	2xl-min-w	string \| undefined
xxlMaxW	2xl-max-w	string \| undefined

<container-flexrow>

Attributes

Name	Description	Type	Default
as		\| 'main' \| 'div' \| 'footer' \| 'header' \| 'aside' \| 'section' \| 'article' \| 'nav' \| undefined
align-items		string \| undefined
flex		string \| undefined
gap		string \| undefined
justify-content		string \| undefined
w		string \| undefined
min-w		string \| undefined
max-w		string \| undefined
sm-align-items		string \| undefined
sm-flex		string \| undefined
sm-gap		string \| undefined
sm-justify-content		string \| undefined
sm-w		string \| undefined
sm-min-w		string \| undefined
sm-max-w		string \| undefined
md-align-items		string \| undefined
md-flex		string \| undefined
md-gap		string \| undefined
md-justify-content		string \| undefined
md-w		string \| undefined
md-min-w		string \| undefined
md-max-w		string \| undefined
lg-align-items		string \| undefined
lg-flex		string \| undefined
lg-gap		string \| undefined
lg-justify-content		string \| undefined
lg-w		string \| undefined
lg-min-w		string \| undefined
lg-max-w		string \| undefined
xl-align-items		string \| undefined
xl-flex		string \| undefined
xl-gap		string \| undefined
xl-justify-content		string \| undefined
xl-w		string \| undefined
xl-min-w		string \| undefined
xl-max-w		string \| undefined
2xl-align-items		string \| undefined
2xl-flex		string \| undefined
2xl-gap		string \| undefined
2xl-justify-content		string \| undefined
2xl-w		string \| undefined
2xl-min-w		string \| undefined
2xl-max-w		string \| undefined

Properties

Name	Attribute	Type
as	as	\| 'main' \| 'div' \| 'footer' \| 'header' \| 'aside' \| 'section' \| 'article' \| 'nav' \| undefined
alignItems	align-items	string \| undefined
flex	flex	string \| undefined
gap	gap	string \| undefined
justifyContent	justify-content	string \| undefined
w	w	string \| undefined
minW	min-w	string \| undefined
maxW	max-w	string \| undefined
smAlignItems	sm-align-items	string \| undefined
smFlex	sm-flex	string \| undefined
smGap	sm-gap	string \| undefined
smJustifyContent	sm-justify-content	string \| undefined
smW	sm-w	string \| undefined
smMinW	sm-min-w	string \| undefined
smMaxW	sm-max-w	string \| undefined
mdAlignItems	md-align-items	string \| undefined
mdFlex	md-flex	string \| undefined
mdGap	md-gap	string \| undefined
mdJustifyContent	md-justify-content	string \| undefined
mdW	md-w	string \| undefined
mdMinW	md-min-w	string \| undefined
mdMaxW	md-max-w	string \| undefined
lgAlignItems	lg-align-items	string \| undefined
lgFlex	lg-flex	string \| undefined
lgGap	lg-gap	string \| undefined
lgJustifyContent	lg-justify-content	string \| undefined
lgW	lg-w	string \| undefined
lgMinW	lg-min-w	string \| undefined
lgMaxW	lg-max-w	string \| undefined
xlAlignItems	xl-align-items	string \| undefined
xlFlex	xl-flex	string \| undefined
xlGap	xl-gap	string \| undefined
xlJustifyContent	xl-justify-content	string \| undefined
xlW	xl-w	string \| undefined
xlMinW	xl-min-w	string \| undefined
xlMaxW	xl-max-w	string \| undefined
xxlAlignItems	2xl-align-items	string \| undefined
xxlFlex	2xl-flex	string \| undefined
xxlGap	2xl-gap	string \| undefined
xxlJustifyContent	2xl-justify-content	string \| undefined
xxlW	2xl-w	string \| undefined
xxlMinW	2xl-min-w	string \| undefined
xxlMaxW	2xl-max-w	string \| undefined

<my-element>

An example element.

Attributes

Name	Description	Type	Default
name	The name to say "Hello" to.	string	'World'
count	The number of times the button has been clicked.	number	0

Properties

Name	Attribute	Description	Type	Default
name	name	The name to say "Hello" to.	string	'World'
count	count	The number of times the button has been clicked.	number	0

Methods

Name

Parameters

Description

Return

sayHello

Name	Description	Type
name	The name to say "Hello" to	string

Formats a greeting

string

Events

Name	Description
count-changed	Indicates when the count changes

Slots

Name	Description
(default)	This element has a slot

CSS Shadow Parts

Name	Description
button	The button

GitHub