Primitives

Card

A surface lifted off the canvas: --surface is a step lighter than --canvas in both themes, with a shadow under it. elevation names a shadow token rather than a shadow — flat is --shadow-1, not none — and the dark theme redefines all three tokens as denser black, because the soft blue-grey shadow that lifts a card off a white canvas is invisible on a near-black one. A titled card is the commonest thing built out of this one, so three classes are provided for it — .aura-card__header, .aura-card__extra and .aura-card__footer — rather than slots on the component: they go on your own <header> and <footer>, and they pull back out to the card’s edges so the rule under a title reaches both of them instead of stopping inside the padding.

plain markup — no library on the page

rendered by aura-react

elevation="raised"

overlay

elevation="overlay"

Code

index.html

<div class="aura-grid" style="--aura-gap:var(--space-4);--cols-base:1;--cols-md:3;width:100%;">
  <div class="aura-card">
    <div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-2);">
      <h3 class="aura-text aura-text--h3">flat</h3>
      <span class="aura-text aura-text--caption aura-text--muted">elevation="flat"</span>
    </div>
  </div>
  <div class="aura-card aura-card--raised">
    <div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-2);">
      <h3 class="aura-text aura-text--h3">raised</h3>
      <span class="aura-text aura-text--caption aura-text--muted">elevation="raised"</span>
    </div>
  </div>
  <div class="aura-card aura-card--overlay">
    <div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-2);">
      <h3 class="aura-text aura-text--h3">overlay</h3>
      <span class="aura-text aura-text--caption aura-text--muted">elevation="overlay"</span>
    </div>
  </div>
</div>

Demo.tsx

import { Card, Grid, Stack, Typography } from '@ilomee/aura-react';

const ELEVATIONS = ['flat', 'raised', 'overlay'] as const;

export default function Demo() {
  return (
    <Grid cols={{ base: 1, md: 3 }} style={{ width: '100%' }}>
      {ELEVATIONS.map((elevation) => (
        <Card key={elevation} elevation={elevation}>
          <Stack gap={2}>
            <Typography variant="h3">{elevation}</Typography>
            <Typography variant="caption" tone="muted">
              elevation="{elevation}"
            </Typography>
          </Stack>
        </Card>
      ))}
    </Grid>
  );
}

Demo.vue

<script setup lang="ts">
import { Card } from '@ilomee/aura-vue';
</script>

<template>
  <Card elevation="raised">Contents</Card>
</template>

Demo.svelte

<script lang="ts">
  import { Card } from '@ilomee/aura-svelte';
</script>

<Card elevation="raised">Contents</Card>

Used as [auraCard] — a directive you put on your own element.

demo.component.ts

import { AuraCard } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraCard],
  template: `<div auraCard elevation="raised">Contents</div>`,
})
export class DemoComponent {}

Props

Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.

Name	Type	Default	Notes
elevation	`'flat' \| 'raised' \| 'overlay'`	`'flat'`
…HTMLAttributesattrs	`HTMLAttributes<HTMLDivElement>`	—

Name	Type	Default	Notes
elevation	`'flat' \| 'raised' \| 'overlay'`	`'flat'`
defaultslot	`Slot`	—

Name	Type	Default	Notes
elevation	`'flat' \| 'raised' \| 'overlay'`	`'flat'`
childrenslot	`Snippet`	—

Name	Type	Default	Notes
elevation	`'flat' \| 'raised' \| 'overlay'`	`'flat'`

Emitted classes

Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.

Class	Role	Notes
.aura-card	base	Required. A modifier does nothing without it.
.aura-card--raised	modifier
.aura-card--overlay	modifier
.aura-card__header	element
.aura-card__extra	element
.aura-card__footer	element

Tokens and rules

components.css

padding: var(--card-pad)
radius: var(--r3)
background: var(--surface)
border: 1px solid var(--border)
flat: var(--shadow-1)
raised: var(--shadow-2)
overlay: var(--shadow-3)