Aqua DS - Component Library

Quick Start

Framework Implementation

WebComponents

Vue 3

React

Angular

Components

Data Types

Directives

Style Customization

Theming

Custom Styles

Icons

FAQ

Aqua Basis

Aqua Composition

The AqCard component is used to display content and actions on a single topic. It consists of a card layout with optional header, content, footer, and image, supporting custom slots and emits interaction events from specific sections like the header or icons.

<aq-card
  img="<https://via.placeholder.com/300x200>"
  lazy-img="<https://resources.masivapp.com/img/general/default_image.svg>"
> 
  <aq-card-header id="header-card">
    <div slot="title">
      <em class="aq-icon-emoji-circle"></em>
      <aq-subheading>Card Title</aq-subheading>
    </div>
    <div slot="subtitle">
      <aq-helper-text text="Card Subtitle"></aq-helper-text>
    </div>
    <div slot="options">
      <aq-button><em class="aq-icon-three-dots-vertical"></em></aq-button>
    </div>
  </aq-card-header>
  
  <aq-card-content>
    <h2>This is the card content</h2>
  </aq-card-content>
   
  <aq-card-footer>
    <h3>Footer content</h3>
  </aq-card-footer>
</aq-card>

image.png

Props and Attributes

Prop / Attr Type Default Description
img string '' Main image URL displayed in the card.
lazyImg string https://resources.masivapp.com/img/general/default_image.svg Fallback image shown during lazy loading.

PlayGround

You can interact with the component and experiment with its attributes and properties directly in this playground.

In the Code tab, the generated code snippet is available.

In addition to the interactive examples in this documentation, you can explore the full playground with all supported options and advanced configurations at the following link:

👉 Open full playground

https://aqua-ds-playground.masivianlabs.com/doc-storybook/index.html?path=/story/components-data-aqcard--default&nav=0

<aside> ⚠️

Important: The code shown is in Web Component format. If you are using a specific framework (Vue, React, Angular), you must adapt it to the framework’s conventions before using it.

</aside>

Subcomponents and Slots

The AqCard component includes a default slot, but it is internally structured using the following subcomponents:

These internal components help organize content semantically and visually.

<aq-card
  img="<https://via.placeholder.com/300x200>"
  lazy-img="<https://resources.masivapp.com/img/general/default_image.svg>"
>
  <aq-card-header reorder>
    <div slot="title">
      <i class="aq-icon-emoji-circle"></i>
      <aq-subheading>Card Title</aq-subheading>
    </div>
    <div slot="subtitle">
      <aq-helper-text text="Card Subtitle"></aq-helper-text>
    </div>
    <div slot="options">
      <aq-button><i class="aq-icon-three-dots-vertical"></i></aq-button>
    </div>
  </aq-card-header>

  <aq-card-content>
    <h2>This is the card content</h2>
  </aq-card-content>

  <aq-card-footer>
    <h3>Footer content</h3>
  </aq-card-footer>
</aq-card>

<!-- aq-card structure -->
<aq-card ...>
	<aq-card-header ...>
		<slot name="title"/>
		<slot name="subtitle"/>
		<slot name="options"/>
	</aq-header>
	<aq-card-content ... />
	<aq-card-footer ... />
</aq-card>

✅ Use these subcomponents inside aq-card to maintain consistent layout and styling across your application.

AqCardHeader

The AqCardHeader component, when placed in the AqCard slot, maintains its own props, events and slots, such as isReorder and hasReturnIcon, the props title, subtitle, or options, as well as events like onReorder, onReturn or clickHeader. This allows you to configure the card header independently without interfering with the overall AqCard configuration, preserving clear composition and encapsulation within your components.

Props and Attributes

Prop / Attr Type Default Description
isReorder boolean false Displays the reorder icon and emits the reorder event when clicked.
hasReturnIcon boolean false Displays the return icon and emits the return event when clicked.

⚠️ Note: isReorder and hasReturnIcon cannot be used together.

Events

Event Name Description React Angular Vue Vanilla
clickHeader Triggered when the header is clicked. onClickHeader={handler} (clickHeader)="handleHeaderClick($event)" @clickHeader="handleHeaderClick" addEventListener('clickHeader', handler)
return Triggered when the return icon is clicked. onReturn={handler} (return)="handleReturn($event)" @return="handleReturn" addEventListener('return', handler)
reorder Triggered when the reorder icon is clicked. onReorder={handler} (reorder)="handleReorder($event)" @reorder="handleReorder" addEventListener('return', handler)

Event Types

| --- | --- |

Slots

The AqCardHeader component provides three named slots to allow for flexible layout customization:

💡 Keep slot content lightweight to preserve layout integrity, especially when using the component inside compact UI blocks.

AqCardContent

The AqCardContent component includes a default slot that accepts any type of content, including text, images, and complex Aqua DS components.

✅ Use this slot to render flexible layouts or embed interactive components inside the card body.

Props and Attributes

| --- | --- | --- | --- |

AqCardFooter

The AqCardFooter component provides a default slot intended for action controls or summary content. It supports:

💡 Recommended for placing action elements such as confirm/cancel buttons, or simple status indicators. Avoid inserting complex layouts to preserve visual consistency and alignment.

In Frameworks

Web Components

<aq-card
  img="<https://via.placeholder.com/300x200>"
  lazy-img="<https://resources.masivapp.com/img/general/default_image.svg>"
  >
  <aq-card-header id="header-card" is-reorder>
    <div slot="title">
      <em class="aq-icon-emoji-circle"></em>
      <aq-subheading>Card Title</aq-subheading>
    </div>
    <div slot="subtitle">
      <aq-helper-text text="Card Subtitle"></aq-helper-text>
    </div>
    <div slot="options">
      <aq-button><em class="aq-icon-three-dots-vertical"></em></aq-button>
    </div>
  </aq-card-header>

  <aq-card-content>
    <h2>This is the card content</h2>
  </aq-card-content>

  <aq-card-footer>
    <div style="margin-bottom: 15px; text-align: center;">
		  <aq-button variant="default" is-outline>Cancel</aq-button>
		  <aq-button variant="primary" is-outline>Ok</aq-button>
		</div>
  </aq-card-footer>
</aq-card>

<script>
  const aqCardHeader = document.getElementById('header-card');

  aqCardHeader.addEventListener('clickHeader', (event) => {
    alert('Clicked header ', event);
  });
  aqCardHeader.addEventListener('reorder', (event) => {
    alert('Clicked reorder ', event);
  });
</script>

Vue