@adobe/coral-spectrum
Version:
Coral Spectrum is a JavaScript library of Web Components following Spectrum design patterns.
585 lines (547 loc) • 28.2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Coral.Card</title>
<script>document.addEventListener('click', function(event) {if (event.target.nodeName === 'A' || event.matchedTarget && event.matchedTarget.nodeName === 'A') {event.preventDefault();}});</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
<style>.hljs{background:#fff;font-size:12px;border-radius:4px;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;}</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const markup = document.body.querySelectorAll('.markup');
for (var i = 0; i < markup.length; i++) {
const code = markup[i].innerHTML;
const id = 'markup-code-' + i;
markup[i].insertAdjacentHTML('afterend',
'<div style="margin:10px 0">' +
'<a onclick="this.nextElementSibling.hidden = !this.nextElementSibling.hidden" class="coral-Link" href="#">Toggle markup</a>' +
'<pre hidden>' +
'<code id="'+ id +'" class="html">' +
'</code>' +
'</pre>' +
'</div>');
document.getElementById(id).textContent = code;
}
window.hljs.initHighlightingOnLoad();
});
</script>
<link rel="stylesheet" href="../css/coral.css">
<script>
document.addEventListener('DOMContentLoaded', function() {
const script = document.createElement('script');
script.src = '../js/coral.js';
script.dataset.coralIcons = '../resources/';
document.head.appendChild(script);
});
</script>
<style>
coral-card {
margin-right: 16px;
}
</style>
</head>
<body class="coral--lightest">
<main class="u-coral-margin">
<div style="position:absolute;top:16px;right:16px;">
<strong style="padding-right:8px"><span class="u-coral-hiddenS">Theme:</span></strong>
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--light'">Light</a> |
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--lightest'">Lightest</a> |
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--dark'">Dark</a> |
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--darkest'">Darkest</a>
<strong style="padding:0 8px 0 16px"><span class="u-coral-hiddenS">Scale:</span></strong>
<a href="#" class="coral-Link scale" onclick="document.body.classList.remove('coral--large')">Medium</a> |
<a href="#" class="coral-Link scale" onclick="document.body.classList.add('coral--large')">Large</a>
</div>
<h1 class="coral-Heading--XXL">Card</h1>
<h2 class="coral-Heading--M">Usage notes</h2>
<hr class="coral-Divider--L">
<p class="coral-Body--M u-coral-padding-vertical">
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.
</p>
<h2 class="coral--Heading--S">Default</h2>
<div class="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>
</div>
<h2 class="coral--Heading--S">Quiet</h2>
<div class="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 "/>
</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>
</div>
<h2 class="coral--Heading--S">With links</h2>
<div class="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>
</div>
<h2 class="coral--Heading--S">With SVG asset</h2>
<div class="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 "/>
</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 "/>
</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"/>
</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>
</div>
<h2 class="coral--Heading--S">With lots of content</h2>
<div class="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>
</div>
<h2 class="coral--Heading--S">With different asset sizes</h2>
<div class="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>
</div>
<h2 class="coral--Heading--S">Condensed</h2>
<div class="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>
</div>
<h2 class="coral--Heading--S">Inverted</h2>
<div class="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>
</div>
<h2 class="coral--Heading--S">With stacked Banners</h2>
<div class="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>
</div>
<h2 class="coral--Heading--S">Wide cards</h2>
<div class="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>
</div>
</main>
</body>
</html>