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

Slots

Styles