Skip to main content Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Skip to page content Show navigation section

Card (vertical)

Guidance Code Accessibility

Component demo

Interactive example

Accept Cancel
To cancel your order click cancel.
Web component React
StackBlitz
Show full code 
<ic-card-vertical
heading="Americano order"
subheading="Name: Michael"
message="Extras: Double espresso shot and oat milk."
expandable
>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
<ic-buttonvariant="icon"title="More information"slot="interaction-button">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<pathd="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</ic-button>
<ic-status-tagslot="adornment"label="In Progress"size="small"></ic-status-tag>
<svg
slot="image-mid"
class="card-image"
viewBox="0 0 1600 1250"
>
<rectfill="#ff7700"width="1600"height="1600"y="-350"/>
<polygonfill="#cc0000"points="957 450 539 900 1396 900"/>
<polygonfill="#aa0000"points="957 450 872.9 900 1396 900"/>
<polygonfill="#c50022"points="-60 900 398 662 816 900"/>
<polygonfill="#a3001b"points="337 900 398 662 816 900"/>
<polygonfill="#be0044"points="1203 546 1552 900 876 900"/>
<polygonfill="#9c0036"points="1203 546 1552 900 1162 900"/>
<polygonfill="#b80066"points="641 695 886 900 367 900"/>
<polygonfill="#960052"points="587 900 641 695 886 900"/>
<polygonfill="#b10088"points="1710 900 1401 632 1096 900"/>
<polygonfill="#8f006d"points="1710 900 1401 632 1365 900"/>
<polygonfill="#aa00aa"points="1210 900 971 687 725 900"/>
<polygonfill="#880088"points="943 900 1210 900 971 687"/>
</svg>
<div
slot="interaction-controls"
class="interaction-area"
>
<ic-buttonvariant="primary">Accept</ic-button>
<ic-buttonvariant="secondary">Cancel</ic-button>
</div>
<ic-typographyslot="expanded-content"variant="body">
    To cancel your order click cancel.
</ic-typography>
</ic-card-vertical>

Card details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name Description Default
Property clickable
Attribute clickable

Iftrue , the card will be a clickable variant, instead of static.

type: boolean - boolean | undefined
false
Property disabled
Attribute disabled

Iftrue , the card will be disabled if it is clickable.

type: boolean - boolean | undefined
false
Property expandable
Attribute expandable

Iftrue , the card will have an expandable area and expansion toggle button.

type: boolean - boolean | undefined
false
Property fullWidth
Attribute full-width

Iftrue , the card will fill the width of the container.

type: boolean - boolean | undefined
false
Property heading
Attribute heading

The heading for the card. This is required, unless a slotted heading is used.

type: string - string | undefined
Property href
Attribute href

The URL that the clickable card link points to. If set, the clickable card will render as an "a" tag, otherwise it will render as a button.

type: string - string | undefined
Property hreflang
Attribute hreflang

The human language of the linked URL.

type: string - string | undefined
""
Property message
Attribute message

The main body message of the card.

type: string - string | undefined
""
Property referrerpolicy
Attribute referrerpolicy

How much of the referrer to send when following the link.

type: ReferrerPolicy - "" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | undefined
Property rel
Attribute rel

The relationship of the linked URL as space-separated link types.

type: string - string | undefined
Property subheading
Attribute subheading

The subheading for the card.

type: string - string | undefined
Property target
Attribute target

The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).

type: string - string | undefined
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined
"inherit"
Property clickable
Attribute clickable

Iftrue , the card will be a clickable variant, instead of static.

type: boolean - boolean | undefined
Default: false
Property disabled
Attribute disabled

Iftrue , the card will be disabled if it is clickable.

type: boolean - boolean | undefined
Default: false
Property expandable
Attribute expandable

Iftrue , the card will have an expandable area and expansion toggle button.

type: boolean - boolean | undefined
Default: false
Property fullWidth
Attribute full-width

Iftrue , the card will fill the width of the container.

type: boolean - boolean | undefined
Default: false
Property heading
Attribute heading

The heading for the card. This is required, unless a slotted heading is used.

type: string - string | undefined
Property href
Attribute href

The URL that the clickable card link points to. If set, the clickable card will render as an "a" tag, otherwise it will render as a button.

type: string - string | undefined
Property hreflang
Attribute hreflang

The human language of the linked URL.

type: string - string | undefined
Default: ""
Property message
Attribute message

The main body message of the card.

type: string - string | undefined
Default: ""
Property referrerpolicy
Attribute referrerpolicy

How much of the referrer to send when following the link.

type: ReferrerPolicy - "" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | undefined
Property rel
Attribute rel

The relationship of the linked URL as space-separated link types.

type: string - string | undefined
Property subheading
Attribute subheading

The subheading for the card.

type: string - string | undefined
Property target
Attribute target

The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).

type: string - string | undefined
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined
Default: "inherit"

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Read more about slots .


Name Description
Slot adornment
Content will be placed below the card subheading.
Slot badge
Badge component overlaying the top right of the card.
Slot expanded-content
Content will be placed below the interaction controls but will not initially be rendered.
Slot heading
Content will be placed at the top of the card to the right of the icon.
Slot icon
Content will be placed to the left of the card heading.
Slot image-mid
Content will be placed below the card heading section.
Slot image-top
Content will be placed at the top of the card above all other content.
Slot interaction-button
Content will be placed in the top right corner of the heading section.
Slot interaction-controls
Content will be placed below the card message.
Slot message
Content will be placed in the main body of the card.
Slot subheading
Content will be placed below the card heading.
Slot adornment
Content will be placed below the card subheading.
Slot badge
Badge component overlaying the top right of the card.
Slot expanded-content
Content will be placed below the interaction controls but will not initially be rendered.
Slot heading
Content will be placed at the top of the card to the right of the icon.
Slot icon
Content will be placed to the left of the card heading.
Slot image-mid
Content will be placed below the card heading section.
Slot image-top
Content will be placed at the top of the card above all other content.
Slot interaction-button
Content will be placed in the top right corner of the heading section.
Slot interaction-controls
Content will be placed below the card message.
Slot message
Content will be placed in the main body of the card.
Slot subheading
Content will be placed below the card heading.

Methods

Name Description Signature
Method setFocus
Sets focus on the card.
setFocus() => Promise<void>
Method setFocus
Sets focus on the card.
setFocus() => Promise<void>

Variants

Heading only

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-verticalheading="Americano order"></ic-card-vertical>

With icon

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-verticalheading="Americano order">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-card-vertical>

Message

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-verticalheading="Americano order"message="Extras: Double espresso shot and oat milk.">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-card-vertical>

With subheading

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-vertical
heading="Americano order"
subheading="Name: Michael"
message="Extras: Double espresso shot and oat milk."
>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-card-vertical>

Interaction button

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-vertical
heading="Americano order"
subheading="Name: Michael"
message="Extras: Double espresso shot and oat milk."
>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
<ic-buttonvariant="icon"title="More information"slot="interaction-button">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<pathd="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</ic-button>
</ic-card-vertical>

Adornment

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-vertical
heading="Americano order"
subheading="Name: Michael"
message="Extras: Double espresso shot and oat milk."
>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
<ic-status-tagslot="adornment"status="warning"label="In Progress"size="small"></ic-status-tag>
</ic-card-vertical>

Top image

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-vertical
heading="Americano order"
subheading="Name: Michael"
message="Extras: Double espresso shot and oat milk."
>
<svg
slot="image-top"
class="card-image"
viewBox="0 0 1600 1250"
xmlns="http://www.w3.org/2000/svg"
>
<rectfill="#ff7700"width="1600"height="1600"y="-350"/>
<polygonfill="#cc0000"points="957 450 539 900 1396 900"/>
<polygonfill="#aa0000"points="957 450 872.9 900 1396 900"/>
<polygonfill="#c50022"points="-60 900 398 662 816 900"/>
<polygonfill="#a3001b"points="337 900 398 662 816 900"/>
<polygonfill="#be0044"points="1203 546 1552 900 876 900"/>
<polygonfill="#9c0036"points="1203 546 1552 900 1162 900"/>
<polygonfill="#b80066"points="641 695 886 900 367 900"/>
<polygonfill="#960052"points="587 900 641 695 886 900"/>
<polygonfill="#b10088"points="1710 900 1401 632 1096 900"/>
<polygonfill="#8f006d"points="1710 900 1401 632 1365 900"/>
<polygonfill="#aa00aa"points="1210 900 971 687 725 900"/>
<polygonfill="#880088"points="943 900 1210 900 971 687"/>
</svg>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
<ic-buttonvariant="icon"title="More information"slot="interaction-button">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<pathd="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</ic-button>
<ic-status-tagslot="adornment"status="warning"label="In Progress"size="small"></ic-status-tag>
</ic-card-vertical>

Middle image

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-vertical
heading="Americano order"
subheading="Name: Michael"
message="Extras: Double espresso shot and oat milk."
>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
<ic-buttonvariant="icon"title="More information"slot="interaction-button">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<pathd="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</ic-button>
<ic-status-tagslot="adornment"status="warning"label="In Progress"size="small"></ic-status-tag>
<svg
slot="image-mid"
class="card-image"
viewBox="0 0 1600 1250"
>
<rectfill="#ff7700"width="1600"height="1600"y="-350"/>
<polygonfill="#cc0000"points="957 450 539 900 1396 900"/>
<polygonfill="#aa0000"points="957 450 872.9 900 1396 900"/>
<polygonfill="#c50022"points="-60 900 398 662 816 900"/>
<polygonfill="#a3001b"points="337 900 398 662 816 900"/>
<polygonfill="#be0044"points="1203 546 1552 900 876 900"/>
<polygonfill="#9c0036"points="1203 546 1552 900 1162 900"/>
<polygonfill="#b80066"points="641 695 886 900 367 900"/>
<polygonfill="#960052"points="587 900 641 695 886 900"/>
<polygonfill="#b10088"points="1710 900 1401 632 1096 900"/>
<polygonfill="#8f006d"points="1710 900 1401 632 1365 900"/>
<polygonfill="#aa00aa"points="1210 900 971 687 725 900"/>
<polygonfill="#880088"points="943 900 1210 900 971 687"/>
</svg>
</ic-card-vertical>

Interaction controls

Interactive example

Accept Cancel
Web component React
StackBlitz
Show full code 
<ic-card-vertical
heading="Americano order"
subheading="Name: Michael"
message="Extras: Double espresso shot and oat milk."
>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
<divslot="interaction-controls"class="interaction-area">
<ic-buttonvariant="primary">Accept</ic-button>
<ic-buttonvariant="secondary">Cancel</ic-button>
</div>
</ic-card-vertical>

Expandable

Interactive example

Accept Cancel
To cancel your order click cancel.
Web component React
StackBlitz
Show full code 
<ic-card-vertical
heading="Americano order"
subheading="Name: Michael"
message="Extras: Double espresso shot and oat milk."
expandable="true"
>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
<divslot="interaction-controls"class="interaction-area">
<ic-buttonvariant="primary">Accept</ic-button>
<ic-buttonvariant="secondary">Cancel</ic-button>
</div>
<ic-typographyslot="expanded-content"variant="body">
    To cancel your order click cancel.
</ic-typography>
</ic-card-vertical>

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-vertical
heading="Americano order"
subheading="Name: Michael"
message="Extras: Double espresso shot and oat milk."
clickable="true"
href="#"
>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-card-vertical>

Clickable button

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-vertical
id="clickable-card"
heading="Americano order"
subheading="Name: Michael"
message="Extras: Double espresso shot and oat milk."
clickable="true"
>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-card-vertical>

With badge

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-vertical
heading="Americano order"
subheading="Name: Michael"
message="Extras: Double espresso shot and oat milk."
clickable="true"
href="#"
>
<ic-badge
label="New"
slot="badge"
variant="info"
size="large"
></ic-badge>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-card-vertical>

Disabled

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-vertical
heading="Americano order"
subheading="Name: Michael"
message="Extras: Double espresso shot and oat milk."
clickable="true"
disabled="true"
>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-card-vertical>

Full width

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-vertical
heading="Americano order"
subheading="Name: Michael"
message="Extras: Double espresso shot and oat milk."
full-width="true"
clickable="true"
>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-card-vertical>

Interactive example

Web component React
StackBlitz
Show full code 
<ahref="/">
<ic-card-vertical
heading="Americano order"
subheading="Name: Michael"
message="Extras: Double espresso shot and oat milk.">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-card-vertical>
</a>

Theme

Interactive example

Accept Cancel
To cancel your order click cancel.
Web component React
StackBlitz
Show full code 
<ic-card-vertical
heading="Americano order"
subheading="Name: Michael"
message="Extras: Double espresso shot and oat milk."
theme="dark"
>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
<ic-buttonvariant="icon"title="More information"slot="interaction-button">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<pathd="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</ic-button>
<ic-status-tagslot="adornment"label="In Progress"size="small"theme="dark"></ic-status-tag>
<svg
slot="image-mid"
class="card-image"
viewBox="0 0 1600 1250"
>
<rectfill="#ff7700"width="1600"height="1600"y="-350"/>
<polygonfill="#cc0000"points="957 450 539 900 1396 900"/>
<polygonfill="#aa0000"points="957 450 872.9 900 1396 900"/>
<polygonfill="#c50022"points="-60 900 398 662 816 900"/>
<polygonfill="#a3001b"points="337 900 398 662 816 900"/>
<polygonfill="#be0044"points="1203 546 1552 900 876 900"/>
<polygonfill="#9c0036"points="1203 546 1552 900 1162 900"/>
<polygonfill="#b80066"points="641 695 886 900 367 900"/>
<polygonfill="#960052"points="587 900 641 695 886 900"/>
<polygonfill="#b10088"points="1710 900 1401 632 1096 900"/>
<polygonfill="#8f006d"points="1710 900 1401 632 1365 900"/>
<polygonfill="#aa00aa"points="1210 900 971 687 725 900"/>
<polygonfill="#880088"points="943 900 1210 900 971 687"/>
</svg>
<div
slot="interaction-controls"
class="interaction-area"
>
<ic-buttonvariant="primary">Accept</ic-button>
<ic-buttonvariant="secondary">Cancel</ic-button>
</div>
<ic-typographyslot="expanded-content"variant="body">
    To cancel your order click cancel.
</ic-typography>
</ic-card-vertical>
Last reviewed 31 May 2024 .
Accessibility Statement Privacy Policy Cookies and Storage Policy Versions
Go to S.I.S. website Go to MI5 website Go to GCHQ website
Navigated to Card (vertical) - Intelligence Community Design System