Skip to content

Pillar

A .pillar is a vertical mini-card: icon → heading → paragraph → link. Use in 2/3/4-up grids inside a section. Compose with .x-card for surface treatment.

Install

import "elements-kit/ui/styles/theme.css";
import "elements-kit/ui/styles/scaling.css";
import "elements-kit/ui/styles/radius.css";
import "elements-kit/ui/styles/space.css";
import "elements-kit/ui/styles/typography.css";
import "elements-kit/ui/styles/palette/gray.css";
import "elements-kit/ui/styles/neutral/gray.css";
import "elements-kit/ui/styles/palette/mint.css";
import "elements-kit/ui/styles/accent/mint.css";
import "elements-kit/ui/styles/shadow.css";
import "elements-kit/ui/styles/material.css";
import "elements-kit/ui/card/card.css";       /* required for card-composed pillars */

import "elements-kit/ui/marketing/marketing.css";

API

<div class="pillar">
  <svg><!-- icon --></svg>
  <h3 data-heading>Heading</h3>
  <p data-paragraph>Description.</p>
  <a href="/learn">Learn more</a>
</div>

Attribute	Values
`data-align`	`start` (default), `center`

Composed with .x-card

For a card-style pillar (border + padding + background), add .x-card:

<div class="x-card pillar">…</div>

Pair with any .x-card variant (data-variant="elevated" for shadow, data-variant="borderless" for hover-only) and any data-size to control padding.

Theming

The icon uses --accent-9 — set data-accent="X" on an ancestor (e.g. data-accent="mint") to re-theme every pillar at once.

Tips