Playground

Create from accent
Color Accent
Color Neutral
Color Card
Color Surface
Color Text Primary
Preset
Compact
Default
Comfortable
Gigantic
Heading Font
Body Font
Type Scale
Type Size
Geometric scale: size = round(base × ratio^step). Base = 14px, ratio = 1.200.
px
Corner Radius
Linear scale: inner = 4px, element = 8px, container = 12px, page = 28px.
px
Spacing
Linear scale: step N = 4px × N.
px
Element Size
sm = 28px, md = 32px, lg = 36px.
px
Duration
Speed multiplier for all motion. Current: 1× (e.g. medium = 410ms).
×

Layout expression (XLE / XLO)

Write a compressed layout. Validated live against @astryxdesign/core; the expanded TSX and token counts update below.
Valid · compact
XLE input · est.204 tok417 chars
Output TSX · est.986 tok6864 chars
Expansion4.8×output ÷ input
Rendered source (TSX)19 components · 2 TODO
// Generated by `astryx layout expand` — this file is the artifact; edit freely.
import {XDSAppShell} from '@astryxdesign/core/AppShell';
import {XDSBadge} from '@astryxdesign/core/Badge';
import {XDSButton} from '@astryxdesign/core/Button';
import {XDSCard} from '@astryxdesign/core/Card';
import {XDSGrid} from '@astryxdesign/core/Grid';
import {XDSHeading} from '@astryxdesign/core/Heading';
import {XDSLayout, XDSLayoutContent} from '@astryxdesign/core/Layout';
import {XDSSideNav} from '@astryxdesign/core/SideNav';
import {XDSHStack, XDSVStack} from '@astryxdesign/core/Stack';
import {XDSTable, XDSTableBody, XDSTableCell, XDSTableHeader, XDSTableHeaderCell, XDSTableRow} from '@astryxdesign/core/Table';
import {XDSText} from '@astryxdesign/core/Text';
import {XDSTopNav} from '@astryxdesign/core/TopNav';

export default function PlaygroundLayout() {
  return (
    <XDSAppShell
      contentPadding={6}
      topNav={
        <XDSTopNav />
      }
      sideNav={
        <XDSSideNav />
      }
    >
      <XDSLayout
        content={
          <XDSLayoutContent>
            <XDSVStack gap={6}>
              <XDSHStack hAlign="between" vAlign="center">
                <XDSHeading level={2}>
                  Analytics
                </XDSHeading>
                <XDSHStack gap={2}>
                  <XDSButton label="Export" />
                  <XDSButton variant="primary" label="New report" />
                </XDSHStack>
              </XDSHStack>
              <XDSGrid columns={4} gap={4}>
                <XDSCard padding={6}>
                  <XDSVStack gap={1}>
                    <XDSText size="lg">
                      $42k
                    </XDSText>
                    <XDSText type="supporting">
                      Revenue
                    </XDSText>
                  </XDSVStack>
                </XDSCard>
                <XDSCard padding={6}>
                  <XDSVStack gap={1}>
                    <XDSText size="lg">
                      $42k
                    </XDSText>
                    <XDSText type="supporting">
                      Revenue
                    </XDSText>
                  </XDSVStack>
                </XDSCard>
                <XDSCard padding={6}>
                  <XDSVStack gap={1}>
                    <XDSText size="lg">
                      $42k
                    </XDSText>
                    <XDSText type="supporting">
                      Revenue
                    </XDSText>
                  </XDSVStack>
                </XDSCard>
                <XDSCard padding={6}>
                  <XDSVStack gap={1}>
                    <XDSText size="lg">
                      $42k
                    </XDSText>
                    <XDSText type="supporting">
                      Revenue
                    </XDSText>
                  </XDSVStack>
                </XDSCard>
              </XDSGrid>
              <XDSGrid columns={{minWidth: 340}} gap={4}>
                <XDSCard>
                  {/* TODO(xle): content block 'CardCallout' — scaffold it with: astryx template CardCallout */}
                </XDSCard>
                <XDSCard>
                  {/* TODO(xle): content block 'CardCallout' — scaffold it with: astryx template CardCallout */}
                </XDSCard>
              </XDSGrid>
              <XDSCard padding={0}>
                <XDSTable isStriped>
                  <XDSTableHeader>
                    <XDSTableRow>
                      <XDSTableHeaderCell>
                        Order
                      </XDSTableHeaderCell>
                      <XDSTableHeaderCell>
                        Customer
                      </XDSTableHeaderCell>
                      <XDSTableHeaderCell>
                        Status
                      </XDSTableHeaderCell>
                      <XDSTableHeaderCell>
                        Total
                      </XDSTableHeaderCell>
                    </XDSTableRow>
                  </XDSTableHeader>
                  <XDSTableBody>
                    <XDSTableRow>
                      <XDSTableCell>
                        #101
                      </XDSTableCell>
                      <XDSTableCell>
                        Acme Inc
                      </XDSTableCell>
                      <XDSTableCell>
                        <XDSBadge variant="success" label="Paid" />
                      </XDSTableCell>
                      <XDSTableCell>
                        $120
                      </XDSTableCell>
                    </XDSTableRow>
                    <XDSTableRow>
                      <XDSTableCell>
                        #102
                      </XDSTableCell>
                      <XDSTableCell>
                        Acme Inc
                      </XDSTableCell>
                      <XDSTableCell>
                        <XDSBadge variant="success" label="Paid" />
                      </XDSTableCell>
                      <XDSTableCell>
                        $120
                      </XDSTableCell>
                    </XDSTableRow>
                    <XDSTableRow>
                      <XDSTableCell>
                        #103
                      </XDSTableCell>
                      <XDSTableCell>
                        Acme Inc
                      </XDSTableCell>
                      <XDSTableCell>
                        <XDSBadge variant="success" label="Paid" />
                      </XDSTableCell>
                      <XDSTableCell>
                        $120
                      </XDSTableCell>
                    </XDSTableRow>
                    <XDSTableRow>
                      <XDSTableCell>
                        #104
                      </XDSTableCell>
                      <XDSTableCell>
                        Acme Inc
                      </XDSTableCell>
                      <XDSTableCell>
                        <XDSBadge variant="success" label="Paid" />
                      </XDSTableCell>
                      <XDSTableCell>
                        $120
                      </XDSTableCell>
                    </XDSTableRow>
                    <XDSTableRow>
                      <XDSTableCell>
                        #105
                      </XDSTableCell>
                      <XDSTableCell>
                        Acme Inc
                      </XDSTableCell>
                      <XDSTableCell>
                        <XDSBadge variant="success" label="Paid" />
                      </XDSTableCell>
                      <XDSTableCell>
                        $120
                      </XDSTableCell>
                    </XDSTableRow>
                  </XDSTableBody>
                </XDSTable>
              </XDSCard>
            </XDSVStack>
          </XDSLayoutContent>
        }
      />
    </XDSAppShell>
  );
}
Canonical forms
compact:
A[cp=6 @topNav=(TN) @sideNav=(SN)] > L > LC > V[g=6] > (H[j=between a=center] > Hd"Analytics"[level=2] + (H[g=2] > B"Export" + B.primary"New report")) + (G[c=4 g=4] > (C[p=6] > V[g=1] > Tx.lg"\$42k" + Tx"Revenue"[t=supporting])*4) + (G[c={min:340} g=4] > C{card-callout} + C{card-callout}) + (C[p=0] > T[striped] > (TR > THC"Order" + THC"Customer" + THC"Status" + THC"Total") + (TR > TC"#10$" + TC"Acme Inc" + (TC > Bd.success"Paid") + TC"\$120")*5)

outline:
A cp=6
  topNav: TN
  sideNav: SN
  L
    LC
      V g=6
        H j=between a=center
          Hd "Analytics" level=2
          H g=2
            B "Export"
            B.primary "New report"
        G c=4 g=4
          repeat 4:
            C p=6
              V g=1
                Tx.lg "\$42k"
                Tx "Revenue" t=supporting
        G c={min:340} g=4
          C {card-callout}
          C {card-callout}
        C p=0
          T striped
            TR
              THC "Order"
              THC "Customer"
              THC "Status"
              THC "Total"
            repeat 5:
              TR
                TC "#10$"
                TC "Acme Inc"
                TC
                  Bd.success "Paid"
                TC "\$120"
Examples81 of 81
Pages
Layout
Cards
Content
Tables
Forms
Nav
Feedback
Blocks
Outline
Chat

Apply example theme

Close
Applying an example theme will overwrite your current theme. Any changes you've made in the Theme editor will be lost. Do you want to continue?

Load template

Close
Loading this template will replace the current contents of the code editor. Any changes you've made there will be lost. Do you want to continue?