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	boolean	undefined	Whether to display the card footer. Will be enabled automatically when the slot is passed.
graphicsOptions	import('roughjs/bin/core').Options		Options for Rough.js. See Graphics Configuration.
header	boolean	undefined	Whether to display the card header. Will be enabled automatically when any header slot is passed.
tag	string	'article'	HTML tag for rendering the card.
type	'primary' | 'info' | 'success' | 'warning' | 'error' | 'comment' | (string & {})		Element style type. It's actually just a class name, so you can also pass in another value and declare custom styles for it. See also Color Styles.
...			See Space Props. Unlike Space, the default value of Card's tag is article.

Slots

Name	Type	Description
title	(props: {}) => any	Content of the card title. When a reasonable type is specified, the uppercase form of type is displayed by default. Only available if the header is true.
header-end	(props: {}) => any	Content of the card header after title. Only available if the header is true.
default	(props: {}) => any	Content of the card.
footer	(props: {}) => any	Content of the card footer. Only available if the footer is true.

Styles

Name	Type	Default Value	Description
--r-card-color	<color>	var(--r-element-color)	Color of the card text.
--r-card-border-color	<color>	var(--r-card-color)	Color of the card border.
--r-card-border-width	<length>	var(--r-common-stroke-width)	Width of the card border.
--r-card-border-dash	<length>+ | none	none	List of comma and/or whitespace separated the lengths of alternating dashes and gaps of the element border. An odd number of values will be repeated to yield an even number of values. Thus, 8 is equivalent to 8 8. See stroke-dasharray.
--r-card-padding-block	<length-percenatage>+	calc(var(--r-common-box-padding-block) * 2)	Vertical padding of the card.
--r-card-padding-inline	<length-percenatage>+	var(--r-common-box-padding-inline)	Horizontal padding of the card.
...			See Space Styles.