Axonyx UI

Layout recipe

ContentGrid

A small Grid wrapper for repeated cards and content tiles. Choose the column count at each breakpoint without writing layout CSS.

Next: Grid

Docs cards

Three columns on wide screens, two on tablets, and one on phones. Resize the viewport to see the same content reflow.

Start

Install the CLI and create a project.

Build

Compose pages from Foundry primitives.

Ship

Build and deploy the Rust server.

View code
Code
asx
<ContentGrid cols="3" colsTablet="2" colsMobile="1" gap="lg">
  <Card title="Start"><Copy>Install the CLI and create a project.</Copy></Card>
  <Card title="Build"><Copy>Compose pages from Foundry primitives.</Copy></Card>
  <Card title="Ship"><Copy>Build and deploy the Rust server.</Copy></Card>
</ContentGrid>

Dashboard metrics

Use the same recipe for compact data cards. ContentGrid arranges children; the cards own their content and styling.

Published

24

Drafts

6
View code
Code
asx
<ContentGrid cols="2" colsMobile="1" gap="sm">
  <Card title="Published"><Badge tone="success">24</Badge></Card>
  <Card title="Drafts"><Badge tone="warning">6</Badge></Card>
</ContentGrid>

Installation

Command
bash
cargo ax add ui
Manual setup
Cargo.toml
toml
[dependencies]
axonyx-ui = "0.0.80"
app/layout.asx
asx
use "@axonyx/ui"

ContentGrid contract

ContentGrid renders Grid internally. It accepts cols, colsTablet, colsMobile, and gap; use Grid directly if you need intrinsic min tracks or align. Without a breakpoint-specific column count, Grid falls back to one column at that breakpoint.

Import
asx
import { ContentGrid } from "@axonyx/ui/foundry/ContentGrid.asx"

cols

String, optional. Wide-screen columns from 1 to 6.

colsTablet

String, optional. Columns below 900px; otherwise one column.

colsMobile

String, optional. Columns below 600px; otherwise one column.

gap

String, optional. xs, sm, md, lg, xl, or 2xl.