Card

A card displays a set of content separate from other content on the screen.

Use cases:

• container for content
• show collections of related information
• grouping of content

Example

This simple example shows a card with a title at the top, some nonsense Latin text in the main area, and a (non-responsive) button at the bottom.

Card title

At purus lectus quis habitant commodo, cras. Aliquam malesuada velit a tortor. Felis orci tellus netus risus et ultricies augue aliquet.

Test button

React

Declaration

<rapid-card></rapid-card>

Usage

@customElement({
  name: 'my-element',
  template: html`
  <rapid-card>
    <h4>Card title</h4>
    <p>
      At purus lectus quis habitant commodo, cras. Aliquam malesuada velit a tortor. Felis orci tellus netus risus et
      ultricies augue aliquet.
    </p>
    <rapid-button>Test button</rapid-button>
  </rapid-card>
  `,
})
export class MyElement extends GenesisElement {
}

Genesis

Declaration

<Card></Card>

Usage

import { Button, Card } from '@genesislcap/rapid-design-system/react';

export function MyComponent() {
  return (
    <Card>
      <h4>Card title</h4>
      <p>
        At purus lectus quis habitant commodo, cras. Aliquam malesuada velit a tortor. Felis orci tellus netus risus et
        ultricies augue aliquet.
      </p>
      <Button>Test button</Button>
    </Card>
  );
}

Angular

Declaration

  <rapid-card></rapid-card>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
    <rapid-card>
      <h4>Card title</h4>
      <p>
        At purus lectus quis habitant commodo, cras. Aliquam malesuada velit a tortor. Felis orci tellus netus risus et
        ultricies augue aliquet.
      </p>
      <rapid-button>Test button</rapid-button>
    </rapid-card>
      `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
}

API

Attributes

This component doesn't have any attributes.

Properties

This component doesn't have any properties.

Slots

Name	Description
Default	The default slot for the card content.

Parts

This component doesn't have any parts.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.