Card
Usage notes
Cards group information into flexible containers that allow users to browse a collection of related items and actions. They show a taste of information and reveal more details upon interaction.
Default
Toggle markup
<coral-card fixedwidth="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/400/400/any">
</coral-card-asset>
</coral-card>
<coral-card fixedwidth="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/400/600/any">
</coral-card-asset>
<coral-card-overlay>
<div class="u-coral-padding">
<coral-card-context>OVERLAY Only</coral-card-context>
</div>
</coral-card-overlay>
</coral-card>
<coral-card fixedwidth="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/400/400/any">
</coral-card-asset>
<coral-card-overlay>
<div class="u-coral-padding">
<coral-card-context>Downloads</coral-card-context>
</div>
</coral-card-overlay>
<coral-card-content>
<coral-card-title>Girl's eye</coral-card-title>
<coral-card-subtitle>Girl's lips</coral-card-subtitle>
<coral-card-propertylist>
<coral-card-property icon="comment" icontitle="Comments: ">2</coral-card-property>
</coral-card-propertylist>
<coral-card-propertylist>
<coral-card-property>2 weeks ago</coral-card-property>
</coral-card-propertylist>
</coral-card-content>
</coral-card>
Quiet
Toggle markup
<a href="http://www.adobe.com" style="display:inline-block;color:inherit;">
<coral-card fixedwidth="" variant="quiet">
<coral-card-asset>
<img alt="" src="https://placeimg.com/807/595/any">
</coral-card-asset>
<coral-card-content>
<coral-card-context>Card with surrounding link</coral-card-context>
<coral-card-title>Card Title</coral-card-title>
<coral-card-propertylist>
<coral-card-property>IMAGE</coral-card-property>
<coral-card-property>807 x 595</coral-card-property>
<coral-card-property>45.7 KB</coral-card-property>
</coral-card-propertylist>
<coral-card-propertylist>
<coral-card-property icon="add" icontitle="Add"></coral-card-property>
<coral-card-property icon="remove" icontitle="Remove"></coral-card-property>
<coral-card-property icon="comment" icontitle="Comments: ">3</coral-card-property>
</coral-card-propertylist>
</coral-card-content>
</coral-card>
</a>
<coral-card fixedwidth="" variant="quiet">
<coral-card-asset>
<img alt="" src="https://placeimg.com/60/250/any">
</coral-card-asset>
<coral-card-content>
<coral-card-context>Asset description</coral-card-context>
<coral-card-title>Asset Name (low resolution)</coral-card-title>
</coral-card-content>
</coral-card>
<coral-card fixedwidth="" stacked="" variant="quiet">
<coral-card-asset>
<div style="background-color: purple;">
<svg style="width:100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 850.39 850.39">
<g>
<polygon fill="white" points="520.536,774.357 466.205,95.932 394.274,492 352.25,492 332.854,388.269 308.396,492 66,492 66,485 302.855,485
333.645,354.413 358.063,485 388.431,485 468.901,41.912 523.155,719.381 564.632,485 791,485 791,492 570.502,492 "></polygon>
</g>
</svg>
</div>
</coral-card-asset>
<coral-card-content>
<coral-card-context>Card with SVG content</coral-card-context>
<coral-card-title>Card Title</coral-card-title>
<coral-card-description>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor justo vitae luctus commodo. Cras dolor erat, pulvinar eget vehicula non, consectetur vel sem. Nam pharetra scelerisque pharetra. Vestibulum id hendrerit tortor.</coral-card-description>
</coral-card-content>
</coral-card>
With links
Toggle markup
<a href="http://www.adobe.com" style="display:inline-block;color:inherit;">
<coral-card fixedwidth="" stacked="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/807/595/any">
</coral-card-asset>
<coral-card-content>
<coral-card-context>Card with surrounding link</coral-card-context>
<coral-card-title>Card Title</coral-card-title>
<coral-card-propertylist>
<coral-card-property>IMAGE</coral-card-property>
<coral-card-property>807 x 595</coral-card-property>
<coral-card-property>45.7 KB</coral-card-property>
</coral-card-propertylist>
<coral-card-propertylist>
<coral-card-property icon="add" icontitle="Add"></coral-card-property>
<coral-card-property icon="remove" icontitle="Remove"></coral-card-property>
<coral-card-property icon="comment" icontitle="Comments: ">3</coral-card-property>
</coral-card-propertylist>
</coral-card-content>
</coral-card>
</a>
<a href="http://www.adobe.com" style="display:inline-block;color:inherit;">
<coral-card fixedwidth="" stacked="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/400/595/any">
</coral-card-asset>
<coral-card-overlay>
<div class="u-coral-padding">
<coral-card-context>Downloads</coral-card-context>
</div>
</coral-card-overlay>
<coral-card-content>
<coral-card-title>Card without context</coral-card-title>
</coral-card-content>
</coral-card>
</a>
<coral-card fixedwidth="" stacked="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/400/400/any">
</coral-card-asset>
<coral-card-content>
<coral-card-context>Page description</coral-card-context>
<coral-card-title><a href="#" class="coral-Link">Page title (link)</a></coral-card-title>
<coral-card-propertylist>
<coral-card-property icon="add" icontitle="Add"></coral-card-property>
<coral-card-property icon="remove" icontitle="Remove"></coral-card-property>
<coral-card-property icon="comment" icontitle="Comments: ">3</coral-card-property>
</coral-card-propertylist>
</coral-card-content>
</coral-card>
With SVG asset
Toggle markup
<coral-card fixedwidth="" stacked="">
<coral-card-asset>
<div style="background-color: purple;">
<svg style="width:100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 850.39 850.39">
<g>
<polygon fill="white" points="520.536,774.357 466.205,95.932 394.274,492 352.25,492 332.854,388.269 308.396,492 66,492 66,485 302.855,485
333.645,354.413 358.063,485 388.431,485 468.901,41.912 523.155,719.381 564.632,485 791,485 791,492 570.502,492 "></polygon>
</g>
</svg>
</div>
</coral-card-asset>
<coral-card-content>
<coral-card-context>Card with SVG content</coral-card-context>
<coral-card-title>Card Title</coral-card-title>
<coral-card-description>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor justo vitae luctus commodo. Cras dolor erat, pulvinar eget vehicula non, consectetur vel sem. Nam pharetra scelerisque pharetra. Vestibulum id hendrerit tortor.</coral-card-description>
</coral-card-content>
</coral-card>
<coral-card fixedwidth="" stacked="">
<coral-card-asset>
<div class="u-coral-clearFix" style="background: #7cae4a; display: table;">
<div style="width: 65%; display: table-cell; vertical-align: middle; background: #7cae4a;">
<svg style="width:100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 850.39 850.39">
<g>
<polygon fill="white" points="520.536,774.357 466.205,95.932 394.274,492 352.25,492 332.854,388.269 308.396,492 66,492 66,485 302.855,485
333.645,354.413 358.063,485 388.431,485 468.901,41.912 523.155,719.381 564.632,485 791,485 791,492 570.502,492 "></polygon>
</g>
</svg>
</div>
<div class="" style="width: 20%; display: table-cell; vertical-align: middle; background: #7cae4a">
<svg style="width:100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="white" d="M509.355,469.334C504.023,458.667,288,32,288,32S272,0,256,0s-32,32-32,32S7.978,464,2.644,474.667
C-2.689,485.334-2.689,512,29.311,512s453.378,0,453.378,0C514.689,512,514.689,480,509.355,469.334z M256,455.999
c-22.09,0-39.999-17.907-39.999-39.999S233.91,376.001,256,376.001c22.092,0,39.999,17.907,39.999,39.999
S278.092,455.999,256,455.999z M288,272c0,36.406-1.943,64.396-4,77.4c0,1.301-0.915,2.6-4,2.6h-48c-2.057,0-3.085-0.865-3.6-2.6
c-1.029-12.137-4.4-40.994-4.4-77.4V164.768c0-1.734,0-3.467,2.571-4.768c6.171-3.034,21.716-4,29.429-4
c10.283,0,23.771,1.833,29.43,4c2.57,1.3,2.57,3.467,2.57,4.768V272z"></path>
</svg>
</div>
</div>
</coral-card-asset>
<coral-card-content>
<coral-card-context>Card with two assets</coral-card-context>
<coral-card-title>Card Title</coral-card-title>
</coral-card-content>
</coral-card>
With lots of content
Toggle markup
<coral-card fixedwidth="" stacked="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/300/300/any">
</coral-card-asset>
<coral-card-content>
<coral-card-context>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra ut urna at dignissim.</coral-card-context>
<coral-card-title>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra ut urna at dignissim. Duis sed sem accumsan, consectetur lectus sed, dapibus purus. Pellentesque sed felis sed nisi faucibus gravida.</coral-card-title>
<coral-card-propertylist>
<coral-card-property icon="add" icontitle="Add"></coral-card-property>
<coral-card-property icon="remove" icontitle="Remove"></coral-card-property>
<coral-card-property icon="comment" icontitle="Comments: ">3</coral-card-property>
<coral-card-property icon="add" icontitle="Add"></coral-card-property>
<coral-card-property icon="remove" icontitle="Remove"></coral-card-property>
<coral-card-property icon="comment" icontitle="Comments: ">3</coral-card-property>
<coral-card-property icon="add" icontitle="Add"></coral-card-property>
<coral-card-property icon="remove" icontitle="Remove"></coral-card-property>
<coral-card-property icon="comment" icontitle="Comments: ">3</coral-card-property>
<coral-card-property icon="add" icontitle="Add"></coral-card-property>
<coral-card-property icon="remove" icontitle="Remove"></coral-card-property>
<coral-card-property icon="comment" icontitle="Comments: ">3</coral-card-property>
<coral-card-property icon="add" icontitle="Add"></coral-card-property>
<coral-card-property icon="remove" icontitle="Remove"></coral-card-property>
<coral-card-property icon="comment" icontitle="Comments: ">3</coral-card-property>
</coral-card-propertylist>
</coral-card-content>
</coral-card>
With different asset sizes
Toggle markup
<coral-card fixedwidth="" stacked="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/200/300/any">
</coral-card-asset>
<coral-card-content>
<coral-card-context>Page description</coral-card-context>
<coral-card-title>Page Title</coral-card-title>
<coral-card-propertylist>
<coral-card-property icon="add" icontitle="Add"></coral-card-property>
<coral-card-property icon="remove" icontitle="Remove"></coral-card-property>
<coral-card-property icon="comment" icontitle="Comments: ">3</coral-card-property>
</coral-card-propertylist>
</coral-card-content>
</coral-card>
<coral-card fixedwidth="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/150/150/any">
</coral-card-asset>
</coral-card>
<coral-card fixedwidth="" stacked="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/60/60/any">
</coral-card-asset>
<coral-card-content>
<coral-card-context>Asset description</coral-card-context>
<coral-card-title>Asset Name (low resolution)</coral-card-title>
</coral-card-content>
</coral-card>
<coral-card fixedwidth="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/600/100/any">
</coral-card-asset>
<coral-card-content>
<coral-card-context>Wide asset</coral-card-context>
<coral-card-title>Asset Name (low resolution)</coral-card-title>
</coral-card-content>
</coral-card>
<coral-card fixedwidth="" stacked="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/60/250/any">
</coral-card-asset>
<coral-card-content>
<coral-card-context>Asset description</coral-card-context>
<coral-card-title>Asset Name (low resolution)</coral-card-title>
</coral-card-content>
</coral-card>
<coral-card fixedwidth="" stacked="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/250/250/any">
</coral-card-asset>
<coral-card-content>
<coral-card-context>Asset description</coral-card-context>
<coral-card-title>Asset Name (low resolution)</coral-card-title>
</coral-card-content>
</coral-card>
Condensed
Toggle markup
<coral-card fixedwidth="" variant="condensed" stacked="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/400/400/any">
</coral-card-asset>
<coral-card-content>
<coral-card-context>Collection</coral-card-context>
<coral-card-title>Running</coral-card-title>
<coral-card-propertylist>
<coral-card-property icon="add" icontitle="Add"></coral-card-property>
<coral-card-property icon="remove" icontitle="Remove"></coral-card-property>
<coral-card-property icon="comment" icontitle="Comments: ">3</coral-card-property>
</coral-card-propertylist>
</coral-card-content>
</coral-card>
<coral-card fixedwidth="" variant="condensed" stacked="">
<coral-card-asset>
</coral-card-asset>
<coral-card-content>
<coral-card-context>Empty Card</coral-card-context>
<coral-card-title>Card Title</coral-card-title>
</coral-card-content>
</coral-card>
<coral-card fixedwidth="" variant="condensed" stacked="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/400/600/any">
</coral-card-asset>
<coral-card-content>
<coral-card-title>Card Title</coral-card-title>
</coral-card-content>
</coral-card>
Inverted
Toggle markup
<coral-card fixedwidth="" variant="inverted" stacked="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/400/400/any">
</coral-card-asset>
<coral-card-content>
<coral-card-context>Collection</coral-card-context>
<coral-card-title>Running</coral-card-title>
<coral-card-propertylist>
<coral-card-property icon="add" icontitle="Add"></coral-card-property>
<coral-card-property icon="remove" icontitle="Remove"></coral-card-property>
<coral-card-property icon="comment" icontitle="Comments: ">3</coral-card-property>
</coral-card-propertylist>
</coral-card-content>
</coral-card>
<coral-card fixedwidth="" variant="inverted" stacked="">
<coral-card-asset>
</coral-card-asset>
<coral-card-content>
<coral-card-context>Empty Card</coral-card-context>
<coral-card-title>Card Title</coral-card-title>
</coral-card-content>
</coral-card>
<coral-card fixedwidth="" variant="inverted" stacked="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/400/600/any">
</coral-card-asset>
<coral-card-content>
<coral-card-title>Card Title</coral-card-title>
</coral-card-content>
</coral-card>
With stacked Banners
Toggle markup
<coral-card assetwidth="400" assetheight="400" variant="default" fixedwidth="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/400/400/any">
</coral-card-asset>
<coral-card-info>
<coral-alert variant="error">
<coral-alert-header>Error</coral-alert-header>
<coral-alert-content>Asset has expired.</coral-alert-content>
</coral-alert>
<coral-alert variant="info">
<coral-alert-header>Info</coral-alert-header>
<coral-alert-content>Asset is published.</coral-alert-content>
</coral-alert>
</coral-card-info>
<coral-card-overlay>
<div class="u-coral-padding">
<coral-card-context>Downloads</coral-card-context>
</div>
</coral-card-overlay>
<coral-card-content>
<coral-card-context>Image</coral-card-context>
<coral-card-title>Girl's eye</coral-card-title>
<coral-card-propertylist>
<coral-card-property icon="VisibilityOff" icontitle="Visibility: Off"></coral-card-property>
<coral-card-property icon="LockClosed" icontitle="Locked"></coral-card-property>
<coral-card-property icon="comment" icontitle="Comments: ">3</coral-card-property>
</coral-card-propertylist>
<coral-card-propertylist>
<coral-card-property>2 weeks ago</coral-card-property>
</coral-card-propertylist>
</coral-card-content>
</coral-card>
<coral-card assetwidth="400" assetheight="400" variant="inverted" fixedwidth="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/400/400/any">
</coral-card-asset>
<coral-card-info>
<coral-alert variant="warning">
<coral-alert-header>Warning</coral-alert-header>
<coral-alert-content>Asset will expire.</coral-alert-content>
</coral-alert>
<coral-alert variant="warning">
<coral-alert-header>Warning</coral-alert-header>
<coral-alert-content>Asset will expire.</coral-alert-content>
</coral-alert>
<coral-alert variant="warning">
<coral-alert-header>Warning</coral-alert-header>
<coral-alert-content>Asset will expire.</coral-alert-content>
</coral-alert>
<coral-alert variant="warning">
<coral-alert-header>Warning</coral-alert-header>
<coral-alert-content>Asset will expire.</coral-alert-content>
</coral-alert>
<coral-alert variant="warning">
<coral-alert-header>Warning</coral-alert-header>
<coral-alert-content>Asset will expire.</coral-alert-content>
</coral-alert>
<coral-alert variant="warning">
<coral-alert-header>Warning</coral-alert-header>
<coral-alert-content>Asset will expire.</coral-alert-content>
</coral-alert>
<coral-alert variant="warning">
<coral-alert-header>Warning</coral-alert-header>
<coral-alert-content>Asset will expire.</coral-alert-content>
</coral-alert>
</coral-card-info>
<coral-card-overlay>
<div class="u-coral-padding">
<coral-card-context>Downloads</coral-card-context>
</div>
</coral-card-overlay>
<coral-card-content>
<coral-card-context>Image</coral-card-context>
<coral-card-title>Girl's eye</coral-card-title>
<coral-card-propertylist>
<coral-card-property icon="VisibilityOff" icontitle="Visibility: Off"></coral-card-property>
<coral-card-property icon="LockClosed" icontitle="Locked"></coral-card-property>
<coral-card-property icon="comment" icontitle="Comments: ">3</coral-card-property>
</coral-card-propertylist>
<coral-card-propertylist>
<coral-card-property>2 weeks ago</coral-card-property>
</coral-card-propertylist>
</coral-card-content>
</coral-card>
<coral-card assetwidth="400" assetheight="400" variant="default" fixedwidth="">
<coral-card-asset>
<img alt="" src="https://placeimg.com/400/400/any">
</coral-card-asset>
<coral-card-info>
<coral-tag color="yellow">Yellow Tag</coral-tag>
<coral-alert variant="error">
<coral-alert-header>Error</coral-alert-header>
<coral-alert-content>Asset has expired.</coral-alert-content>
</coral-alert>
<coral-alert variant="info">
<coral-alert-header>INFO</coral-alert-header>
<coral-alert-content>Workflow has started.</coral-alert-content>
</coral-alert>
</coral-card-info>
<coral-card-content>
<coral-card-context>Image</coral-card-context>
<coral-card-title>Girl's eye</coral-card-title>
<coral-card-propertylist>
<coral-card-property icon="VisibilityOff" icontitle="Visibility: Off"></coral-card-property>
<coral-card-property icon="LockClosed" icontitle="Locked"></coral-card-property>
<coral-card-property icon="comment" icontitle="Comments: ">3</coral-card-property>
</coral-card-propertylist>
<coral-card-propertylist>
<coral-card-property>2 weeks ago</coral-card-property>
</coral-card-propertylist>
</coral-card-content>
</coral-card>
Wide cards
Toggle markup
<div style="max-width:400px">
<coral-card>
<coral-card-asset>
<img alt="" src="https://placeimg.com/400/400/any">
</coral-card-asset>
<coral-card-overlay>
<div class="u-coral-padding">
<coral-card-context>Downloads</coral-card-context>
</div>
</coral-card-overlay>
<coral-card-content>
<coral-card-title>Girl's eye</coral-card-title>
<coral-card-subtitle>Girl's lips</coral-card-subtitle>
<coral-card-propertylist>
<coral-card-property icon="comment" icontitle="Comments: ">2</coral-card-property>
</coral-card-propertylist>
<coral-card-propertylist>
<coral-card-property>2 weeks ago</coral-card-property>
</coral-card-propertylist>
</coral-card-content>
</coral-card>
</div>