Card Component

'x-section':`p--section-padding:40px bgc--section-bg:transparent [class~=section-spacious]--section-padding:80px [class~=section-colored]--section-bg:f0f4f8`, 'x-row':`df fww g-16px m--8px __all-margin-8px __all-flex-1 [class~=row-no-wrap]-fwn [class~=row-center]-jcc`, 'x-container':`width-100p xw--container-width:1200px margin-0-auto p--container-padding:16px [class~=container-fluid][--container-width:100%] [class~=container-narrow][--container-width:800px]`, 'x-box':`bgc--box-bg:ffffff p--box-padding:16px br--box-border-radius:8px border--box-border:1px-solid-e0e0e0 [class~=box-shadow]-bxs-0px-2px-8px-0000000000d1`, 'x-card':`bgc--card-bg:ffffff padding--card-padding:24px br--card-border-radius:12px bxs--card-shadow:0px-4px-12px-0000000000d1 --hover-transform-translateY--4px --hover-bxs-0-8px-24px-0000000000d15 transition-transform-0.3s-ease__box-shadow-0.3s-ease [class~=card-dark][--card-bg:1a1a1a,--card-shadow:0px-4px-12px-0000000000d3,color--card-color:ffffff]`,

Default Card

This is a standard card with hover effects and shadow.

Dark Card

Dark theme with white text.

Container Component

Default Container

Centered container with a max-width of 1200px.

Narrow Container

Narrow container with a max-width of 800px.

Fluid Container

Full-width container with padding.

Row Component

Box 1
Box 2
Box 3
No-Wrap Box 1
No-Wrap Box 2
Centered Box

Box Component

Default Box

Simple box with border.

Shadow Box

Box with a subtle shadow effect.

Minimal Box

No border or background.

Section Component

Default Section

Standard section with padding.

Spacious Section

More padding for a spacious feel.

Colored Section

Section with a light background color.