Card

Sawatdee Card!

Example

Basic

Show Code

<script lang="ts" setup>
import { RCard } from 'roughness'
</script>

<template>
  <RCard>
    <template #title>A Tranquil Night</template>
    Abed, I see a silver light,<br>
    I wonder if It’s frost around.<br>
    Looking up, I find the moon bright;<br>
    Bowing, in homesickness I’m drowned.
  </RCard>
</template>

A Tranquil Night

Abed, I see a silver light,
I wonder if It’s frost around.
Looking up, I find the moon bright;
Bowing, in homesickness I’m drowned.

Alert

Show Code

<script lang="ts" setup>
import { RCard, RSpace } from 'roughness'
</script>

<template>
  <RSpace vertical>
    <RCard type="info">For every minute in Africa, 60 seconds pass.</RCard>
    <RCard type="success">You successfully failed.</RCard>
    <RCard type="warning" size="small">No programmer can see warnings.</RCard>
    <RCard type="error" size="large">You threw tantrums on me!</RCard>
  </RSpace>
</template>

INFO

For every minute in Africa, 60 seconds pass.

SUCCESS

You successfully failed.

WARNING

No programmer can see warnings.

ERROR

You threw tantrums on me!

Usage

Props

Name	Type	Default Value	Description
footer
graphicsOptions
header
tag
type
...			See Space Props. Unlike Space, the default value of Card's tag is article.

Slots

Name	Type	Description
title
header-end
default
footer

Styles

Name	Type	Default Value	Description
--r-card-color
--r-card-border-color
--r-card-border-width
--r-card-border-dash
--r-card-padding-block
--r-card-padding-inline
...			See Space Styles.