dashbook
Marketing / Content blocks

UtilityTiles.

A tone-owning section: eyebrow + display headline over a 1 / 2 / 4 grid of hover-lift cards. Each card reserves a fixed 140px slot for one of four built-in animated mono graphics (bars, flow, tree, agents), then a display title and a 14px body.

Stable src/components/rhythm/UtilityTiles.astro

When to use

When four capabilities each deserve a card and a small piece of evidence — a spend breakdown, a pipeline, an org tree, an agent ledger. It is the widest of the card patterns (a 1920px container) and it brings its own band, so drop it straight into a page. Reach for FeatureColumns when three claims with a metric are enough, or FeatureList when the points are text-only and belong inside an existing section.

Platform

One system for every dollar

  • Live spend · 30 days

    Marketing $84.2K
    Operations $56.8K
    Engineering $38.0K
    Travel $18.4K

    Live spend visibility

    Every category, every card, updated as it happens.

  • Auto-coding pipeline

    Receipt AI Coded
    Invoice AI Approved
    Card txn AI Posted

    Auto-coded transactions

    Receipts matched and posted without a human touch.

  • Org structure

    CEO
    CFO
    $50K
    VP Ops
    $25K
    VP Eng
    $30K

    Limits that mirror your org

    Approval chains follow the reporting line, not a spreadsheet.

  • Recovered this month

    Ad Agent +$2,847
    Shipping +$1,420

    Agents that claw money back

    Ad and shipping overcharges, recovered on your behalf.

The 140px graphic slot is the pattern. It is bottom-aligned, overflow: hidden, and rendered unconditionally — a tile with no graphic still reserves the height, which is what keeps titles aligned across a row. The four visuals are authored inside the component and chosen by name; their figures are hard-coded illustration, not live data. The grid is hard-coded 1 / 2 / 4 — there is no auto-fit, no icon, label or sublabel, and no product-image variant.