SusCard

Surface card for grouping title, body, and actions.

Package

SusKit · Molecules (commercial)

Open in Playground

SusKit · Molecules

Props

Name	Type	Default
Variant	Prop<string>	"elevated"	v-model
Selected	Prop<bool>	false	v-model
Disabled	Prop<bool>	false	v-model
Title	Prop<string>	""	v-model
Subtitle	Prop<string>	""	v-model
Text	Prop<string>	""	v-model
Image	Prop<string>	""	v-model
ImageHeight	Prop<float>	0f	v-model
ImageGradient	Prop<bool>	false	v-model
Loading	Prop<bool>	false	v-model
LoadingColor	Prop<string>	"primary"	v-model
Hover	Prop<bool>	false	v-model
Link	Prop<bool>	false	v-model
Rounded	Prop<string>	"md"	v-model
MinHeight	Prop<float>	0f	v-model
MinWidth	Prop<float>	0f	v-model

Slots

Name
header
(default)
actions
footer

Events

Name	Field	Payload
Click	OnClick	—

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• sus-card
• sus-card__actions
• sus-card__body
• sus-card__header
• sus-card__image-gradient
• sus-card__image-wrap
• sus-card__loader
• sus-card__subtitle
• sus-card__text
• sus-card__title
• sus-card--disabled
• sus-card--elevated
• sus-card--flat
• sus-card--hover
• sus-card--link
• sus-card--loading
• sus-card--outlined
• sus-card--rounded-lg
• sus-card--rounded-pill
• sus-card--rounded-sm
• sus-card--rounded-xl
• sus-card--selected
• sus-card--tonal
• sus-slot

Usage

<template>
  <sus:SusCard Title="Card title"
               Subtitle="Subtitle"
               Text="Body text for the card."
               Variant="elevated"
               :Selected="Selected.Value"
               :Hover="Hover.Value"
               :Loading="Loading.Value"
               @click="OnClick">
    <template #actions>
      <sus:SusButton Text="Details" Variant="text" />
    </template>
  </sus:SusCard>
</template>

<script>
public Prop<bool> Selected = new(false);
public Prop<bool> Hover = new(false);
public Prop<bool> Loading = new(false);
void OnClick() { /* fires when Link is true */ }
</script>

var card = new SusCard();
card.Title.Value = "Card title";
card.Subtitle.Value = "Subtitle";
card.Text.Value = "Body text for the card preview.";
card.Variant.Value = "elevated";
card.Rounded.Value = "md";
card.OnClick += () => { /* … */ };

Variant

elevated · flat · tonal · outlined

Notes

• Slots: header, default body, actions, footer.
• Set Link to enable click handling (OnClick).
• Image + ImageHeight / ImageGradient add a media strip above the header.