Card

<afp-card>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

Cards are surfaces that display content and actions on a single topic.

lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<afp-card>
  lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</afp-card>

<afp-card>
  lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</afp-card>

<AfpCard>
  lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</AfpCard>

<AfpCard>
  lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</AfpCard>

Examples #

Variants #

Use the variant attribute to change the card's color scheme.

Neutral

Brand

Accent

Info

Error

Success

Warning

<div class="afp-grid">
  <afp-card variant="neutral">Neutral</afp-card>
  <afp-card variant="brand">Brand</afp-card>
  <afp-card variant="accent">Accent</afp-card>
  <afp-card variant="info">Info</afp-card>
  <afp-card variant="error">Error</afp-card>
  <afp-card variant="success">Success</afp-card>
  <afp-card variant="warning">Warning</afp-card>
</div>

<div class="afp-grid">
  <afp-card [variant]="'neutral'">Neutral</afp-card>
  <afp-card [variant]="'brand'">Brand</afp-card>
  <afp-card [variant]="'accent'">Accent</afp-card>
  <afp-card [variant]="'info'">Info</afp-card>
  <afp-card [variant]="'error'">Error</afp-card>
  <afp-card [variant]="'success'">Success</afp-card>
  <afp-card [variant]="'warning'">Warning</afp-card>
</div>

<div class="afp-grid">
  <AfpCard variant="neutral">Neutral</AfpCard>
  <AfpCard variant="brand">Brand</AfpCard>
  <AfpCard variant="accent">Accent</AfpCard>
  <AfpCard variant="info">Info</AfpCard>
  <AfpCard variant="error">Error</AfpCard>
  <AfpCard variant="success">Success</AfpCard>
  <AfpCard variant="warning">Warning</AfpCard>
</div>

<div class="afp-grid">
  <AfpCard :variant="'neutral'">Neutral</AfpCard>
  <AfpCard :variant="'brand'">Brand</AfpCard>
  <AfpCard :variant="'accent'">Accent</AfpCard>
  <AfpCard :variant="'info'">Info</AfpCard>
  <AfpCard :variant="'error'">Error</AfpCard>
  <AfpCard :variant="'success'">Success</AfpCard>
  <AfpCard :variant="'warning'">Warning</AfpCard>
</div>

Appearances #

Use the appearance attribute to change the card's visual style.

Default

Outlined

Plain

Filled

Outlined Filled

<div class="afp-grid">
  <afp-card appearance="default">Default</afp-card>
  <afp-card appearance="outlined">Outlined</afp-card>
  <afp-card appearance="plain">Plain</afp-card>
  <afp-card appearance="filled">Filled</afp-card>
  <afp-card appearance="outlined-filled">Outlined Filled</afp-card>
</div>

<div class="afp-grid">
  <afp-card [appearance]="'default'">Default</afp-card>
  <afp-card [appearance]="'outlined'">Outlined</afp-card>
  <afp-card [appearance]="'plain'">Plain</afp-card>
  <afp-card [appearance]="'filled'">Filled</afp-card>
  <afp-card [appearance]="'outlined-filled'">Outlined Filled</afp-card>
</div>

<div class="afp-grid">
  <AfpCard appearance="default">Default</AfpCard>
  <AfpCard appearance="outlined">Outlined</AfpCard>
  <AfpCard appearance="plain">Plain</AfpCard>
  <AfpCard appearance="filled">Filled</AfpCard>
  <AfpCard appearance="outlined-filled">Outlined Filled</AfpCard>
</div>

<div class="afp-grid">
  <AfpCard :appearance="'default'">Default</AfpCard>
  <AfpCard :appearance="'outlined'">Outlined</AfpCard>
  <AfpCard :appearance="'plain'">Plain</AfpCard>
  <AfpCard :appearance="'filled'">Filled</AfpCard>
  <AfpCard :appearance="'outlined-filled'">Outlined Filled</AfpCard>
</div>

Loading #

Use the loading attribute to indicate that the card content is being loaded.

<div class="afp-grid">
  <afp-card loading></afp-card>
  <afp-card loading header></afp-card>
  <afp-card loading footer header media></afp-card>
</div>

<div class="afp-grid">
  <afp-card loading></afp-card>
  <afp-card loading header></afp-card>
  <afp-card loading footer header media></afp-card>
</div>

<div class="afp-grid">
  <AfpCard loading></AfpCard>
  <AfpCard loading header></AfpCard>
  <AfpCard loading footer header media></AfpCard>
</div>

<div class="afp-grid">
  <AfpCard loading></AfpCard>
  <AfpCard loading header></AfpCard>
  <AfpCard loading footer header media></AfpCard>
</div>

With Header #

Use the header attribute to include a header section in the card.

John Doe

Senior Product Manager

View Profile

Send Message

Schedule Meeting

John leads the product strategy for our customer experience initiatives, focusing on data-driven improvements to onboarding flows and self-service platforms. Based in Berlin, Alex has been part of the Digital Products team since 2019 and closely collaborates with cross-functional stakeholders to deliver high-impact solutions.

<afp-card header>
  <!-- Header: Name + Role + Actions -->
  <div class="afp-split" slot="header">
    <div class="afp-cluster afp-align-center afp-gap-xs">
      <afp-avatar size="medium" image="/assets/img/avatar_1.png"></afp-avatar>
      <span class="afp-stack afp-gap-0">
        <b>John Doe</b>
        <afp-badge appearance="filled" variant="brand">Senior Product Manager</afp-badge>
      </span>
    </div>
    <afp-dropdown>
      <afp-button
        shape="pill"
        slot="trigger"
        appearance="plain"
        variant="neutral"
      >
        <afp-icon name="three-dots-vertical"></afp-icon>
      </afp-button>

      <afp-dropdown-item><afp-icon name="person"></afp-icon>View Profile</afp-dropdown-item>
      <afp-dropdown-item><afp-icon name="envelope"></afp-icon>Send Message</afp-dropdown-item>
      <afp-dropdown-item><afp-icon name="calendar"></afp-icon>Schedule Meeting</afp-dropdown-item>
    </afp-dropdown>
  </div>

  <!-- Content -->
  <p>
    John leads the product strategy for our customer experience initiatives,
    focusing on data-driven improvements to onboarding flows and self-service
    platforms. Based in Berlin, Alex has been part of the Digital Products team
    since 2019 and closely collaborates with cross-functional stakeholders to
    deliver high-impact solutions.
  </p>
</afp-card>

<afp-card header>
  <!-- Header: Name + Role + Actions -->
  <div class="afp-split" slot="header">
    <div class="afp-cluster afp-align-center afp-gap-xs">
      <afp-avatar [size]="'medium'" [image]="'/assets/img/avatar_1.png'"></afp-avatar>
      <span class="afp-stack afp-gap-0">
        <b>John Doe</b>
        <afp-badge [appearance]="'filled'" [variant]="'brand'">Senior Product Manager</afp-badge>
      </span>
    </div>
    <afp-dropdown>
      <afp-button
        [shape]="'pill'"
        [slot]="'trigger'"
        [appearance]="'plain'"
        [variant]="'neutral'"
      >
        <afp-icon [name]="'three-dots-vertical'"></afp-icon>
      </afp-button>

      <afp-dropdown-item><afp-icon [name]="'person'"></afp-icon>View Profile</afp-dropdown-item>
      <afp-dropdown-item><afp-icon [name]="'envelope'"></afp-icon>Send Message</afp-dropdown-item>
      <afp-dropdown-item><afp-icon [name]="'calendar'"></afp-icon>Schedule Meeting</afp-dropdown-item>
    </afp-dropdown>
  </div>

  <!-- Content -->
  <p>
    John leads the product strategy for our customer experience initiatives,
    focusing on data-driven improvements to onboarding flows and self-service
    platforms. Based in Berlin, Alex has been part of the Digital Products team
    since 2019 and closely collaborates with cross-functional stakeholders to
    deliver high-impact solutions.
  </p>
</afp-card>

<AfpCard header>
  <!-- Header: Name + Role + Actions -->
  <div class="afp-split" slot="header">
    <div class="afp-cluster afp-align-center afp-gap-xs">
      <AfpAvatar size="medium" image="/assets/img/avatar_1.png"></AfpAvatar>
      <span class="afp-stack afp-gap-0">
        <b>John Doe</b>
        <AfpBadge appearance="filled" variant="brand">Senior Product Manager</AfpBadge>
      </span>
    </div>
    <AfpDropdown>
      <AfpButton
        shape="pill"
        slot="trigger"
        appearance="plain"
        variant="neutral"
      >
        <AfpIcon name="three-dots-vertical"></AfpIcon>
      </AfpButton>

      <AfpDropdownItem><AfpIcon name="person"></AfpIcon>View Profile</AfpDropdownItem>
      <AfpDropdownItem><AfpIcon name="envelope"></AfpIcon>Send Message</AfpDropdownItem>
      <AfpDropdownItem><AfpIcon name="calendar"></AfpIcon>Schedule Meeting</AfpDropdownItem>
    </AfpDropdown>
  </div>

  <!-- Content -->
  <p>
    John leads the product strategy for our customer experience initiatives,
    focusing on data-driven improvements to onboarding flows and self-service
    platforms. Based in Berlin, Alex has been part of the Digital Products team
    since 2019 and closely collaborates with cross-functional stakeholders to
    deliver high-impact solutions.
  </p>
</AfpCard>

<AfpCard header>
  <!-- Header: Name + Role + Actions -->
  <div class="afp-split" slot="header">
    <div class="afp-cluster afp-align-center afp-gap-xs">
      <AfpAvatar :size="'medium'" :image="'/assets/img/avatar_1.png'"></AfpAvatar>
      <span class="afp-stack afp-gap-0">
        <b>John Doe</b>
        <AfpBadge :appearance="'filled'" :variant="'brand'">Senior Product Manager</AfpBadge>
      </span>
    </div>
    <AfpDropdown>
      <AfpButton
        :shape="'pill'"
        :slot="'trigger'"
        :appearance="'plain'"
        :variant="'neutral'"
      >
        <AfpIcon :name="'three-dots-vertical'"></AfpIcon>
      </AfpButton>

      <AfpDropdownItem><AfpIcon :name="'person'"></AfpIcon>View Profile</AfpDropdownItem>
      <AfpDropdownItem><AfpIcon :name="'envelope'"></AfpIcon>Send Message</AfpDropdownItem>
      <AfpDropdownItem><AfpIcon :name="'calendar'"></AfpIcon>Schedule Meeting</AfpDropdownItem>
    </AfpDropdown>
  </div>

  <!-- Content -->
  <p>
    John leads the product strategy for our customer experience initiatives,
    focusing on data-driven improvements to onboarding flows and self-service
    platforms. Based in Berlin, Alex has been part of the Digital Products team
    since 2019 and closely collaborates with cross-functional stakeholders to
    deliver high-impact solutions.
  </p>
</AfpCard>

Use the footer attribute to include a footer section in the card.

Release 4.10

Released

This release introduces faster load times, redesigned reports, and expanded API endpoints for advanced integrations.

Performance improvements
New analytics widgets
API v2 enhancements
Stability fixes

Published: Nov 14, 2025

<afp-card header footer>
  <div class="afp-split" slot="header">
    <b>Release 4.10</b>
    <afp-badge variant="success" appearance="outlined">Released</afp-badge>
  </div>

  <p>
    This release introduces faster load times, redesigned reports, and expanded
    API endpoints for advanced integrations.
  </p>
  
  <afp-details summary="View Changelog">
    <ul>
      <li>Performance improvements</li>
      <li>New analytics widgets</li>
      <li>API v2 enhancements</li>
      <li>Stability fixes</li>
    </ul>
  </afp-details>

  <div class="afp-split" slot="footer">
    <small>Published: Nov 14, 2025</small>
    <afp-button shape="pill" variant="neutral">Read More</afp-button>
  </div>
</afp-card>

<afp-card header footer>
  <div class="afp-split" slot="header">
    <b>Release 4.10</b>
    <afp-badge [variant]="'success'" [appearance]="'outlined'">Released</afp-badge>
  </div>

  <p>
    This release introduces faster load times, redesigned reports, and expanded
    API endpoints for advanced integrations.
  </p>
  
  <afp-details [summary]="'View Changelog'">
    <ul>
      <li>Performance improvements</li>
      <li>New analytics widgets</li>
      <li>API v2 enhancements</li>
      <li>Stability fixes</li>
    </ul>
  </afp-details>

  <div class="afp-split" slot="footer">
    <small>Published: Nov 14, 2025</small>
    <afp-button [shape]="'pill'" [variant]="'neutral'">Read More</afp-button>
  </div>
</afp-card>

<AfpCard header footer>
  <div class="afp-split" slot="header">
    <b>Release 4.10</b>
    <AfpBadge variant="success" appearance="outlined">Released</AfpBadge>
  </div>

  <p>
    This release introduces faster load times, redesigned reports, and expanded
    API endpoints for advanced integrations.
  </p>
  
  <AfpDetails summary="View Changelog">
    <ul>
      <li>Performance improvements</li>
      <li>New analytics widgets</li>
      <li>API v2 enhancements</li>
      <li>Stability fixes</li>
    </ul>
  </AfpDetails>

  <div class="afp-split" slot="footer">
    <small>Published: Nov 14, 2025</small>
    <AfpButton shape="pill" variant="neutral">Read More</AfpButton>
  </div>
</AfpCard>

<AfpCard header footer>
  <div class="afp-split" slot="header">
    <b>Release 4.10</b>
    <AfpBadge :variant="'success'" :appearance="'outlined'">Released</AfpBadge>
  </div>

  <p>
    This release introduces faster load times, redesigned reports, and expanded
    API endpoints for advanced integrations.
  </p>
  
  <AfpDetails :summary="'View Changelog'">
    <ul>
      <li>Performance improvements</li>
      <li>New analytics widgets</li>
      <li>API v2 enhancements</li>
      <li>Stability fixes</li>
    </ul>
  </AfpDetails>

  <div class="afp-split" slot="footer">
    <small>Published: Nov 14, 2025</small>
    <AfpButton :shape="'pill'" :variant="'neutral'">Read More</AfpButton>
  </div>
</AfpCard>

With Media #

Use the media attribute to include a media section in the card.

Onboarding Flow Optimization

Onboarding

Sprint 12

We are improving the sign-up experience by reducing friction in the early customer journey. The goal is to increase trial-to-paid conversions by 10%.

Team

Open Task

<afp-card header footer media>
  <img
    slot="media"
    src="https://images.unsplash.com/photo-1643142326340-7a4c55a09745?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Task Banner"
  />

  <div class="afp-split afp-align-center" slot="header">
    <b>Onboarding Flow Optimization</b>
    <div class="afp-cluster afp-gap-xs afp-align-center">
      <afp-tag variant="error" appearance="filled">Onboarding</afp-tag>
      <afp-tag variant="brand" appearance="filled">Sprint 12</afp-tag>
    </div>
  </div>
  
  <p>
    We are improving the sign-up experience by reducing friction in the early
    customer journey. The goal is to increase trial-to-paid conversions by 10%.
  </p>
  
  <afp-progress-bar value="30"></afp-progress-bar>
  
  <div class="afp-split" slot="footer">
    <div class="afp-cluster afp-align-center afp-gap-xs">
      <small><b>Team</b></small>
      <afp-avatar-group size="small">
        <afp-avatar image="/assets/img/avatar_1.png"></afp-avatar>
        <afp-avatar image="/assets/img/avatar_2.png"></afp-avatar>
        <afp-avatar image="/assets/img/avatar_3.png"></afp-avatar>
      </afp-avatar-group>
    </div>
    <afp-button shape="rounded" variant="brand">Open Task</afp-button>
  </div>
</afp-card>

<afp-card header footer media>
  <img
    slot="media"
    src="https://images.unsplash.com/photo-1643142326340-7a4c55a09745?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Task Banner"
  />

  <div class="afp-split afp-align-center" slot="header">
    <b>Onboarding Flow Optimization</b>
    <div class="afp-cluster afp-gap-xs afp-align-center">
      <afp-tag [variant]="'error'" [appearance]="'filled'">Onboarding</afp-tag>
      <afp-tag [variant]="'brand'" [appearance]="'filled'">Sprint 12</afp-tag>
    </div>
  </div>
  
  <p>
    We are improving the sign-up experience by reducing friction in the early
    customer journey. The goal is to increase trial-to-paid conversions by 10%.
  </p>
  
  <afp-progress-bar [value]=30></afp-progress-bar>
  
  <div class="afp-split" slot="footer">
    <div class="afp-cluster afp-align-center afp-gap-xs">
      <small><b>Team</b></small>
      <afp-avatar-group [size]="'small'">
        <afp-avatar [image]="'/assets/img/avatar_1.png'"></afp-avatar>
        <afp-avatar [image]="'/assets/img/avatar_2.png'"></afp-avatar>
        <afp-avatar [image]="'/assets/img/avatar_3.png'"></afp-avatar>
      </afp-avatar-group>
    </div>
    <afp-button [shape]="'rounded'" [variant]="'brand'">Open Task</afp-button>
  </div>
</afp-card>

<AfpCard header footer media>
  <img
    slot="media"
    src="https://images.unsplash.com/photo-1643142326340-7a4c55a09745?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Task Banner"
  />

  <div class="afp-split afp-align-center" slot="header">
    <b>Onboarding Flow Optimization</b>
    <div class="afp-cluster afp-gap-xs afp-align-center">
      <AfpTag variant="error" appearance="filled">Onboarding</AfpTag>
      <AfpTag variant="brand" appearance="filled">Sprint 12</AfpTag>
    </div>
  </div>
  
  <p>
    We are improving the sign-up experience by reducing friction in the early
    customer journey. The goal is to increase trial-to-paid conversions by 10%.
  </p>
  
  <AfpProgressBar value="30"></AfpProgressBar>
  
  <div class="afp-split" slot="footer">
    <div class="afp-cluster afp-align-center afp-gap-xs">
      <small><b>Team</b></small>
      <AfpAvatarGroup size="small">
        <AfpAvatar image="/assets/img/avatar_1.png"></AfpAvatar>
        <AfpAvatar image="/assets/img/avatar_2.png"></AfpAvatar>
        <AfpAvatar image="/assets/img/avatar_3.png"></AfpAvatar>
      </AfpAvatarGroup>
    </div>
    <AfpButton shape="rounded" variant="brand">Open Task</AfpButton>
  </div>
</AfpCard>

<AfpCard header footer media>
  <img
    slot="media"
    src="https://images.unsplash.com/photo-1643142326340-7a4c55a09745?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Task Banner"
  />

  <div class="afp-split afp-align-center" slot="header">
    <b>Onboarding Flow Optimization</b>
    <div class="afp-cluster afp-gap-xs afp-align-center">
      <AfpTag :variant="'error'" :appearance="'filled'">Onboarding</AfpTag>
      <AfpTag :variant="'brand'" :appearance="'filled'">Sprint 12</AfpTag>
    </div>
  </div>
  
  <p>
    We are improving the sign-up experience by reducing friction in the early
    customer journey. The goal is to increase trial-to-paid conversions by 10%.
  </p>
  
  <AfpProgressBar :value=30></AfpProgressBar>
  
  <div class="afp-split" slot="footer">
    <div class="afp-cluster afp-align-center afp-gap-xs">
      <small><b>Team</b></small>
      <AfpAvatarGroup :size="'small'">
        <AfpAvatar :image="'/assets/img/avatar_1.png'"></AfpAvatar>
        <AfpAvatar :image="'/assets/img/avatar_2.png'"></AfpAvatar>
        <AfpAvatar :image="'/assets/img/avatar_3.png'"></AfpAvatar>
      </AfpAvatarGroup>
    </div>
    <AfpButton :shape="'rounded'" :variant="'brand'">Open Task</AfpButton>
  </div>
</AfpCard>

Customizing #

Use CSS custom properties to adjust padding and gap sizes within the card.

User Settings

Manage your personal information and preferences

Receive product updates

Last update: 8 minutes ago

Save Changes

<afp-card
  style="
    --afp-regular-card-padding: var(--afp-space-xl);
    --afp-regular-card-gap: 0;
  "
  header 
  footer
>
  <div class="afp-stack afp-gap-0" slot="header">
    <h2 class="afp-cluster afp-align-center afp-gap-xs" slot="header" style="margin-top: 0">
      <afp-icon name="person-fill" style="--afp-icon-size: var(--afp-font-size-xl)"></afp-icon>
      User Settings
    </h2>
    <small>Manage your personal information and preferences</small>
  </div>
  
  <div class="afp-stack">
    <div class="afp-grid">
      <afp-input label="Display Name" value="John Doe"></afp-input>
      <afp-input type="email" label="Email" value="john.doe@example.com"></afp-input>
    </div>
    <afp-switch checked>Receive product updates</afp-switch>
  </div>

  <div class="afp-split" slot="footer">
    <small>Last update: 8 minutes ago</small>
    <afp-button shape="pill" variant="brand">Save Changes</afp-button>
  </div>
</afp-card>

<afp-card
  [style]="'
    --afp-regular-card-padding: var(--afp-space-xl);
    --afp-regular-card-gap: 0;
  '"
  header 
  footer
>
  <div class="afp-stack afp-gap-0" slot="header">
    <h2 class="afp-cluster afp-align-center afp-gap-xs" slot="header" style="margin-top: 0">
      <afp-icon [name]="'person-fill'" [style]="'--afp-icon-size: var(--afp-font-size-xl)'"></afp-icon>
      User Settings
    </h2>
    <small>Manage your personal information and preferences</small>
  </div>
  
  <div class="afp-stack">
    <div class="afp-grid">
      <afp-input [label]="'Display Name'" [value]="'John Doe'"></afp-input>
      <afp-input [type]="'email'" [label]="'Email'" [value]="'john.doe@example.com'"></afp-input>
    </div>
    <afp-switch checked>Receive product updates</afp-switch>
  </div>

  <div class="afp-split" slot="footer">
    <small>Last update: 8 minutes ago</small>
    <afp-button [shape]="'pill'" [variant]="'brand'">Save Changes</afp-button>
  </div>
</afp-card>

<AfpCard
  style="
    --afp-regular-card-padding: var(--afp-space-xl);
    --afp-regular-card-gap: 0;
  "
  header 
  footer
>
  <div class="afp-stack afp-gap-0" slot="header">
    <h2 class="afp-cluster afp-align-center afp-gap-xs" slot="header" style="margin-top: 0">
      <AfpIcon name="person-fill" style="--afp-icon-size: var(--afp-font-size-xl)"></AfpIcon>
      User Settings
    </h2>
    <small>Manage your personal information and preferences</small>
  </div>
  
  <div class="afp-stack">
    <div class="afp-grid">
      <AfpInput label="Display Name" value="John Doe"></AfpInput>
      <AfpInput type="email" label="Email" value="john.doe@example.com"></AfpInput>
    </div>
    <AfpSwitch checked>Receive product updates</AfpSwitch>
  </div>

  <div class="afp-split" slot="footer">
    <small>Last update: 8 minutes ago</small>
    <AfpButton shape="pill" variant="brand">Save Changes</AfpButton>
  </div>
</AfpCard>

<AfpCard
  :style="'
    --afp-regular-card-padding: var(--afp-space-xl);
    --afp-regular-card-gap: 0;
  '"
  header 
  footer
>
  <div class="afp-stack afp-gap-0" slot="header">
    <h2 class="afp-cluster afp-align-center afp-gap-xs" slot="header" style="margin-top: 0">
      <AfpIcon :name="'person-fill'" :style="'--afp-icon-size: var(--afp-font-size-xl)'"></AfpIcon>
      User Settings
    </h2>
    <small>Manage your personal information and preferences</small>
  </div>
  
  <div class="afp-stack">
    <div class="afp-grid">
      <AfpInput :label="'Display Name'" :value="'John Doe'"></AfpInput>
      <AfpInput :type="'email'" :label="'Email'" :value="'john.doe@example.com'"></AfpInput>
    </div>
    <AfpSwitch checked>Receive product updates</AfpSwitch>
  </div>

  <div class="afp-split" slot="footer">
    <small>Last update: 8 minutes ago</small>
    <AfpButton :shape="'pill'" :variant="'brand'">Save Changes</AfpButton>
  </div>
</AfpCard>

Properties

Learn more about properties.

Name Description Reflects

appearance

Appearance of card

Type

AfpAppearance

Name	Description
`DEFAULT`	Highlighted, primary action (default).
`OUTLINED`	Transparent background with a visible border.
`PLAIN`	Minimal, no border or background.
`FILLED`	Solid background, no border.
`OUTLINED_FILLED`	Solid background with a visible border.

AfpAppearance

Default AfpAppearance.DEFAULT

variant

Variant of card

Type

AfpVariant

Name	Description
`NEUTRAL`	The main call-to-action.
`BRAND`	Less prominent than primary.
`ACCENT`	Secondary highlight for emphasis.
`ERROR`	Used for destructive or critical actions.
`INFO`	Conveys general information.
`SUCCESS`	Indicates a successful or positive action.
`WARNING`	Communicates cautionary actions.

AfpVariant

Default AfpVariant.NEUTRAL

media

Whether to show the media section.

Type boolean

Default false

header

Whether to show the header section.

Type boolean

Default false

footer

Whether to show the footer section.

Type boolean

Default false

loading

Whether to show the loading skeleton.

Type boolean

Default false

Slots

Learn more about slots.

Name	Description
`default`	The default slot for card content.
`media`	The slot for the card media (e.g., image or video).
`header`	The slot for the card header.
`footer`	The slot for the card footer.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`skeleton`	The skeleton loading container.	`::part(skeleton)`
`skeleton-media`	The skeleton media item.	`::part(skeleton-media)`
`skeleton-header`	The skeleton header item.	`::part(skeleton-header)`
`skeleton-content`	The skeleton content item.	`::part(skeleton-content)`
`skeleton-content-short`	The short skeleton content item.	`::part(skeleton-content-short)`
`skeleton-footer`	The skeleton footer item.	`::part(skeleton-footer)`
`media`	The media container.	`::part(media)`
`header`	The header container.	`::part(header)`
`content`	The content container.	`::part(content)`
`footer`	The footer container.	`::part(footer)`

CSS Custom Properties

Name	Description	Default
`--afp-card-padding`	The padding inside the card.	`--afp-space-m`
`--afp-card-width`	The width of the card.	`100%`
`--afp-card-media-height`	The height of the card media.	`15rem`
`--afp-card-gap`	The gap between card sections.	`--afp-space-2xs`
`--afp-card-border-radius`	The border radius of the card.	`--afp-border-radius-m`
`--afp-card-animation`	The animation for the card loading skeleton.	`afp-shimmer 1.5s infinite linear`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-icon

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/card/card.js';

Card

Examples #

Variants #

Appearances #

Loading #

With Header #

With Footer #

With Media #

Customizing #

User Settings

Properties

Slots

CSS Parts

CSS Custom Properties

Dependencies

Importing