Should flag

Border + zero side-padding

section: full border, padding 28px 0 0; label and pills touch the left/right border lines.
Supported dev servers
  • Vite
  • Next.js
  • SvelteKit
  • Astro

All sides flush against a border

card: 1px border on all sides, padding 0; heading and body touch every side.

Card flush against the borders

Body copy sits flush against every visible border line.

Background color, zero padding

no border, but a non-transparent bg; text flush against the bg's edge counts too.

Title flush against the bg edge

Body copy with zero padding around a colored fill.

Outline (not border), zero padding

outline draws outside the box; content at the box edge sits next to the outline.

Title flush against the outline

The outline counts as a visible boundary too.

Left-side flush, other sides fine

card: padding 12px 16px 12px 0; text touches the left border, other sides are inset.

Title flush only on the left

Padding-left zero with a full border.

Should pass

No boundary at all

no bg, no border, no outline; zero padding is fine.
Supported dev servers
  • Vite
  • Next.js
  • SvelteKit

Top-only border, no side borders

border-top only, padding-top 24px; no left/right border to be flush against.
Supported dev servers
  • Vite
  • Next.js
  • SvelteKit

Bordered card with proper inset

card: 1px border + padding 18px 20px; comfortable inset on every side.

Card with proper inset

Body copy sits comfortably away from the borders.

Background card with proper inset

non-transparent bg + padding 14px 18px; content has room to breathe.

Title with inset on bg

Body copy is comfortably inset from the bg edge.

Outline with proper inset

outline + padding 14px 18px; content is comfortably inside.

Title with inset and outline

Outline boundary with proper inset works.

Image-only container, no text

card: padding 0, border all sides; no text means nothing can be flush.