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 color="info">For every minute in Africa, 60 seconds pass.</RCard>
    <RCard color="success">You successfully failed.</RCard>
    <RCard color="warning" size="small">No programmer can see warnings.</RCard>
    <RCard color="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

Slots

Styles

Graphics Selectors