Data & Cards
Cards, badges, avatars, skeletons, and tables for data presentation.
Card
Content containers with the Across Wing hover transition and accent variants.
Feature Card
Hover to see the Wing transition with the racing bar animation.
Work Across Card
Accent variant with green racing bar and glow.
Usage
Optional header with icon/badge, title, description, and footer sections. Accent variants: .across-card--work, --look, --share.
<div class="across-card">
<div class="across-card__header">
<div class="across-card__icon"><i class="ph-light ph-lightning"></i></div>
<span class="across-card__badge">New</span>
</div>
<h3 class="across-card__title">Feature Card</h3>
<p class="across-card__desc">Description here.</p>
<div class="across-card__footer">
<span class="across-card__meta">Updated 2h ago</span>
<button class="across-btn across-btn--ghost across-btn--sm">View →</button>
</div>
</div>Badge
Small status indicators and labels in neutral and accent variants.
<span class="across-badge">Default</span>
<span class="across-badge badge--work">Work</span>
<span class="across-badge badge--look">Look</span>
<span class="across-badge badge--share">Share</span>
<span class="across-badge badge--solid">Solid</span>Avatar
User profile images or initials with size and accent variants.
<div class="across-avatar">BT</div>
<div class="across-avatar across-avatar--xs">XS</div>
<div class="across-avatar across-avatar--sm">SM</div>
<div class="across-avatar across-avatar--lg">LG</div>
<div class="across-avatar across-avatar--xl">XL</div>
<div class="across-avatar across-avatar--work">W</div>
<div class="across-avatar-group">...</div>Skeleton
Loading placeholders with shimmer animation to improve perceived performance.
<div class="across-skeleton across-skeleton--text"></div>
<div class="across-skeleton across-skeleton--avatar"></div>
<div class="across-skeleton across-skeleton--btn"></div>Table
Simple data tables with zebra rows, hover states, and pill metadata.
| Campaign | Channel | Status | CTR | Owner | Actions |
|---|---|---|---|---|---|
| Summer Launch | Ads | Live | 3.9% | Alex Smith | |
| Q3 Nurture | Review | 2.4% | Taylor Lee | ||
| Reactivation | Push | Paused | 1.1% | Morgan Yu |
Wrapper: .across-table__wrapper handles horizontal scroll on small screens.
Styles: .across-table--striped for zebra rows, .across-table--compact for dense padding.
Meta: Use .across-table__pill and .across-table__status for inline badges.
Data Table
Dense grid with toolbar filters, row hover states, and status chips.
| Title | Owner | Status | Spend | Last Edited | Actions |
|---|---|---|---|---|---|
| Agency Rollup | Alex S. | Live | $24,300 | 2h ago | |
| AB Test: Hero | Morgan Y. | Review | $8,120 | 1d ago | |
| Re-Engage | Taylor L. | Paused | $3,040 | 3d ago |
Sortable List
A list of items that can be reordered and managed.
Boston YOUR LOCATION
London
Dubai
Tokyo
<div class="across-sortable-list">
<div class="across-sortable-item">
<div class="across-sortable-handle"><i class="ph-light ph-dots-six-vertical"></i></div>
<div class="across-sortable-content">Item Content</div>
<div class="across-sortable-actions">
<button class="across-btn across-btn--icon across-btn--xs" data-sortable-action="up" aria-label="Move up"><i class="ph-light ph-caret-up"></i></button>
<button class="across-btn across-btn--icon across-btn--xs" data-sortable-action="down" aria-label="Move down"><i class="ph-light ph-caret-down"></i></button>
<button class="across-btn across-btn--icon across-btn--xs" data-sortable-action="delete" aria-label="Delete"><i class="ph-light ph-x"></i></button>
</div>
</div>
</div>Accordion
Collapsible sections for dense settings, FAQs, or release notes.
High-level summary of objectives, stakeholders, and success metrics for the initiative.
Break down milestones, owners, and dates for the current sprint.
Use this panel to track open questions, blockers, and decisions with context.
Section Header
Architectural headers with hairlines for dividing content.
Structure: .across-section-header > .across-section-header__title + .across-section-header__actions.
Item
Generic list item with icon, label, description, and metadata.
Structure: .across-item > icon + content + meta.
Empty State
Placeholders for empty boards, lists, or search results.
No projects found
You haven't created any projects yet. Start by creating a new one.
Structure: .across-empty-state > icon + title + desc + actions.
Chart
A wrapper for data visualization with consistent styling.
Structure: .across-chart wrapper. Actual charts would be rendered by a library like Chart.js or Recharts.
Carousel
A scrollable container with snap points and navigation controls.
Structure: .across-carousel > controls + viewport > items.