Greenranch Content Cards

Standard card patterns for full, split, and grid layouts.

content-card--hero

Full-width Card

Use for tables, timelines, or dense content.

content-card--full

Full-width card content spans the content area.

50/50 Card A

Left half layout.

content-card--half

Half-width card content.

50/50 Card B

Right half layout.

content-card--half

Half-width card content.

Two-Thirds Card

2/3 layout card.

content-card--two-thirds

Wider card for primary content in a 2/3 + 1/3 layout.

One-Third Card

1/3 layout card.

content-card--third

Narrow card for secondary content.

Third Card A

1/3 layout card.

content-card--third

First third in a three-column row.

Third Card B

1/3 layout card.

content-card--third

Second third in a three-column row.

Third Card C

1/3 layout card.

content-card--third

Third card in the three-column layout.

Forms Showcase

All `forms.css` elements in one place.

content-card--full

Standard Form Elements

Text, email, password, URL, number, select, textarea, and buttons.

Text Input

Email Input

Password Input

URL Input

Number Input

Select

Textarea

Dragbar 42

Range slider with a themed track and thumb.

Toggle switch style (layer/scene).

Toggle buttons (creature/screen).

Paragraph Code

{ "example": "json", "value": 42 }

Table Card

Rounded table styling and action buttons.

content-card--full

Move	Type	Power	Accuracy
Special Evergreen Burst	Nature	80	95%
Physical Briar Rush	Leaf	70	100%
Support Meadow Shield	Earth	—	—

Pagination Card

Pagination controls using the admin moves layout.

content-card--full

1 2 3 ... 12