SGDS Icon Card Component Skill

<sgds-icon-card> is a card variant where a large icon is the primary visual element. Use it for feature showcases, service listings, or any content where an icon leads the hierarchy.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Which card type?

• Large prominant icon leads the card → <sgds-icon-card> (this component)
• Photograph or image leads the card → <sgds-image-card>
• Small thumbnail beside content → <sgds-thumbnail-card>
• General mixed content → <sgds-card>

Orientation?

• Icon above content → vertical (default)
• Icon beside content → horizontal

Entire card clickable?

• Add stretchedLink — href is sourced from the <a> inside the footer slot

<!-- Basic icon card -->
<sgds-icon-card>
  <sgds-icon slot="icon" name="box-seam" size="3-xl"></sgds-icon>
  <sgds-badge variant="primary" slot="upper">New</sgds-badge>
  <span slot="subtitle">EXPLORE THE FEATURES</span>
  <span slot="title">Innovative Solutions for You</span>
  <sgds-icon-list size="sm">
    <div role="listitem"><sgds-icon size="md" name="calendar"></sgds-icon>12 September</div>
    <div role="listitem"><sgds-icon size="md" name="laptop"></sgds-icon>Online</div>
  </sgds-icon-list>
  <span slot="description">Descriptive text about this feature.</span>
  <div slot="lower" style="display: flex; flex-wrap: wrap; gap: 8px;">
    <sgds-badge variant="neutral" outlined>Design</sgds-badge>
    <sgds-badge variant="neutral" outlined>Research</sgds-badge>
  </div>
  <sgds-link slot="footer">
    <a href="#">Register now <sgds-icon name="arrow-right"></sgds-icon></a>
  </sgds-link>
</sgds-icon-card>

<!-- Horizontal orientation -->
<sgds-icon-card orientation="horizontal">
  <sgds-icon slot="icon" name="box-seam" size="3-xl"></sgds-icon>
  <span slot="title">Horizontal Icon Card</span>
  <span slot="description">Icon is placed beside the content.</span>
  <sgds-link slot="footer"><a href="#">Learn more</a></sgds-link>
</sgds-icon-card>

<!-- Stretched link -->
<sgds-icon-card stretchedLink>
  <sgds-icon slot="icon" name="star" size="3-xl"></sgds-icon>
  <span slot="title">Clickable Card</span>
  <sgds-link slot="footer"><a href="/destination">Go somewhere</a></sgds-link>
</sgds-icon-card>

<!-- No padding -->
<sgds-icon-card noPadding>
  <sgds-icon slot="icon" name="placeholder" size="3-xl"></sgds-icon>
  <span slot="title">No Padding Card</span>
</sgds-icon-card>

API Summary

Attribute	Type	Default	Purpose
orientation	vertical | horizontal	vertical	Icon above or beside content
stretchedLink	boolean	false	Makes entire card a link; href sourced from footer slot anchor
noPadding	boolean	false	Removes internal card padding
disabled	boolean	false	Applies disabled styling
hideBorder	boolean	false	Removes the card border
tinted	boolean	false	Applies a tinted background

Slots

Slot	Purpose
icon	Icon element — use <sgds-icon size="3-xl"> for the primary icon
upper	Above subtitle (e.g. a badge)
subtitle	Subtitle text
title	Card title
(default)	Content below title (e.g. <sgds-icon-list>)
description	Descriptive paragraph text
lower	Below description; use for tags/badges
footer	Footer area — place <sgds-link> here for the card CTA
link	Deprecated since 3.3.2 — use footer instead

Events

None.

---

For AI agents:

1. Always use size="3-xl" on the <sgds-icon> in the icon slot for the standard icon card appearance.
2. Place the CTA in the footer slot using <sgds-link> — the link slot is deprecated since 3.3.2.
3. For stretchedLink, the href is sourced from the <a> tag inside the footer slot.
4. lower slot is the correct place for tag badges below the description.
5. <sgds-icon-list> in the default slot (between title and description) is the standard pattern for metadata like dates and locations.
6. There are no custom events or public methods on this component.