OLYSENSE Design System

Examples

Basic cards can display any content with no header or footer.

This is just a basic card. no header, and no footer. Just your content.

<ods-card class="card-basic">
  This is just a basic card. no header, and no footer. Just your content.
</ods-card>

<style>
  .card-basic {
    max-width: 450px;
    font-size: var(--ods-sys-font-size-base);
  }
</style>

import { OdsCard } from '@ods/components/react.card';

const css = `
  /* Only used for documentation */
  .card-basic {
    max-width: 450px;
    font-size: var(--ods-sys-font-size-base);
  }
`;

const Example = () => {
  return (
    <>
      <OdsCard className="card-basic">
        This is just a basic card. no header, and no footer. Just your content.
      </OdsCard>

      <style>{css}</style>
    </>
  )
}

export default Example;

Headers can be used to display titles and more.

Card Title

Card Description

Edit card

Delete card

This card has a header. You can put all sorts of things in it!

<ods-card class="card-header">
  <div slot="header">
    <div ods-layout="block">
      <h3>Card Title</h3>
      <span>Card Description</span>
    </div>
    <ods-dropdown>
      <ods-icon-button slot="trigger" name="more-horiz" variant="ghost" label="Card Settings"></ods-icon-button>
      <ods-menu>
        <ods-menu-item value="edit">Edit card</ods-menu-item>
        <ods-menu-item value="delete">Delete card</ods-menu-item>
      </ods-menu>
    </ods-dropdown>
  </div>

  This card has a header. You can put all sorts of things in it!
</ods-card>

<style>
  .card-header {
    max-width: 450px;
    font-size: var(--ods-sys-font-size-base);
  }

  .card-header [slot='header'] {
    display: flex;
    align-items: start;
    justify-content: space-between;
  }

  .card-header h3 {
    margin: 0;
    font-weight: var(--ods-sys-font-weight-semibold);
    font-size: var(--ods-sys-font-size-lg);
  }

  .card-header span {
    margin: 0;
    font-size: var(--ods-sys-font-size-md);
  }
</style>

import { OdsCard } from '@ods/components/react.card';
import { OdsIconButton } from '@ods/components/react.icon-button';
import { OdsMenu } from '@ods/components/react.menu';
import { OdsMenuItem } from '@ods/components/react.menu-item';
import { OdsDropdown } from '@ods/components/react.dropdown';

const css = `
  /* Only used for documentation */
  .card-header {
    max-width: 450px;
    font-size: var(--ods-sys-font-size-base);
  }

  .card-header [slot='header'] {
    display: flex;
    align-items: start;
    justify-content: space-between;
  }

  .card-header h3 {
    margin: 0;
    font-weight: var(--ods-sys-font-weight-semibold);
    font-size: var(--ods-sys-font-size-lg);
  }
`;

const Example = () => {
  return (
    <>
      <OdsCard className="card-header">
        <div slot="header">
          <div ods-layout="block">
            <h3>Card Title</h3>
            <span>Card Description</span>
          </div>
          <OdsDropdown>
            <OdsIconButton slot="trigger" name="more-horiz" variant="ghost" label="Card Settings"></OdsIconButton>
            <OdsMenu>
              <OdsMenuItem value="edit">Edit card</OdsMenuItem>
              <OdsMenuItem value="delete">Delete card</OdsMenuItem>
            </OdsMenu>
          </OdsDropdown>
        </div>

        This card has a header. You can put all sorts of things in it!
      </OdsCard>

      <style>{css}</style>
    </>
  )
}

export default Example;

Footers can be used to display actions, summaries, or other relevant content.

This card has a footer. You can put all sorts of things in it!

Delete

Edit

<ods-card class="card-footer">
  This card has a footer. You can put all sorts of things in it!

  <div slot="footer">
    <ods-button variant="secondary">Delete</ods-button>
    <ods-button variant="primary">Edit</ods-button>
  </div>
</ods-card>

<style>
  .card-footer {
    max-width: 450px;
    --border-footer-width: 0;
    font-size: var(--ods-sys-font-size-base);
  }

  .card-footer [slot='footer'] {
    display: flex;
    gap: var(--ods-sys-space-8);
    justify-content: end;
    align-items: center;
  }
</style>

import { OdsCard } from '@ods/components/react.card';
import { OdsButton } from '@ods/components/react.button';

const css = `
  /* Only used for documentation */
  .card-footer {
    max-width: 450px;
    font-size: var(--ods-sys-font-size-base);
  }

  .card-footer [slot='footer'] {
    display: flex;
    gap: var(--ods-sys-space-8);
    justify-content: end;
    align-items: center;
  }
`;

const Example = () => {
  return (
    <>
      <OdsCard className="card-footer">
        This card has a footer. You can put all sorts of things in it!

        <div slot="footer">
          <OdsButton variant="secondary">Delete</OdsButton>
          <OdsButton variant="primary">Edit</OdsButton>
        </div>
      </OdsCard>

      <style>{css}</style>
    </>
  )
}

export default Example;

Importing

import '@ods/components/web.card';

Note: You only need to import a web component once in your code, as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.

Slots

Name	Description
(default)	The card's main content.
header	An optional header for the card.
footer	An optional footer for the card.

Parts

Name	Description
base	The component's base wrapper.
header	The container that wraps the card's header.
content	The container that wraps the card's main content.
footer	The container that wraps the card's footer.

Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Use cards to group and organize content
Use cards to visually separate different types of content within an application page
Use cards to host forms
Use cards to host Charts, Graphs
Cards can be used in list and grid layouts

Use cards as
Use more than one primary action button within a card
Nest cards within cards
Use Cards as Alerts, Dialogs or Menus

Card

Examples

Basic

Card with Header

Card Title

Card with Footer

Importing

Slots

Parts

Usage

Do

Dont