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 across-badge--work">Work</span>
<span class="across-badge across-badge--look">Look</span>
<span class="across-badge across-badge--share">Share</span>
<span class="across-badge across-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.
Status Indicator
Colored dots for presence states with optional pulse animation.
Structure: .across-status >
.across-status__dot.across-status__dot--{state}. Add .across-status__dot--pulse
for animation.
Notification Badge
Numeric count or dot overlay positioned on icons and avatars.
Structure: .across-notification-badge wraps an icon +
.across-notification-badge__count. Use --dot modifier for a plain dot.
Timeline
Vertical event sequence with dates, connectors, and active state.
Structure: .across-timeline > .across-timeline__item >
__dot, __time, __title, __desc.
Compare Image
Before/after image comparison with a draggable slider. Drag the handle left and right.
Structure: .across-compare with an "after" img, a
.across-compare__before overlay with "before" img, and
.across-compare__slider + .across-compare__handle.
Masonry Grid
CSS columns-based Pinterest-style layout for variable-height content.
Structure: .across-masonry > .across-masonry__item.
Defaults to 3 columns, responsive to 2/1.
Logo Cloud
Responsive grid of partner/client logos. Grayscale by default, full color on hover.
Structure: .across-logo-cloud > .across-logo-cloud__item
containing img or text.
Code Block
Styled code display with language label, line numbers, and a copy button.
2
3
const greeting = 'Hello, Across!';
console.log(greeting);
// → Hello, Across!Structure: .across-code-block > __header (lang + copy) +
__body > __lines > __line-numbers +
pre > code.