Content Card

A versatile media card for articles, products, or resources — combines a cover image with category tagging and a clear call to action.

Preview

Building with design tokens

Design tokens are the single source of truth for every visual decision in your product.

Read more

Code

<lt-surface class="content-card" appearance="outlined" elevation="1" style="max-width: 300px; display: block;">
<img
  src="https://picsum.photos/seed/content-card/600/360"
  alt="Card cover"
  style="width: 100%; height: 170px; object-fit: cover; display: block;"
/>
<div style="padding: var(--lt-spacing-5); display: flex; flex-direction: column; gap: var(--lt-spacing-3);">
  <lt-badge content="Design"></lt-badge>
  <lt-text variant="h5" style="color: var(--lt-text-default);">Building with design tokens</lt-text>
  <lt-text variant="body-sm" style="color: var(--lt-text-subtle);">
    Design tokens are the single source of truth for every visual decision in your product.
  </lt-text>
  <lt-button variant="primary" size="sm" appearance="outlined">Read more</lt-button>
</div>
</lt-surface>

<style>
/* clip image to the surface's rounded corners */
.content-card::part(surface) {
  overflow: hidden;
  border-radius: 12px;
}
</style>

import { Surface, Badge, Text, Button } from '@latty-ds/react';
import styles from './ContentCard.module.css';

export default function ContentCard() {
return (
  <Surface className={styles.card} appearance="outlined" elevation="1" style={{ maxWidth: 300, display: 'block' }}>
    <img
      src="https://picsum.photos/seed/content-card/600/360"
      alt="Card cover"
      style={{ width: '100%', height: 170, objectFit: 'cover', display: 'block' }}
    />
    <div
      style={{ padding: 'var(--lt-spacing-5)', display: 'flex', flexDirection: 'column', gap: 'var(--lt-spacing-3)' }}
    >
      <Badge content="Design" />
      <Text variant="h5" style={{ color: 'var(--lt-text-default)' }}>
        Building with design tokens
      </Text>
      <Text variant="body-sm" style={{ color: 'var(--lt-text-subtle)' }}>
        Design tokens are the single source of truth for every visual decision in your product.
      </Text>
      <Button variant="primary" size="sm" appearance="outlined">
        Read more
      </Button>
    </div>
  </Surface>
);
}

/_ ContentCard.module.css _/
/_
.card::part(surface) {
overflow: hidden;
border-radius: 12px;
}
_/

<template>
<lt-surface
class="content-card"
appearance="outlined"
elevation="1"
style="max-width: 300px; display: block;"

>

  <img
    src="https://picsum.photos/seed/content-card/600/360"
    alt="Card cover"
    style="width: 100%; height: 170px; object-fit: cover; display: block;"
  />
  <div style="padding: var(--lt-spacing-5); display: flex; flex-direction: column; gap: var(--lt-spacing-3);">
    <lt-badge content="Design"></lt-badge>
    <lt-text variant="h5" style="color: var(--lt-text-default);">Building with design tokens</lt-text>
    <lt-text variant="body-sm" style="color: var(--lt-text-subtle);">
      Design tokens are the single source of truth for every visual decision in your product.
    </lt-text>
    <lt-button variant="primary" size="sm" appearance="outlined">Read more</lt-button>
  </div>

</lt-surface>
</template>

<style scoped>
.content-card::part(surface) {
  overflow: hidden;
  border-radius: 12px;
}
</style>

Components

lt-surface, lt-badge, lt-text, lt-button