Card

<div class="page-basic">
  <sl-card class="card-basic">
    This is just a basic card. No image, no header, and no footer. Just your content.
  </sl-card>
</div>

<style>
  .page-basic {
    background: var(--sl-color-neutral-100);
    padding: var(--ts-spacing-large);
  }
  .card-basic {
    max-width: 300px;
  }
</style>

<div class="page-basic">
  <sl-card>
    <div slot="header">Card with nested cards</div>
    <div class="nested-cards">
      <sl-card noShadow> This is a basic card with no shadow, nested inside a standard card with shadow.</sl-card>
      <sl-card noShadow> This is a basic card with no shadow, nested inside a standard card with shadow.</sl-card>
      <sl-card noShadow> This is a basic card with no shadow, nested inside a standard card with shadow.</sl-card>
    </div>
  </sl-card>
</div>

<style>
  .page-basic {
    background: var(--sl-color-neutral-100);
    padding: var(--ts-spacing-large);
  }
  .nested-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    gap: var(--sl-spacing-medium);
}
</style>

<div class="page-basic">
  <sl-card class="card-loading" loading>
    This is a basic card in a loading state.
  </sl-card>
</div>

<style>
  .page-basic {
    background: var(--sl-color-neutral-100);
    padding: var(--ts-spacing-large);
  }
  .card-loading {
    max-width: 300px;
  }
</style>

<div class="page-basic">
    <sl-card class="card-empty" emptyState>
      This is a basic card styled as an empty state container.
      <br/><br/>
      Fill it with content using the Empty State View Component!
    </sl-card>
</div>
<style>
  .page-basic {
    background: var(--sl-color-neutral-100);
    padding: var(--ts-spacing-large);
  }
  .card-empty {
    max-width: 300px;
  }
</style>

<div class="page-basic">
  <sl-card class="card-header">
    <div slot="header">
      <div class="ts-heading-7">Card title</div>
      <div class="ts-body-2">Description</div>
    </div>
    This card has a header with no additional styling applied by default.
  </sl-card>
    <sl-card class="card-header" actionHeader >
    <div slot="header">
      <div class="ts-heading-7">Card title</div>
      <div class="header-actions">
        <sl-tooltip content="Edit">
          <sl-icon-button library="fa" name="pencil"></sl-icon-button>
        </sl-tooltip>
        <sl-tooltip content="Delete">
          <sl-icon-button library="fa" name="trash"></sl-icon-button>
        </sl-tooltip>
      </div>
    </div>
    This card is using the <code>actionHeader</code> property, which applies a <code>flex/space-between</code> layout to the header.
    <br/><br/>
    To display more than one action button, wrap the buttons in a container.
  </sl-card>
</div>
<style>
  .page-basic {
    background: var(--sl-color-neutral-100);
    padding: var(--ts-spacing-large);
  }
  .card-header {
    margin: var(--sl-spacing-x-small) 0;
    width: 100%;
  }
  .header-actions * {
    margin-inline-start: var(--sl-spacing-x-small);
  }
</style>

<div class="page-basic">
  <sl-card class="card-footer">
    This card has a footer with no additional styling applied by default.
    <div slot="footer">
      <a href="#" class="ts-body-2 ts-text-link">Use for links or whatever!</a>
    </div>
  </sl-card>
  <sl-card class="card-footer" buttonFooter>
    This card is using the <code>buttonFooter</code> property, which applies a <code>flex/flex-end</code> layout and <code>8px gap</code>to footer elements.
    <div slot="footer">
      <sl-button variant="default">Default</sl-button>
      <sl-button variant="primary">Primary</sl-button>
    </div>
  </sl-card>
</div>

<style>
  .page-basic {
    background: var(--sl-color-neutral-100);
    padding: var(--ts-spacing-large);
  }
  .card-footer {
    margin: var(--sl-spacing-x-small) 0;
    width: 100%;
  }
</style>

<div class="page-basic">
  <sl-card class="card-compact" compact buttonFooter>
    <div slot="header">
      <div class="ts-heading-8">Compact card header</div>
    </div>
    This card is using the <code>compact</code> property, which reduces spacing and removes the borders between the header, body, and footer.
    <div slot="footer">
      <sl-button variant="default" size="small">Default</sl-button>
      <sl-button variant="primary" size="small">Primary</sl-button>
    </div>
  </sl-card>
</div>

<style>
  .card-compact {
    width: 400px;
  }
</style>

<sl-card class="card-image">
  <img
    slot="image"
    src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
    alt="A kitten walks towards camera on top of pallet."
  />
  This is a kitten, but not just any kitten. This kitten likes walking along pallets.
</sl-card>

<style>
  .card-image {
    max-width: 300px;
  }
</style>