Card (vertical)
Card (vertical)
Component demo
Interactive example
Americano order
<ic-card-verticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."><svgslot="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"><svgslot="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><svgslot="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><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>
<IcCardVerticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."className={classes.card}><SlottedSVGslot="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"/></SlottedSVG><IcButtonvariant="icon"title="More information"slot="interaction-button"><SlottedSVGslot="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"/></SlottedSVG></IcButton><IcStatusTagslot="adornment"label="In Progress"size="small"/><SlottedSVGslot="image-mid"viewBox="0 0 1600 1250"className={classes.cardImage}><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"/></SlottedSVG><divslot="interaction-controls"className={classes.interactionArea}><IcButtonvariant="primary">Accept</IcButton><IcButtonvariant="secondary">Cancel</IcButton></div><IcTypographyslot="expanded-content"variant="body"> To cancel your order click cancel.</IcTypography></IcCardVertical>
Card details
Props
All components also accept native properties supported by the DOM, such asclassName
and
style
.
|
|
|
---|---|---|
|
If |
|
|
If |
|
|
If |
|
|
If |
|
|
The heading for the card. This is required, unless a slotted heading is used. |
|
|
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. |
|
|
The human language of the linked URL. |
|
|
The main body message of the card. |
|
|
How much of the referrer to send when following the link. |
|
|
The relationship of the linked URL as space-separated link types. |
|
|
The subheading for the card. |
|
|
The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe). |
|
|
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. |
|
If |
If |
If |
If |
The heading for the card. This is required, unless a slotted heading is used. |
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. |
The human language of the linked URL. |
The main body message of the card. |
How much of the referrer to send when following the link. |
The relationship of the linked URL as space-separated link types. |
The subheading for the card. |
The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe). |
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. |
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.
|
|
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Methods
|
|
|
---|---|---|
|
|
|
|
Variants
Heading only
Interactive example
Americano order
<ic-card-verticalheading="Americano order"></ic-card-vertical>
<IcCardVerticalheading="Americano order"></IcCardVertical>
With icon
Interactive example
Americano order
<ic-card-verticalheading="Americano order"><svgslot="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>
<IcCardVerticalheading="Americano order"><SlottedSVGslot="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"/></SlottedSVG></IcCardVertical>
Message
Interactive example
Americano order
<ic-card-verticalheading="Americano order"message="Extras: Double espresso shot and oat milk."><svgslot="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>
<IcCardVerticalheading="Americano order"message="Extras: Double espresso shot and oat milk."><SlottedSVGslot="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"/></SlottedSVG></IcCardVertical>
With subheading
Interactive example
Americano order
<ic-card-verticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."><svgslot="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>
<IcCardVerticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."><SlottedSVGslot="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"/></SlottedSVG></IcCardVertical>
Interaction button
Interactive example
Americano order
<ic-card-verticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."><svgslot="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"><svgslot="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>
<IcCardVerticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."><SlottedSVGslot="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"/></SlottedSVG><IcButtonvariant="icon"title="More information"slot="interaction-button"><SlottedSVGslot="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"/></SlottedSVG></IcButton></IcCardVertical>
Adornment
Interactive example
Americano order
<ic-card-verticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."><svgslot="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>
<IcCardVerticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."><SlottedSVGslot="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"/></SlottedSVG><IcStatusTagslot="adornment"status="warning"label="In Progress"size="small"/></IcCardVertical>
Top image
Interactive example
Americano order
<ic-card-verticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."><svgslot="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><svgslot="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"><svgslot="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>
<IcCardVerticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."className={classes.card}><SlottedSVGslot="image-top"className={classes.cardImage}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"/></SlottedSVG><SlottedSVGslot="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"/></SlottedSVG><IcButtonvariant="icon"title="More information"slot="interaction-button"><SlottedSVGslot="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"/></SlottedSVG></IcButton><IcStatusTagslot="adornment"status="warning"label="In Progress"size="small"/></IcCardVertical>
Middle image
Interactive example
Americano order
<ic-card-verticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."><svgslot="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"><svgslot="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><svgslot="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>
<IcCardVerticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."className={classes.card}><SlottedSVGslot="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"/></SlottedSVG><IcButtonvariant="icon"title="More information"slot="interaction-button"><SlottedSVGslot="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"/></SlottedSVG></IcButton><IcStatusTagslot="adornment"status="warning"label="In Progress"size="small"/><SlottedSVGslot="image-mid"viewBox="0 0 1600 1250"className={classes.cardImage}><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"/></SlottedSVG></IcCardVertical>
Interaction controls
Interactive example
Americano order
<ic-card-verticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."><svgslot="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>
<IcCardVerticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."><SlottedSVGslot="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"/></SlottedSVG><divslot="interaction-controls"className={classes.interactionArea}><IcButtonvariant="primary">Accept</IcButton><IcButtonvariant="secondary">Cancel</IcButton></div></IcCardVertical>
Expandable
Interactive example
Americano order
<ic-card-verticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."expandable="true"><svgslot="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>
<IcCardVerticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."expandable><SlottedSVGslot="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"/></SlottedSVG><divslot="interaction-controls"className={classes.interactionArea}><IcButtonvariant="primary">Accept</IcButton><IcButtonvariant="secondary">Cancel</IcButton></div><IcTypographyslot="expanded-content"variant="body"> To cancel your order click cancel.</IcTypography></IcCardVertical>
Clickable link
Interactive example
<ic-card-verticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."clickable="true"href="#"><svgslot="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>
<IcCardVerticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."clickablehref="#"><SlottedSVGslot="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"/></SlottedSVG></IcCardVertical>
Clickable button
Interactive example
<ic-card-verticalid="clickable-card"heading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."clickable="true"><svgslot="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>
<IcCardVerticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."clickableonClick={(ev)=>console.log(ev)}><SlottedSVGslot="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"/></SlottedSVG></IcCardVertical>
With badge
Interactive example
<ic-card-verticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."clickable="true"href="#"><ic-badgelabel="New"slot="badge"variant="info"size="large"></ic-badge><svgslot="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>
<IcCardVerticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."clickablehref="#"><IcBadgesize="large"label="New"slot="badge"variant="info"/><SlottedSVGslot="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"/></SlottedSVG></IcCardVertical>
Disabled
Interactive example
<ic-card-verticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."clickable="true"disabled="true"><svgslot="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>
<IcCardVerticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."clickabledisabled><svgslot="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></IcCardVertical>
Full width
Interactive example
<ic-card-verticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."full-width="true"clickable="true"><svgslot="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>
<IcCardVerticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."fullWidthclickable><SlottedSVGslot="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"/></SlottedSVG></IcCardVertical>
Wrapped by link
Interactive example
<ahref="/"><ic-card-verticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."><svgslot="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>
<ahref="/"><IcCardVerticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."><svgslot="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></IcCardVertical></a>
Theme
Interactive example
Americano order
<ic-card-verticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."theme="dark"><svgslot="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"><svgslot="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><svgslot="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><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>
<IcCardVerticalheading="Americano order"subheading="Name: Michael"message="Extras: Double espresso shot and oat milk."className={classes.card}theme="dark"><SlottedSVGslot="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"/></SlottedSVG><IcButtonvariant="icon"title="More information"slot="interaction-button"><SlottedSVGslot="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"/></SlottedSVG></IcButton><IcStatusTagslot="adornment"label="In Progress"size="small"theme="dark"/><SlottedSVGslot="image-mid"viewBox="0 0 1600 1250"className={classes.cardImage}><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"/></SlottedSVG><divslot="interaction-controls"className={classes.interactionArea}><IcButtonvariant="primary">Accept</IcButton><IcButtonvariant="secondary">Cancel</IcButton></div><IcTypographyslot="expanded-content"variant="body"> To cancel your order click cancel.</IcTypography></IcCardVertical>