Card

A sheet of Material used to represent some related information. A card has slightly rounded corners and an elevation shadow.

Usage

Card with elevation 2

Card with elevation 8

<template>
  <Column :gap="20">
    <Card :elevation="2" :margin="EdgeInsets.all(10)">
      <Padding :padding="EdgeInsets.all(16)">
        <Text data="Card with elevation 2" />
      </Padding>
    </Card>

    <Card :elevation="8" color="#f0f0f0">
      <Padding :padding="EdgeInsets.all(16)">
        <Text data="Card with elevation 8" />
      </Padding>
    </Card>
  </Column>
</template>

<script setup lang="ts">
import { Card, Column, Padding, Text, EdgeInsets } from "fluekit";
</script>

iOS Style

iOS style cards have larger border radius and subtle shadows.

iOS Style Cards

iOS CardThis card has larger border radius (12px) and subtle shadow.

Settings Item>

<template>
  <Container color="#F2F2F7" :padding="EdgeInsets.all(20)">
    <Column :gap="20">
      <Text
        data="iOS Style Cards"
        :style="TextStyle({ fontWeight: FontWeight.bold, fontSize: 18, color: '#000' })"
      />

      <Card variant="ios">
        <Padding :padding="EdgeInsets.all(16)">
          <Column :gap="8">
            <Text
              data="iOS Card"
              :style="TextStyle({ fontWeight: FontWeight.w600, fontSize: 16 })"
            />
            <Text data="This card has larger border radius (12px) and subtle shadow." />
          </Column>
        </Padding>
      </Card>

      <Card variant="ios">
        <Padding :padding="EdgeInsets.all(16)">
          <Row mainAxisAlignment="spaceBetween">
            <Text data="Settings Item" />
            <Text data=">" :style="TextStyle({ color: '#999' })" />
          </Row>
        </Padding>
      </Card>
    </Column>
  </Container>
</template>

<script setup lang="ts">
import {
  Card,
  Column,
  Row,
  Padding,
  Text,
  EdgeInsets,
  Container,
  TextStyle,
  FontWeight,
} from "fluekit";
</script>

API

Props

Name	Type	Default	Description
elevation	number	1	The z-coordinate at which to place this card. Controls the size of the shadow.
color	string	'#ffffff'	The card's background color.
shadowColor	string	'#000000'	The color to paint the shadow.
shape	BorderRadius	BorderRadius.all(4)	The shape of the card's border.
margin	EdgeInsets	4	The empty space that surrounds the card.
clipBehavior	Clip	'none'	The content will be clipped (or not) according to this option.
variant	'material' | 'ios'	'ios'	The style variant of the card.