Skip to content
Agon ĀtriumAgon Ātrium

Source code

Open source page

Cards

Cards group related information and actions with a consistent surface.

Start with your first page. Shared ui* providers are registered by createAdmin. Examples belong inside a route template, not the root HTML document. The page and its optional controller load through Atrium’s lazy route registry.

Minimal example

<article class="card">
  <header class="card-header"><h2>Workspace</h2></header>
  <div class="card-body"><p>Your application content.</p></div>
  <footer class="card-footer"><a :href="href('/settings')" x-link>Settings</a></footer>
</article>

Settings and behavior

  • Use card-header, card-body, and card-footer for consistent spacing.
  • The card surface follows theme tokens and the selected palette.
  • Use CSS grid or Bootstrap rows and columns to compose cards.

Integration notes

Cards clip overflow by default. Put floating overlays outside clipping ancestors or deliberately give their host overflow: visible.

Working reference

See the production example. Return to the component index.

Author

Laurent Declercq l.declercq@agon-innovation.ch

License

Unless otherwise stated all source code is licensed under LGPL 2.1 and has the following copyright:

© 2026, Agon Partners Innovation AG, All rights reserved.

The design material and the “Agon Ātrium” trademark is the property of their authors. Reuse of them without prior consent of their respective authors is strictly prohibited.

Version

Version: 20260921