Layout

Container

Centred, max-width page column with inline padding.

plain markup — no library on the page

rendered by aura-react

rendered by aura-vue

rendered by aura-svelte

built from aura-angular's own class helpers

Centred, and never wider than 420px.

Code

index.html

<div class="demo-bounds">
  <div class="aura-container" style="--aura-max:420px;--aura-pad:var(--space-4);background:var(--surface-2);border-radius:var(--r2);">
    <div class="aura-card">
      <p class="aura-text aura-text--body" style="">Centred, and never wider than 420px.</p>
    </div>
  </div>
</div>

Demo.tsx

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

// The dashed box is the width the container was *given*; the tinted column is what it takes.
// Without something to be narrower than, a max-width has nothing to show for itself.
export default function Demo() {
  return (
    <div className="demo-bounds">
      <Container maxWidth="420px" padInline={4} style={{ background: 'var(--surface-2)', borderRadius: 'var(--r2)' }}>
        <Card>
          <Typography variant="body">Centred, and never wider than 420px.</Typography>
        </Card>
      </Container>
    </div>
  );
}

Demo.vue

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

<template>
  <Container max-width="1120px" :pad-inline="5">
    <slot />
  </Container>
</template>

Demo.svelte

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

<Container maxWidth="1120px" padInline={5}>
  {@render children?.()}
</Container>

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

demo.component.ts

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

@Component({
  standalone: true,
  imports: [AuraContainer],
  template: `
    <div auraContainer maxWidth="1120px" [padInline]="5">
      <ng-content />
    </div>
  `,
})
export class DemoComponent {}

A directive — you choose the element, so there is no as input.

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
as	`ElementType`	`'div'`	Rendered element.
maxWidth	`string`	—	Any CSS length, e.g. `1120px`.
padInline	`number \| string`	—	Space-scale step or a raw CSS length.

Name	Type	Default	Notes
as	`string`	`'div'`	Rendered element.
maxWidth	`string`	—	Any CSS length, e.g. `1120px`.
padInline	`number \| string`	—	Space-scale step or a raw CSS length.

Name	Type	Default	Notes
as	`string`	`'div'`	Rendered element.
maxWidth	`string`	—	Any CSS length, e.g. `1120px`.
padInline	`number \| string`	—	Space-scale step or a raw CSS length.

Name	Type	Default	Notes
maxWidth	`string`	—	Any CSS length, e.g. `1120px`.
padInline	`number \| string`	—	Space-scale step or a raw CSS length.

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-container	base	Required. A modifier does nothing without it.

Tokens and rules

components.css

max width: var(--aura-max, 1120px)
padding: var(--aura-pad, var(--space-4))
centering: margin-inline: auto