Card | RiseUI

HeroUI-aligned card variants and compound header, title, description, content, and footer slots.

Usage

Header, title, description, content, and footer with a primary action.

RiseCard(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      RiseCardHeader(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            RiseCardTitle(child: Text('Title')),
            RiseCardDescription(child: Text('Description')),
          ],
        ),
      ),
      SizedBox(height: RiseCard.sectionGap),
      RiseCardContent(child: Text('Body')),
      SizedBox(height: RiseCard.sectionGap),
      RiseCardFooter(
        child: RiseButton(
          onPressed: () {},
          label: 'Action',
        ),
      ),
    ],
  ),
)

Variants

transparent, standard (default surface), secondary, tertiary.

RiseCard(variant: RiseCardVariant.transparent, child: …)
RiseCard(variant: RiseCardVariant.default_, child: …)
RiseCard(variant: RiseCardVariant.secondary, child: …)
RiseCard(variant: RiseCardVariant.tertiary, child: …)

Horizontal layout

Media + copy; stacks on narrow widths (Hero horizontal / md:flex-row).

RiseCard(
  child: LayoutBuilder(
    builder: (context, constraints) {
      // Row on wide layouts; Column when constraints.maxWidth < 400
      return Row(…);
    },
  ),
)

With avatar

Community rows with large avatar, title, members, and byline — Hero With Avatar story.

RiseCard(
  child: Column(
    children: [
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          RiseAvatar(name: 'Community', size: RiseAvatarSize.lg),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                RiseCardTitle(child: Text('Indie Hackers')),
                RiseCardDescription(child: Text('148 members')),
              ],
            ),
          ),
        ],
      ),
      Row(
        children: [
          RiseAvatar(name: 'Martha', size: RiseAvatarSize.sm),
          Text('By Martha'),
        ],
      ),
    ],
  ),
)

With images

Hero-style media header card plus secondary payment / community cards.

Column(
  children: [
    RiseCard(
      child: Column(
        children: [
          // image / hero block
          RiseCardTitle(child: Text('Become an ACME Creator!')),
          RiseCardFooter(child: RiseButton(label: 'Apply now')),
        ],
      ),
    ),
    Row(
      children: [
        Expanded(child: RiseCard(variant: RiseCardVariant.secondary, child: …)),
        Expanded(child: RiseCard(variant: RiseCardVariant.secondary, child: …)),
      ],
    ),
  ],
)

With form

RiseCard(
  child: Column(
    children: [
      RiseCardHeader(
        child: Column(
          children: [
            RiseCardTitle(child: Text('Login')),
            RiseCardDescription(child: Text('…')),
          ],
        ),
      ),
      SizedBox(height: RiseCard.sectionGap),
      RiseCardContent(
        child: Column(
          children: [
            RiseTextField(labelText: 'Email', fullWidth: true),
            RiseTextField(labelText: 'Password', obscureText: true, fullWidth: true),
          ],
        ),
      ),
      RiseCardFooter(child: Row(children: [RiseButton(…)])),
    ],
  ),
)