OLYSENSE Design System

Disinfection station complete

<ods-stats-card id="stats-card-basic-example">
  <div slot="count-region">
    <div class="stats-card-count-container">
      <span class="stats-card-count">5</span>
      <div class="stats-card-count-label-container">
        <span class="stats-card-count-label">Disinfection</span>
        <span class="stats-card-count-sub-label">station complete</span>
      </div>
    </div>
  </div>
  <div slot="status-region">
    <div class="stats-card-status-container">
      <div class="stats-card-status-graphic">
        <ods-icon class="text-xl" name="check-circle-filled"></ods-icon>
      </div>
    </div>
  </div>
</ods-stats-card>

<style>
  /* The stats-card-basic-example id is used to scope styles. It can be removed if scoping is not needed */
  #stats-card-basic-example .stats-card-count-container {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ods-sys-space-8);
    align-items: center;

    font-size: var(--ods-sys-font-size-base);
    font-weight: var(--ods-sys-font-weight-regular);
  }

  #stats-card-basic-example .stats-card-count {
    font-size: var(--ods-sys-font-size-3xl);
    font-weight: var(--ods-sys-font-weight-semibold);
  }

  #stats-card-basic-example .stats-card-count-label-container {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: var(--ods-sys-space-0);
  }

  #stats-card-basic-example .stats-card-status-container .stats-card-status-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ods-sys-space-8);
    border-radius: var(--ods-sys-border-radius-md);
    background-color: var(--ods-sys-color-status-success-muted);
    width: 2.75rem;
    height: 2.75rem;

    color: var(--ods-sys-color-on-status-success-muted);
  }

  #stats-card-basic-example .stats-card-count-label-container .stats-card-count-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
  }

  #stats-card-basic-example .stats-card-count-label-container .stats-card-count-sub-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
    font-size: var(--ods-sys-font-size-sm);
  }

  #stats-card-basic-example .stats-card-status-container {
    display: flex;
    gap: var(--ods-sys-space-16);
    align-items: center;

    font-size: var(--ods-sys-font-size-md);
    font-weight: var(--ods-sys-font-weight-semibold);
  }

</style>

import { OdsStatsCard } from '@ods/components/react.stats-card';
import { OdsIcon } from '@ods/components/react.icon';

const css = `
/* The stats-card-basic-example id is used to scope styles. It can be removed if scoping is not needed */
  #stats-card-basic-example .stats-card-count-container {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ods-sys-space-8);
    align-items: center;

    font-size: var(--ods-sys-font-size-base);
    font-weight: var(--ods-sys-font-weight-regular);
  }

  #stats-card-basic-example .stats-card-count {
    font-size: var(--ods-sys-font-size-3xl);
    font-weight: var(--ods-sys-font-weight-semibold);
  }

  #stats-card-basic-example .stats-card-count-label-container {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: var(--ods-sys-space-0);
  }

  #stats-card-basic-example .stats-card-status-container .stats-card-status-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ods-sys-space-8);
    border-radius: var(--ods-sys-border-radius-md);
    background-color: var(--ods-sys-color-status-success-muted);
    width: 2.75rem;
    height: 2.75rem;

    color: var(--ods-sys-color-on-status-success-muted);
  }

  #stats-card-basic-example .stats-card-count-label-container .stats-card-count-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
  }

  #stats-card-basic-example .stats-card-count-label-container .stats-card-count-sub-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
    font-size: var(--ods-sys-font-size-sm);
  }

  #stats-card-basic-example .stats-card-status-container {
    display: flex;
    gap: var(--ods-sys-space-16);
    align-items: center;

    font-size: var(--ods-sys-font-size-md);
    font-weight: var(--ods-sys-font-weight-semibold);
  }
`;

const Example = () => {
  return (
    <>
      <OdsStatsCard id="stats-card-basic-example">
        <div slot="count-region">
          <div className="stats-card-count-container">
            <span className="stats-card-count">5</span>
            <div className="stats-card-count-label-container">
              <span className="stats-card-count-label">Disinfection</span>
              <span className="stats-card-count-sub-label">station complete</span>
            </div>
          </div>
        </div>
        <div slot="status-region">
          <div className="stats-card-status-container">
            <div className="stats-card-status-graphic">
              <OdsIcon className="text-xl" name="check-circle-filled"></OdsIcon>
            </div>
          </div>
        </div>
      </OdsStatsCard>

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

export default Example;

Disinfection station complete

<ods-stats-card id="stats-card-checked-example" checked>
  <div slot="count-region">
    <div class="stats-card-count-container">
      <span class="stats-card-count">5</span>
      <div class="stats-card-count-label-container">
        <span class="stats-card-count-label">Disinfection</span>
        <span class="stats-card-count-sub-label">station complete</span>
      </div>
    </div>
  </div>
  <div slot="status-region">
    <div class="stats-card-status-container">
      <div class="stats-card-status-graphic">
        <ods-icon class="text-xl" name="check-circle-filled"></ods-icon>
      </div>
    </div>
  </div>
</ods-stats-card>

<style>
  /* The stats-card-checked-example id is used to scope styles. It can be removed if scoping is not needed */
  #stats-card-checked-example .stats-card-count-container {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ods-sys-space-8);
    align-items: center;

    font-size: var(--ods-sys-font-size-base);
    font-weight: var(--ods-sys-font-weight-regular);
  }

  #stats-card-checked-example .stats-card-count {
    font-size: var(--ods-sys-font-size-3xl);
    font-weight: var(--ods-sys-font-weight-semibold);
  }

  #stats-card-checked-example .stats-card-count-label-container {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: var(--ods-sys-space-0);
  }

  #stats-card-checked-example .stats-card-status-container .stats-card-status-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ods-sys-space-8);
    border-radius: var(--ods-sys-border-radius-md);
    background-color: var(--ods-sys-color-status-success-muted);
    width: 2.75rem;
    height: 2.75rem;

    color: var(--ods-sys-color-on-status-success-muted);
  }

  #stats-card-checked-example .stats-card-count-label-container .stats-card-count-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
  }

  #stats-card-checked-example .stats-card-count-label-container .stats-card-count-sub-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
    font-size: var(--ods-sys-font-size-sm);
  }

  #stats-card-checked-example .stats-card-status-container {
    display: flex;
    gap: var(--ods-sys-space-16);
    align-items: center;

    font-size: var(--ods-sys-font-size-md);
    font-weight: var(--ods-sys-font-weight-semibold);
  }
</style>

import { OdsStatsCard } from '@ods/components/react.stats-card';
import { OdsIcon } from '@ods/components/react.icon';

const css = `
/* The stats-card-checked-example id is used to scope styles. It can be removed if scoping is not needed */
  #stats-card-checked-example .stats-card-count-container {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ods-sys-space-8);
    align-items: center;

    font-size: var(--ods-sys-font-size-base);
    font-weight: var(--ods-sys-font-weight-regular);
  }

  #stats-card-checked-example .stats-card-count {
    font-size: var(--ods-sys-font-size-3xl);
    font-weight: var(--ods-sys-font-weight-semibold);
  }

  #stats-card-checked-example .stats-card-count-label-container {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: var(--ods-sys-space-0);
  }

  #stats-card-checked-example .stats-card-status-container .stats-card-status-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ods-sys-space-8);
    border-radius: var(--ods-sys-border-radius-md);
    background-color: var(--ods-sys-color-status-success-muted);
    width: 2.75rem;
    height: 2.75rem;

    color: var(--ods-sys-color-on-status-success-muted);
  }

  #stats-card-checked-example .stats-card-count-label-container .stats-card-count-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
  }

  #stats-card-checked-example .stats-card-count-label-container .stats-card-count-sub-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
    font-size: var(--ods-sys-font-size-sm);
  }

  #stats-card-checked-example .stats-card-status-container {
    display: flex;
    gap: var(--ods-sys-space-16);
    align-items: center;

    font-size: var(--ods-sys-font-size-md);
    font-weight: var(--ods-sys-font-weight-semibold);
  }
`;

const Example = () => {
  return (
    <>
      <OdsStatsCard id="stats-card-checked-example" checked>
        <div slot="count-region">
          <div className="stats-card-count-container">
            <span className="stats-card-count">5</span>
            <div className="stats-card-count-label-container">
              <span className="stats-card-count-label">Disinfection</span>
              <span className="stats-card-count-sub-label">station complete</span>
            </div>
          </div>
        </div>
        <div slot="status-region">
          <div className="stats-card-status-container">
            <div className="stats-card-status-graphic">
              <OdsIcon className="text-xl" name="check-circle-filled"></OdsIcon>
            </div>
          </div>
        </div>
      </OdsStatsCard>

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

export default Example;

Disinfection station complete

<ods-stats-card id="stats-card-disabled-example" disabled>
  <div slot="count-region">
    <div class="stats-card-count-container">
      <span class="stats-card-count">5</span>
      <div class="stats-card-count-label-container">
        <span class="stats-card-count-label">Disinfection</span>
        <span class="stats-card-count-sub-label">station complete</span>
      </div>
    </div>
  </div>
  <div slot="status-region">
    <div class="stats-card-status-container">
      <div class="stats-card-status-graphic">
        <ods-icon class="text-xl" name="check-circle-filled"></ods-icon>
      </div>
    </div>
  </div>
</ods-stats-card>

<style>
  /* The stats-card-disabled-example id is used to scope styles. It can be removed if scoping is not needed */
  #stats-card-disabled-example .stats-card-count-container {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ods-sys-space-8);
    align-items: center;

    font-size: var(--ods-sys-font-size-base);
    font-weight: var(--ods-sys-font-weight-regular);
  }

  #stats-card-disabled-example .stats-card-count {
    font-size: var(--ods-sys-font-size-3xl);
    font-weight: var(--ods-sys-font-weight-semibold);
  }

  #stats-card-disabled-example .stats-card-count-label-container {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: var(--ods-sys-space-0);
  }

  #stats-card-disabled-example .stats-card-status-container .stats-card-status-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ods-sys-space-8);
    border-radius: var(--ods-sys-border-radius-md);
    background-color: var(--ods-sys-color-status-success-muted);
    width: 2.75rem;
    height: 2.75rem;

    color: var(--ods-sys-color-on-status-success-muted);
  }

  #stats-card-disabled-example .stats-card-count-label-container .stats-card-count-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
  }

  #stats-card-disabled-example .stats-card-count-label-container .stats-card-count-sub-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
    font-size: var(--ods-sys-font-size-sm);
  }

  #stats-card-disabled-example .stats-card-status-container {
    display: flex;
    gap: var(--ods-sys-space-16);
    align-items: center;

    font-size: var(--ods-sys-font-size-md);
    font-weight: var(--ods-sys-font-weight-semibold);
  }

</style>

import { OdsStatsCard } from '@ods/components/react.stats-card';
import { OdsIcon } from '@ods/components/react.icon';

const css = `
/* The stats-card-disabled-example id is used to scope styles. It can be removed if scoping is not needed */
  #stats-card-disabled-example .stats-card-count-container {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ods-sys-space-8);
    align-items: center;

    font-size: var(--ods-sys-font-size-base);
    font-weight: var(--ods-sys-font-weight-regular);
  }

  #stats-card-disabled-example .stats-card-count {
    font-size: var(--ods-sys-font-size-3xl);
    font-weight: var(--ods-sys-font-weight-semibold);
  }

  #stats-card-disabled-example .stats-card-count-label-container {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: var(--ods-sys-space-0);
  }

  #stats-card-disabled-example .stats-card-status-container .stats-card-status-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ods-sys-space-8);
    border-radius: var(--ods-sys-border-radius-md);
    background-color: var(--ods-sys-color-status-success-muted);
    width: 2.75rem;
    height: 2.75rem;

    color: var(--ods-sys-color-on-status-success-muted);
  }

  #stats-card-disabled-example .stats-card-count-label-container .stats-card-count-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
  }

  #stats-card-disabled-example .stats-card-count-label-container .stats-card-count-sub-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
    font-size: var(--ods-sys-font-size-sm);
  }

  #stats-card-disabled-example .stats-card-status-container {
    display: flex;
    gap: var(--ods-sys-space-16);
    align-items: center;

    font-size: var(--ods-sys-font-size-md);
    font-weight: var(--ods-sys-font-weight-semibold);
  }
`;

const Example = () => {
  return (
    <>
      <OdsStatsCard id="stats-card-disabled-example" disabled>
        <div slot="count-region">
          <div className="stats-card-count-container">
            <span className="stats-card-count">5</span>
            <div className="stats-card-count-label-container">
              <span className="stats-card-count-label">Disinfection</span>
              <span className="stats-card-count-sub-label">station complete</span>
            </div>
          </div>
        </div>
        <div slot="status-region">
          <div className="stats-card-status-container">
            <div className="stats-card-status-graphic">
              <OdsIcon className="text-xl" name="check-circle-filled"></OdsIcon>
            </div>
          </div>
        </div>
      </OdsStatsCard>

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

export default Example;

Disinfection station complete

<ods-stats-card id="stats-card-event-example">
  <div slot="count-region">
    <div class="stats-card-count-container">
      <span class="stats-card-count">5</span>
      <div class="stats-card-count-label-container">
        <span class="stats-card-count-label">Disinfection</span>
        <span class="stats-card-count-sub-label">station complete</span>
      </div>
    </div>
  </div>
  <div slot="status-region">
    <div class="stats-card-status-container">
      <div class="stats-card-status-graphic">
        <ods-icon class="text-xl" name="check-circle-filled"></ods-icon>
      </div>
    </div>
  </div>
</ods-stats-card>

<script>
  const statsCard = document.getElementById('stats-card-event-example');

  const onClickHandler = () => {
    alert('Test button clicked!');
  };

  statsCard.addEventListener('ods-stats-card-change', onClickHandler);
</script>

<style>
  /* The stats-card-event-example id is used to scope styles. It can be removed if scoping is not needed */
  #stats-card-event-example .stats-card-count-container {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ods-sys-space-8);
    align-items: center;

    font-size: var(--ods-sys-font-size-base);
    font-weight: var(--ods-sys-font-weight-regular);
  }

  #stats-card-event-example .stats-card-count {
    font-size: var(--ods-sys-font-size-3xl);
    font-weight: var(--ods-sys-font-weight-semibold);
  }

  #stats-card-event-example .stats-card-count-label-container {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: var(--ods-sys-space-0);
  }

  #stats-card-event-example .stats-card-status-container .stats-card-status-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ods-sys-space-8);
    border-radius: var(--ods-sys-border-radius-md);
    background-color: var(--ods-sys-color-status-success-muted);
    width: 2.75rem;
    height: 2.75rem;

    color: var(--ods-sys-color-on-status-success-muted);
  }

  #stats-card-event-example .stats-card-count-label-container .stats-card-count-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
  }

  #stats-card-event-example .stats-card-count-label-container .stats-card-count-sub-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
    font-size: var(--ods-sys-font-size-sm);
  }

  #stats-card-event-example .stats-card-status-container {
    display: flex;
    gap: var(--ods-sys-space-16);
    align-items: center;

    font-size: var(--ods-sys-font-size-md);
    font-weight: var(--ods-sys-font-weight-semibold);
  }

</style>

import { OdsStatsCard } from '@ods/components/react.stats-card';
import { OdsIcon } from '@ods/components/react.icon';

const css = `
/* The stats-card-event-example id is used to scope styles. It can be removed if scoping is not needed */
  #stats-card-event-example .stats-card-count-container {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ods-sys-space-8);
    align-items: center;

    font-size: var(--ods-sys-font-size-base);
    font-weight: var(--ods-sys-font-weight-regular);
  }

  #stats-card-event-example .stats-card-count {
    font-size: var(--ods-sys-font-size-3xl);
    font-weight: var(--ods-sys-font-weight-semibold);
  }

  #stats-card-event-example .stats-card-count-label-container {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: var(--ods-sys-space-0);
  }

  #stats-card-event-example .stats-card-status-container .stats-card-status-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ods-sys-space-8);
    border-radius: var(--ods-sys-border-radius-md);
    background-color: var(--ods-sys-color-status-success-muted);
    width: 2.75rem;
    height: 2.75rem;

    color: var(--ods-sys-color-on-status-success-muted);
  }

  #stats-card-event-example .stats-card-count-label-container .stats-card-count-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
  }

  #stats-card-event-example .stats-card-count-label-container .stats-card-count-sub-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
    font-size: var(--ods-sys-font-size-sm);
  }

  #stats-card-event-example .stats-card-status-container {
    display: flex;
    gap: var(--ods-sys-space-16);
    align-items: center;

    font-size: var(--ods-sys-font-size-md);
    font-weight: var(--ods-sys-font-weight-semibold);
  }
`;

const Example = () => {

  const onClickHandler = () => {
    alert('Test button clicked!');
  };

  return (
    <>
      <OdsStatsCard id="stats-card-event-example" onOdsStatsCardChange={onClickHandler}>
        <div slot="count-region">
          <div className="stats-card-count-container">
            <span className="stats-card-count">5</span>
            <div className="stats-card-count-label-container">
              <span className="stats-card-count-label">Disinfection</span>
              <span className="stats-card-count-sub-label">station complete</span>
            </div>
          </div>
        </div>
        <div slot="status-region">
          <div className="stats-card-status-container">
            <div className="stats-card-status-graphic">
              <OdsIcon className="text-xl" name="check-circle-filled"></OdsIcon>
            </div>
          </div>
        </div>
      </OdsStatsCard>

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

export default Example;

Disinfection station complete

Reprocessing in progress

Not in use not connected

In use connected to CV

In repair not available

<div id="stats-card-group-example" ods-layout="inline gap:lg">
  <ods-stats-card>
    <div slot="count-region">
      <div class="stats-card-count-container">
        <span class="stats-card-count">5</span>
        <div class="stats-card-count-label-container">
          <span class="stats-card-count-label">Disinfection</span>
          <span class="stats-card-count-sub-label">station complete</span>
        </div>
      </div>
    </div>
    <div slot="status-region">
      <div class="stats-card-status-container">
        <div class="stats-card-status-graphic disinfection">
          <ods-icon class="text-xl" name="check-circle-filled"></ods-icon>
        </div>
      </div>
    </div>
  </ods-stats-card>

  <ods-stats-card>
    <div slot="count-region">
      <div class="stats-card-count-container">
        <span class="stats-card-count">5</span>
        <div class="stats-card-count-label-container ">
          <span class="stats-card-count-label">Reprocessing</span>
          <span class="stats-card-count-sub-label">in progress</span>
        </div>
      </div>
    </div>
    <div slot="status-region">
      <div class="stats-card-status-container">
        <div class="stats-card-status-graphic reprocessing">
          <ods-icon class="text-xl" name="reprocessing"></ods-icon>
        </div>
      </div>
    </div>
  </ods-stats-card>

  <ods-stats-card>
    <div slot="count-region">
      <div class="stats-card-count-container">
        <span class="stats-card-count">7</span>
        <div class="stats-card-count-label-container non-in-use">
          <span class="stats-card-count-label">Not in use</span>
          <span class="stats-card-count-sub-label">not connected</span>
        </div>
      </div>
    </div>
    <div slot="status-region">
      <div class="stats-card-status-container">
        <div class="stats-card-status-graphic not-in-use">
          <ods-icon class="text-xl" name="circle-filled"></ods-icon>
        </div>
      </div>
    </div>
  </ods-stats-card>

  <ods-stats-card>
    <div slot="count-region">
      <div class="stats-card-count-container">
        <span class="stats-card-count">3</span>
        <div class="stats-card-count-label-container in-use">
          <span class="stats-card-count-label">In use</span>
          <span class="stats-card-count-sub-label">connected to CV</span>
        </div>
      </div>
    </div>
    <div slot="status-region">
      <div class="stats-card-status-container">
        <div class="stats-card-status-graphic in-use">
          <ods-icon class="text-xl" name="connected"></ods-icon>
        </div>
      </div>
    </div>
  </ods-stats-card>

  <ods-stats-card>
    <div slot="count-region">
      <div class="stats-card-count-container">
        <span class="stats-card-count">0</span>
        <div class="stats-card-count-label-container">
          <span class="stats-card-count-label">In repair</span>
          <span class="stats-card-count-sub-label">not available</span>
        </div>
      </div>
    </div>
    <div slot="status-region">
      <div class="stats-card-status-container">
        <div class="stats-card-status-graphic in-repair">
          <ods-icon class="text-xl" name="wrench-filled"></ods-icon>
        </div>
      </div>
    </div>
  </ods-stats-card>
</div>

<style>
  /* The stats-card-group-example id is used to scope styles. It can be removed if scoping is not needed */
  #stats-card-group-example .stats-card-count-container {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ods-sys-space-8);
    align-items: center;
  }

  #stats-card-group-example .stats-card-status-container {
    display: flex;
    gap: var(--ods-sys-space-16);
    align-items: baseline;

    font-size: var(--ods-sys-font-size-base);
    font-weight: var(--ods-sys-font-weight-semibold);
  }

  #stats-card-group-example .stats-card-count {
    font-size: var(--ods-sys-font-size-3xl);
    font-weight: var(--ods-sys-font-weight-semibold);
  }

  #stats-card-group-example .stats-card-count-label-container {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: var(--ods-sys-space-0);
  }

  #stats-card-group-example .stats-card-status-container ods-tag::part(base) {
    border: 0;
    padding: var(--ods-sys-space-8);
  }

  #stats-card-group-example .stats-card-status-container .stats-card-status-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ods-sys-space-8);
    border-radius: var(--ods-sys-border-radius-md);
    background-color: var(--ods-sys-color-surface-base);
    width: 2.75rem;
    height: 2.75rem;

    color: var(--ods-sys-color-on-surface);
  }

  #stats-card-group-example .stats-card-status-container .stats-card-status-graphic.disinfection {
    background-color: var(--ods-sys-color-status-success-muted);
    color: var(--ods-sys-color-on-status-success-muted);
  }

  #stats-card-group-example .stats-card-status-container .stats-card-status-graphic.reprocessing {
    background-color: var(--ods-sys-color-status-info-muted);
    color: var(--ods-sys-color-on-status-info-muted);
  }

  #stats-card-group-example .stats-card-status-container .stats-card-status-graphic.not-in-use {
    background-color: var(--ods-ref-color-neutral-100);
    color: var(--ods-sys-color-on-surface-softest);
  }

  #stats-card-group-example .stats-card-status-container .stats-card-status-graphic.in-use {
    background-color: var(--ods-sys-color-status-warning-muted);
    color: var(--ods-sys-color-on-status-warning-muted);
  }

  #stats-card-group-example .stats-card-status-container .stats-card-status-graphic.in-repair {
    background-color: var(--ods-ref-color-data-purple-200);
    color: var(--ods-ref-color-data-purple-500);
  }

  #stats-card-group-example .stats-card-count-label-container .stats-card-count-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
  }

  #stats-card-group-example .stats-card-count-label-container .stats-card-count-sub-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
    font-size: var(--ods-sys-font-size-sm);
  }

  #stats-card-group-example .stats-card-count-label {
    font-size: var(--ods-sys-font-size-base);
    font-weight: var(--ods-sys-font-weight-regular);
  }
</style>

import { OdsStatsCard } from '@ods/components/react.stats-card';
import { OdsIcon } from '@ods/components/react.icon';

const css = `
/* The stats-card-group-example id is used to scope styles. It can be removed if scoping is not needed */
  #stats-card-group-example .stats-card-count-container {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ods-sys-space-8);
    align-items: center;
  }

  #stats-card-group-example .stats-card-status-container {
    display: flex;
    gap: var(--ods-sys-space-16);
    align-items: baseline;

    font-size: var(--ods-sys-font-size-base);
    font-weight: var(--ods-sys-font-weight-semibold);
  }

  #stats-card-group-example .stats-card-count {
    font-size: var(--ods-sys-font-size-3xl);
    font-weight: var(--ods-sys-font-weight-semibold);
  }

  #stats-card-group-example .stats-card-count-label-container {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: var(--ods-sys-space-0);
  }

  #stats-card-group-example .stats-card-status-container ods-tag::part(base) {
    border: 0;
    padding: var(--ods-sys-space-8);
  }

  #stats-card-group-example .stats-card-status-container .stats-card-status-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ods-sys-space-8);
    border-radius: var(--ods-sys-border-radius-md);
    background-color: var(--ods-sys-color-surface-base);
    width: 2.75rem;
    height: 2.75rem;

    color: var(--ods-sys-color-on-surface);
  }

  #stats-card-group-example .stats-card-status-container .stats-card-status-graphic.disinfection {
    background-color: var(--ods-sys-color-status-success-muted);
    color: var(--ods-sys-color-on-status-success-muted);
  }

  #stats-card-group-example .stats-card-status-container .stats-card-status-graphic.reprocessing {
    background-color: var(--ods-sys-color-status-info-muted);
    color: var(--ods-sys-color-on-status-info-muted);
  }

  #stats-card-group-example .stats-card-status-container .stats-card-status-graphic.not-in-use {
    background-color: var(--ods-ref-color-neutral-100);
    color: var(--ods-sys-color-on-surface-softest);
  }

  #stats-card-group-example .stats-card-status-container .stats-card-status-graphic.in-use {
    background-color: var(--ods-sys-color-status-warning-muted);
    color: var(--ods-sys-color-on-status-warning-muted);
  }

  #stats-card-group-example .stats-card-status-container .stats-card-status-graphic.in-repair {
    background-color: var(--ods-ref-color-data-purple-200);
    color: var(--ods-ref-color-data-purple-500);
  }

  #stats-card-group-example .stats-card-count-label-container .stats-card-count-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
  }

  #stats-card-group-example .stats-card-count-label-container .stats-card-count-sub-label {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden;    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent truncated text */
    max-width: 12.5rem; /* Or max-width, depending on your layout needs */
    font-size: var(--ods-sys-font-size-sm);
  }

  #stats-card-group-example .stats-card-count-label {
    font-size: var(--ods-sys-font-size-base);
    font-weight: var(--ods-sys-font-weight-regular);
  }
`;

const Example = () => {
  return (
    <>
      <div id="stats-card-group-example" ods-layout="inline gap:lg">
        <OdsStatsCard>
          <div slot="count-region">
            <div className="stats-card-count-container">
              <span className="stats-card-count">5</span>
              <div className="stats-card-count-label-container">
                <span className="stats-card-count-label">Disinfection</span>
                <span className="stats-card-count-sub-label">station complete</span>
              </div>
            </div>
          </div>
          <div slot="status-region">
            <div className="stats-card-status-container">
              <div className="stats-card-status-graphic disinfection">
                <OdsIcon className="text-xl" name="check-circle-filled"></OdsIcon>
              </div>
            </div>
          </div>
        </OdsStatsCard>

        <OdsStatsCard>
          <div slot="count-region">
            <div className="stats-card-count-container">
              <span className="stats-card-count">5</span>
              <div className="stats-card-count-label-container ">
                <span className="stats-card-count-label">Reprocessing</span>
                <span className="stats-card-count-sub-label">in progress</span>
              </div>
            </div>
          </div>
          <div slot="status-region">
            <div className="stats-card-status-container">
              <div className="stats-card-status-graphic reprocessing">
                <OdsIcon className="text-xl" name="reprocessing"></OdsIcon>
              </div>
            </div>
          </div>
        </OdsStatsCard>

        <OdsStatsCard>
          <div slot="count-region">
            <div className="stats-card-count-container">
              <span className="stats-card-count">7</span>
              <div className="stats-card-count-label-container non-in-use">
                <span className="stats-card-count-label">Not in use</span>
                <span className="stats-card-count-sub-label">not connected</span>
              </div>
            </div>
          </div>
          <div slot="status-region">
            <div className="stats-card-status-container">
              <div className="stats-card-status-graphic not-in-use">
                <OdsIcon className="text-xl" name="circle-filled"></OdsIcon>
              </div>
            </div>
          </div>
        </OdsStatsCard>

        <OdsStatsCard>
          <div slot="count-region">
            <div className="stats-card-count-container">
              <span className="stats-card-count">3</span>
              <div className="stats-card-count-label-container in-use">
                <span className="stats-card-count-label">In use</span>
                <span className="stats-card-count-sub-label">connected to CV</span>
              </div>
            </div>
          </div>
          <div slot="status-region">
            <div className="stats-card-status-container">
              <div className="stats-card-status-graphic in-use">
                <OdsIcon className="text-xl" name="connected"></OdsIcon>
              </div>
            </div>
          </div>
        </OdsStatsCard>

        <OdsStatsCard>
          <div slot="count-region">
            <div className="stats-card-count-container">
              <span className="stats-card-count">0</span>
              <div className="stats-card-count-label-container">
                <span className="stats-card-count-label">In repair</span>
                <span className="stats-card-count-sub-label">not available</span>
              </div>
            </div>
          </div>
          <div slot="status-region">
            <div className="stats-card-status-container">
              <div className="stats-card-status-graphic in-repair">
                <OdsIcon className="text-xl" name="wrench-filled"></OdsIcon>
              </div>
            </div>
          </div>
        </OdsStatsCard>
      </div>

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

export default Example;

Importing

import '@ods/components/web.stats-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
count-region	Region used to place count content.
status-region	Region used to place status content.

Properties

Please note, both DOM properties and HTML attributes are shown in the table below. Unless otherwise specified, the property and attribute names are identical.

Property/Attribute	Type	Default
name	string	''
value	string
disabled	boolean	false
checked	boolean	false
defaultChecked	boolean	false

Events

React Event	Description	Event Detail
ods-stats-card-change	Emitted when the stats card is clicked.	--
ods-stats-card-blur	Emitted when the stats card loses focus.	--
ods-stats-card-input	Emitted when the stats card receives input.	--
ods-stats-card-focus	Emitted when the stats card receives focus.	--

Parts

Name	Description
base	The component's base wrapper.
count-region	The container that wraps the filter card's count region.
status-region	The container that wraps the filter card's status region.

Usage

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

Use Stats Cards to filter data used to display content in Data Tables or Data Lists.
Display Stats Cards above Data Tables and Data Lists
Display Stats Cards as clickable elements

Display Stats Cards below Data Tables and Data Lists
Display Stats Cards as non-clickable elements without rollever stats

Stats Card

Examples

Basic

Checked

Disabled

Change Event

Grouped

Importing

Slots

Properties

Events

Parts

Usage

Do

Dont