30:T605,card = ({ cellName, href, image, title, description, meta, value, imageFit, maxWidth }) => { const display = html`

${style} ${ cellName ? html`${cellName} =` : '' }

${ image ? !imageFit || imageFit === 'fit' ? html`

` : html` ` : '' }

${title} ${ description ? html`

${description}

` : '' } ${meta ? html`

${meta}

` : ''}

`; requestAnimationFrame(() => { new DotDotDot(display.querySelector('.description'), { watch: true }); }); if (value && value.then) { value .then(value => { display.value = value; display.dispatchEvent(new CustomEvent('input')); }) .catch(err => { display.outerHTML = `

${err.stack}

`; }); } else { display.value = value; } return display; }31:T837,viewof style = collapsedCSS({ title: html`

style`,
  transform: css => css.replace(/\:scope\b/g, '.' + id)
})`
:scope, :scope div, :scope a { box-sizing: border-box }
:scope a:hover { text-decoration: none }

:scope .listing-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 30px;
}
:scope .item {
  --font-size: 17px;
  border-radius: .25rem;
  background: white;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  position: relative;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1);
  transition: all .15s ease;
}
:scope .item:hover {
  box-shadow: 0 2px 8px 0 rgba(0,0,0,.2);
  transform: translateY(-1px);
}
:scope .image {
  display: block;
  width: 100%;
  border-bottom: 1px solid #e2e5e9;
}
:scope :not(img).image {
  background: white var(--src) center/var(--fit);
  padding-top: 62.5%;
  background-repeat: no-repeat;
}
:scope .body {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica, helvetica neue, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
  font-weight: 500;
  font-size: calc(var(--font-size) * .875);
  padding: 4px 8px 6px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
:scope a.title:hover,
:scope a.image:hover ~ .body a.title,
:scope a.owner:hover {
  color: #3b5fc0;
}
:scope .title {
  display: block;
  color: #1c1c1c;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
:scope .meta {
  padding-top: 8px;
  font-size: calc(var(--font-size) * .75);
  line-height: 1em;
  vertical-align: middle;
}
:scope .meta,
:scope .owner {
  color: #828282;
}
:scope .owner:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  background: var(--avatar) center/contain no-repeat;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  position: relative;
  bottom: 2px;
  margin-right: calc(.125 * var(--font-size));
  border: 0.5px solid #ccc;
}
:scope .description {
  line-height: 1.25em;
  max-height: 4.5em;
  opacity: 0.75;
  color: black;
  font-weight: normal;
}
:scope .description p {
  margin: 0;
}
`32:[]
2e:{"title":"Data Cards","cells":[{"id":0,"value":"md`\n# Data Cards\nA user-friendly way to display your data sources.
\nCard style adapted from [this notebook](https://observablehq.com/@mootari/notebook-teasers) by [Fabian Iwand](https://observablehq.com/@mootari).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"md`\nParameters:\n- \\`cellName\\`: [*optional*] name of the cell, so the user can see the name\n- \\`href\\`: the address to link to\n- \\`image\\`: [*optional*] the image to display at the top of the card\n- \\`title\\`: the title of the card\n- \\`description\\`: [*optional*] the text to display under the title\n- \\`meta\\`: [*optional*] metadata to display under the description\n- \\`value\\`: [*optional*] the value of the card to provide for use with \\`viewof\\`. Can be a \\`Promise\\`, which will be \\`await\\`ed automatically.\n- \\`imageFit\\`: [*optional*] \\`'contain'\\`, \\`'cover'\\`, or \\`'fit'\\` — how should the image be fitted to the display box?\n- \\`maxWidth\\`: [*optional*] the maximum width of the card\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"card({\n  href: 'https://duckduckgo.com',\n  image:\n    'https://pbs.twimg.com/profile_images/467502291415617536/SP8_ylk9_400x400.png',\n  title: 'DuckDuckGo',\n  description: 'The search engine that doesn’t track you.',\n  meta: [\n    userMeta({ name: 'Dax', href: 'https://spreadprivacy.com/author/dax' })\n  ],\n  imageFit: 'contain'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"dateMeta = (isoDate, rendered = new Date(isoDate).toLocaleDateString()) =>\n  html`${rendered}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"userMeta = ({ avatar, name, href }) => html`\n  \n    ${name}\n  \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"id = 'data-card-' + Math.random().toString(36).slice(2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`\n### Dependencies\n\n*[DotDotDot](https://github.com/FrDH/dotdotdot-js) is used to limit the number of lines in the description.*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"import { collapsedCSS } from '@j-f1/css-template-tag'","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"DotDotDot = import('https://bundle.run/dotdotdot-js@4.0.9?format=esm').then(\n  m => m.default\n)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}