Card

Guidelines
React API Reference
Blazor API Reference

Cards are flexible containers that group related content and actions. They create visual boundaries that help users scan and process information more efficiently, serving as entry points to more detailed content or functionality.

Guidance

Aspect	Best Practice
Usage	Use cards to group related content, present collections of similar items, or create distinct content sections within a layout.
Content	Include a clear hierarchy with headings, supporting content, and optional imagery. Limit content to what’s necessary for understanding.
Behavior	Cards can be interactive (fully clickable) or contain interactive elements. Provide clear visual feedback for interactive states.
States	For interactive cards, include hover and focus states. For static cards, ensure sufficient contrast with the background.
Feedback	Provide visual feedback for interactive elements within cards. Consider subtle elevation changes or borders for hover states.
Examples	Product listings, dashboard widgets, content previews, or user profile summaries.

Best Practices

Content Hierarchy: Establish a clear visual hierarchy within each card with consistent heading styles and content organization.
Consistent Structure: Maintain consistency in card layouts, spacing, and content organization across a collection.
Appropriate Density: Balance information density—include enough content to be useful without overwhelming users.
Clear Interactivity: Make it obvious which elements or entire cards are interactive through appropriate visual cues.
Visual Separation: Use sufficient spacing between cards and from other page elements to create clear visual boundaries.

Do’s and Don’ts

Do

Maintain consistent card layouts within collections.
Include clear headings and concise content.
Use cards to organize related information.
Ensure interactive elements are clearly identifiable.

Don't

Overload cards with too much content or functionality.
Use inconsistent layouts across a collection of cards.
Nest cards within other cards.
Make interactivity ambiguous or unclear.

Additional Guidance

Psychological Impact:
- Chunking: Cards help users mentally group related information, making it easier to process and remember.
- Visual Scanning: Well-designed card collections allow users to quickly scan and identify relevant information.
- Mental Models: Cards mimic physical card systems, leveraging familiar concepts from the physical world.

Import

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter
} from '@strongtie/design-system/card';

Usage

<Card>
  <CardHeader>
    <CardTitle>Title Text</CardTitle>
    <CardDescription>
      This is a card description.
    </CardDescription>
  </CardHeader>
  <CardContent>
    <div>This is a card content.</div>
  </CardContent>
  <CardFooter>
    <Button variant='outline'>Cancel</Button>
    <Button>Deploy</Button>
  </CardFooter>
</Card>

Styling Classes

The following CSS classes are applied by the Card components:

card – Base card container
card-header – Card header section
card-title – Card title element
card-description – Card description element
card-content – Card content area
card-footer – Card footer section

For more examples, visit the Storybook.

Example

<StudsCard>
    <StudsCardHeader>
        <StudsCardTitle>Title Text</StudsCardTitle>
        <StudsCardDescription>This is a card description.</StudsCardDescription>
    </StudsCardHeader>
    <StudsCardContent>
        <div>
            This is the card content.
        </div>
    </StudsCardContent>
    <StudsCardFooter>
        <div class="d-flex justify-content-between">
            <StudsButton ButtonStyle="ButtonStyle.Outline">Cancel</StudsButton>
            <StudsButton>Deploy</StudsButton>
        </div>
    </StudsCardFooter>
</StudsCard>

`StudsCard` Parameters

Template

RenderFragment<StudsCard>

Gets or sets the template to create a customized card.

ChildContent

RenderFragment

Gets or sets the child content.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

`StudsCardHeader` Parameters

ChildContent

RenderFragment

Gets or sets the child content for the card header.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

`StudsCardTitle` Parameters

ChildContent

RenderFragment

Gets or sets the child content for the card title.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

`StudsCardDescription` Parameters

ChildContent

RenderFragment

Gets or sets the child content for the card description.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

`StudsCardContent` Parameters

ChildContent

RenderFragment

Gets or sets the child content for the card content area.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

`StudsCardFooter` Parameters

ChildContent

RenderFragment

Gets or sets the child content for the card footer.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

Styling Classes

The following CSS classes are applied by the Card components:

card – Base card container
card-header – Card header section
card-title – Card title element
card-description – Card description element
card-content – Card content area
card-footer – Card footer section

For more examples, visit the Storybook.

Getting Started

Foundations

Components

Integration Guides

Content

Guidance

Best Practices

Do’s and Don’ts

Do

Don't

Additional Guidance

Styling Classes

`StudsCard` Parameters

`StudsCardHeader` Parameters

`StudsCardTitle` Parameters

`StudsCardDescription` Parameters

`StudsCardContent` Parameters

`StudsCardFooter` Parameters

Styling Classes

Getting Started

Foundations

Components

Integration Guides

Content

​Guidance

​Best Practices

​Do’s and Don’ts

Do

Don't

​Additional Guidance

​Styling Classes

​StudsCard Parameters

​StudsCardHeader Parameters

​StudsCardTitle Parameters

​StudsCardDescription Parameters

​StudsCardContent Parameters

​StudsCardFooter Parameters

​Styling Classes

Guidance

Best Practices

Do’s and Don’ts

Additional Guidance

Styling Classes

`StudsCard` Parameters

`StudsCardHeader` Parameters

`StudsCardTitle` Parameters

`StudsCardDescription` Parameters

`StudsCardContent` Parameters

`StudsCardFooter` Parameters

Styling Classes