Astra UI

Getting Started

Components

Card

A versatile container for grouping related content and actions. Cards are foundational elements for building interfaces, providing a simple way to organize and present information.

Preview

Card Title

This is a preview of the Astra Card component. It can contain various types of content.

Action

Variations

Sizes

Base size card Small size card Compact size card

Basic Usage

To use the Astra Card component, simply add the <astra-card> tag to your HTML. Here's a basic example: 

<astra-card>A simple card component</astra-card>

Customization

The Astra Card component offers various customization options:

Sizes

Adjust the card size with the size attribute: 


<astra-card size="base">Base size card</astra-card>
<astra-card size="small">Small size card</astra-card>
<astra-card size="compact">Compact size card</astra-card>

Flexible Content

Cards can contain various types of content, including text, images, and other Astra UI components: 


<astra-card>
  <h2>Card Title</h2>
  <p>This card contains a title and some text content.</p>
  <astra-button>Action</astra-button>
</astra-card>

Why Use Astra Cards?

  • Simplicity: Easy to use and customize without unnecessary complexity.
  • Flexibility: Adapt to various content types and layout requirements.
  • Consistency: Maintain a cohesive look across your application.

Responsive Design

The Astra Card automatically adapts to light and dark color schemes, ensuring optimal visibility in different environments.

Fast Travel