Heroes & Sections
Comparison — Us vs. Them
Accessible comparison table with a highlighted column and horizontal scroll on mobile.
$ velocityx add comparison-table-section Built for astro.
Full docs for Comparison — Us vs. Them →
Needs a licence key —
subscribe here, then
velocityx loginonce.
Why switch
Velocity X vs. a page builder
Both get you live. Only one keeps every fork maintainable.
| Feature | Velocity X | Page builder |
|---|---|---|
| Brand-swap via JSON | ||
| Owns its own codebase | ||
| Locked design tokens | Varies by plugin | |
| No per-page bloat | ||
| Self-hosted, no lock-in |
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| eyebrow | string | No | ||
| title | string | No | ||
| sub | string | No | ||
| headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | Yes | ||
| columns | ComparisonColumn[] | Yes | ||
| rows | ComparisonRow[] | Yes | ||
| highlightIndex | number | No | 0 | |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/comparison-table-section/ComparisonTableSection.astro Using the Comparison — Us vs. Them component
Install it with velocityx add comparison-table-section.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Heroes & Sections.
Copy column paired with a one or two column checklist of benefits.
astroFull-bleed brand-gradient CTA banner, the project's single-use-per-page gradient moment.
astroCentred call-to-action card with one or two buttons.
astroFinal-page CTA with a subtle CSS dot-grid pattern masked behind the copy.
astro