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

Card (horizontal)

Guidance Code

Component demo

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-horizontal
heading="Americano order"
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>
<svg
slot="image"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1600 900"
>
<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-horizontal>

Horizontal 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 horizontal card will be a clickable variant, instead of static.

type: boolean
false
Property disabled
Attribute disabled

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

type: boolean
false
Property heading
Attribute heading

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

type: string
Property href
Attribute href

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

type: string | undefined - string
Property hreflang
Attribute hreflang

The human language of the linked URL.

type: string
""
Property message
Attribute message

The main body message of the horizontal card.

type: string
""
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"
Property rel
Attribute rel

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

type: string
Property size
Attribute size

The size of the horizontal card.

type: IcCardSizes - "extra-large" | "large" | "medium" | "small"
"medium"
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
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"
"inherit"
Property clickable
Attribute clickable

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

type: boolean
Default: false
Property disabled
Attribute disabled

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

type: boolean
Default: false
Property heading
Attribute heading

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

type: string
Property href
Attribute href

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

type: string | undefined - string
Property hreflang
Attribute hreflang

The human language of the linked URL.

type: string
Default: ""
Property message
Attribute message

The main body message of the horizontal card.

type: string
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"
Property rel
Attribute rel

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

type: string
Property size
Attribute size

The size of the horizontal card.

type: IcCardSizes - "extra-large" | "large" | "medium" | "small"
Default: "medium"
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
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"
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 badge
Badge component overlaying the top right of the horizontal card.
Slot heading
Content will be placed at the top of the horizontal card to the right of the icon.
Slot icon
Content will be placed to the left of the horizontal card heading.
Slot image
Content will be placed to the left of all other content.
Slot message
Content will be placed in the main body of the horizontal card.
Slot badge
Badge component overlaying the top right of the horizontal card.
Slot heading
Content will be placed at the top of the horizontal card to the right of the icon.
Slot icon
Content will be placed to the left of the horizontal card heading.
Slot image
Content will be placed to the left of all other content.
Slot message
Content will be placed in the main body of the horizontal card.

CSS Custom Properties

Name Description
--card-horizontal-width Width of the horizontal card
--card-horizontal-width Width of the horizontal card

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-horizontalheading="Americano order"></ic-card-horizontal>

With icon

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-horizontalheading="Americano order">
<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-horizontal>

With message

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-horizontal
heading="Americano order"
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-horizontal>

With image

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-horizontal
heading="Americano order"
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>
<svg
slot="image"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1600 900"
>
<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-horizontal>

Small

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-horizontal
heading="Americano order"
message="Extras: Double espresso shot and oat milk."
size="small"
>
<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>
<svg
slot="image"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1600 900"
>
<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-horizontal>

Large

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-horizontal
heading="Americano order"
message="Extras: Double espresso shot and oat milk. Size: Grande. Order type: Takeaway."
size="large"
>
<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>
<svg
slot="image"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1600 900"
>
<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-horizontal>

Extra large

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-horizontal
heading="Americano order"
message="Extras: Double espresso shot and oat milk. Size: Venti. Order type: Takeaway via drive-through."
size="extra-large"
>
<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>
<svg
slot="image"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1600 900"
>
<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-horizontal>

Clickable

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-horizontal
heading="Americano order"
message="Extras: Double espresso shot and oat milk."
clickable="true"
>
<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>
<svg
slot="image"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1600 900"
>
<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-horizontal>

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-horizontal
heading="Americano order"
message="Extras: Double espresso shot and oat milk."
clickable="true"
href="#"
>
<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>
<svg
slot="image"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1600 900"
>
<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-horizontal>

Interactive example

Web component React
StackBlitz
Show full code 
<ahref="/">
<ic-card-horizontal
heading="Americano order"
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>
<svg
slot="image"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1600 900"
>
<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-horizontal>
</a>

Disabled

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-horizontal
heading="Americano order"
message="Extras: Double espresso shot and oat milk."
clickable="true"
disabled="true"
>
<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>
<svg
slot="image"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1600 900"
>
<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-horizontal>

Slotted heading and message

Interactive example

Americano order Extras: Double espresso shot and oat milk.
Web component React
StackBlitz
Show full code 
<ic-card-horizontal>
<ic-typographyslot="heading"variant="h4">Americano order</ic-typography>
<ic-typographyslot="message">Extras: Double espresso shot and oat milk.</ic-typography>
<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>
<svg
slot="image"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1600 900"
>
<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-horizontal>

Theme

Interactive example

Web component React
StackBlitz
Show full code 
<ic-card-horizontal
heading="Americano order"
message="Extras: Double espresso shot and oat milk."
theme="dark"
>
<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>
<svg
slot="image"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1600 900"
>
<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-horizontal>
Last reviewed 30 August 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 (horizontal) - Intelligence Community Design System