OLYSENSE Design System

https://sense-design-system.nova.dev.olysense.eu
Admin
OLYSENSE Design System provides a comprehensive collection of reusable UI components, design tokens,...
Tokens:197,554
Snippets:1,677
Trust Score:2.1
Update:6 months ago
Show doc for...
Tokens:
Raw
### Web Component Implementation

Source: https://sense-design-system.nova.dev.olysense.eu/ui-patterns/application-bar

Example of using the OdsApplicationBar with a user menu and switcher in plain HTML.

```html
<ods-application-bar class="application-bar" application-title="Reports">
  <div slot="right-content-region">
    <ods-application-user-menu
      id="user-menu"
      trigger-label="Dr. Jill Lopez M.D."
      headline="Dr. Jill Lopez M.D."
      subline="Gastroenterologist"
      language="English">
    </ods-application-user-menu>


    <ods-application-bar-divider vertical></ods-application-bar-divider>


    <ods-application-switcher>
      <ods-admin-button href="/"></ods-admin-button>
      <ods-insights-button href="/about/about-us/"></ods-insights-button>
      <ods-reports-button href="/developing/"></ods-reports-button>
      <ods-assetcare-button href="/components/button/"></ods-assetcare-button>
    </ods-application-switcher>
  </div>
</ods-application-bar>


<script>
  const menu = document.querySelector(`#user-menu`);
  menu.languages = [
    {
      label: 'English',
      description: 'English'
    },
    {
      label: 'Deutsch',
      description: 'Germany'
    },
    {
      label: 'Español',
      description: 'Spain'
    },
    {
      label: 'Français',
      description: 'France'
    }
  ]
</script>
```

--------------------------------

### React Implementation

Source: https://sense-design-system.nova.dev.olysense.eu/ui-patterns/application-bar

Example of using the OdsApplicationBar with a user menu and switcher in React.

```jsx
import { OdsApplicationBar } from '@ods/components/react.application-bar';
import { OdsApplicationBarDivider } from '@ods/components/react.application-bar-divider';
import { OdsApplicationSwitcher } from '@ods/components/react.application-switcher';
import { OdsAdminButton } from '@ods/components/react.ods-admin-button';
import { OdsInsightsButton } from '@ods/components/react.ods-insights-button';
import { OdsAssetcareButton } from '@ods/components/react.ods-assetcare-button';
import { OdsReportsButton } from '@ods/components/react.ods-reports-button';
import { OdsApplicationUserMenu } from '@ods/components/react.application-user-menu';


const Example = () => {
  const onOdsSelectHandler = (event: any) => {
    console.log("In onOdsSelectHandler", event);
  }


  return (
    <OdsApplicationBar className="application-bar-demo" application-title="Reports">
      <div slot="right-content-region">
        <OdsApplicationUserMenu
          id="user-menu"
          onOdsSelect={onOdsSelectHandler}
          trigger-label="Dr. Jill Lopez M.D."
          headline="Dr. Jill Lopez M.D."
          subline="Gastroenterologist"
          language="English"
          languages={
            [
              {
                label: 'English',
                description: 'English'
              },
              {
                label: 'Deutsch',
                description: 'Germany'
              },
              {
                label: 'Español',
                description: 'Spain'
              },
              {
                label: 'Français',
                description: 'France'
              }
            ]
          } />


        <OdsApplicationBarDivider vertical />


        <OdsApplicationSwitcher>
          <OdsAdminButton href="/"></OdsAdminButton>
          <OdsInsightsButton href="/about/about-us/"></OdsInsightsButton>
          <OdsReportsButton href="/developing/"></OdsReportsButton>
          <OdsAssetcareButton href="/components/button/"></OdsAssetcareButton>
        </OdsApplicationSwitcher>
      </div>
    </OdsApplicationBar>
  )
};


export default Example;
```

--------------------------------

### Basic Table Implementation

Source: https://sense-design-system.nova.dev.olysense.eu/components/table

Examples showing how to define columns and data for the table component in both vanilla HTML/JS and React environments.

```html
<ods-table id="demo-table"></ods-table>


<script>
  const demoTable = document.querySelector('#demo-table');


  demoTable.columns = [
    {
      accessorKey: "prefix",
      header: "Prefix",
      cell: (data) => data.getValue(),
    },
    {
      accessorKey: "firstName",
      header: "First Name",
      cell: (data) => data.getValue(),
    },
    {
      accessorKey: "lastName",
      header: "Last Name",
      cell: (data) => data.getValue(),
    },
  ];


  demoTable.data = [
    {
      prefix: 'Dr',
      firstName: 'Jane',
      lastName: 'Doe'
    },
    {
      prefix: 'Dr',
      firstName: 'John',
      lastName: 'Doe'
    }
  ];
</script>
```

```javascript
import { OdsTable } from '@ods/components/react.table';


const Example = () => {
  const columns = [
    {
      accessorKey: "prefix",
      header: "Prefix",
      cell: (data: any) => data.getValue(),
    },
    {
      accessorKey: "firstName",
      header: "First Name",
      cell: (data: any) => data.getValue(),
    },
    {
      accessorKey: "lastName",
      header: "Last Name",
      cell: (data: any) => data.getValue(),
    },
  ];


  const data = [
    {
      prefix: 'Dr',
      firstName: 'Jane',
      lastName: 'Doe'
    },
    {
      prefix: 'Dr',
      firstName: 'John',
      lastName: 'Doe'
    }
  ];


  return (
    <OdsTable columns={columns} data={data}></OdsTable>
  )
}


export default Example;
```

--------------------------------

### All Form Controls Example

Source: https://sense-design-system.nova.dev.olysense.eu/components/form-validation

Showcases all available form controls with their corresponding error states. This example includes login and patient information fields, options, checkboxes, radio groups, and buttons.

```html
<form class="inline-validation" ods-layout="block gap:48 align:inline-stretch">
    <fieldset>
        <legend ods-layout="mb:16" ods-text="headline semibold size:lg">Login Information</legend>
        <div ods-layout="block gap:lg">
            <div ods-layout="inline gap:md stretch">
                <ods-input type="email" label="Email" placeholder="user@example.com" required></ods-input>
            </div>


            <div ods-layout="inline gap:md stretch">
                <ods-input type="password" label="Password" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,16}$" error-text="Must be at least 8 characters long and contain one uppercase letter, one number and one special character."></ods-input>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend ods-layout="mb:16" ods-text="headline semibold size:lg">Patient Information</legend>
        <div ods-layout="block gap:lg">
            <div ods-layout="inline gap:md stretch">
                <ods-input label="First Name" required></ods-input>
                <ods-input label="Middle Initial"></ods-input>
                <ods-input label="Last Name" required></ods-input>
            </div>


            <div ods-layout="inline gap:md stretch">
                <ods-input type="number" label="Age" required></ods-input>
            </div>


            <div ods-layout="inline gap:md stretch">
                <ods-input type="date" label="Date" required></ods-input>
            </div>


            <div ods-layout="inline gap:md stretch">
                <ods-select label="Select one" required clearable>
                    <ods-option value="option-1">Option 1</ods-option>
                    <ods-option value="option-2">Option 2</ods-option>
                    <ods-option value="option-3">Option 3</ods-option>
                </ods-select>
            </div>


            <ods-checkbox required>Check me before submitting</ods-checkbox>


            <ods-radio-group required label="Select an Option">
                <ods-radio value="1">Option 1</ods-radio>
                <ods-radio value="2">Option 2</ods-radio>
                <ods-radio value="3">Option 3</ods-radio>
            </ods-radio-group>


            <div ods-layout="inline gap:md stretch">
                <ods-input label="Short Comment" required help-text="Please add any additional info that may be helpful." minlength="5" maxlength="15" show-count-text></ods-input>
            </div>


            <div ods-layout="inline gap:md stretch">
                <ods-textarea label="Long comment" required help-text="Please add any additional info that may be helpful." required minlength="5" maxlength="100" show-count-text></ods-textarea>
            </div>


            <div ods-layout="inline gap:md">
                <ods-button type="submit" variant="primary">Submit</ods-button>
                <ods-button variant="secondary" type="reset">Reset</ods-button>
            </div>
        </div>
    </fieldset>
</form>
```

--------------------------------

### Basic Menu Example

Source: https://sense-design-system.nova.dev.olysense.eu/components/menu

A simple menu with several options and a divider. Ensure OdsMenu, OdsMenuItem, and OdsDivider components are imported.

```html
<ods-menu>
  <ods-menu-item value="undo">Undo</ods-menu-item>
  <ods-menu-item value="redo">Redo</ods-menu-item>
  <ods-divider></ods-divider>
  <ods-menu-item value="cut">Cut</ods-menu-item>
  <ods-menu-item value="copy">Copy</ods-menu-item>
  <ods-menu-item value="paste">Paste</ods-menu-item>
  <ods-menu-item value="delete">Delete</ods-menu-item>
</ods-menu>
```

```jsx
import { OdsMenu } from '@ods/components/react.menu';
import { OdsMenuItem } from '@ods/components/react.menu-item';
import { OdsDivider } from '@ods/components/react.divider';


const Example = () => {
  return (
    <OdsMenu>
      <OdsMenuItem value="undo">Undo</OdsMenuItem>
      <OdsMenuItem value="redo">Redo</OdsMenuItem>
      <OdsDivider></OdsDivider>
      <OdsMenuItem value="cut">Cut</OdsMenuItem>
      <OdsMenuItem value="copy">Copy</OdsMenuItem>
      <OdsMenuItem value="paste">Paste</OdsMenuItem>
      <OdsMenuItem value="delete">Delete</OdsMenuItem>
    </OdsMenu>
  )
}


export default Example;
```

--------------------------------

### Importing Menu Item Components

Source: https://sense-design-system.nova.dev.olysense.eu/components/menu-item

Examples for importing the menu item component in web and React environments.

```javascript
import '@ods/components/web.menu-item';
```

```typescript
import { OdsMenuItem } from '@ods/components/react.menu-item';
```

--------------------------------

### React Stats Card Example

Source: https://sense-design-system.nova.dev.olysense.eu/ui-patterns/stats-card

Demonstrates the usage of OdsStatsCard with custom slots for count and status regions.

```javascript
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;
```

--------------------------------

### OdsCard with Footer React Example

Source: https://sense-design-system.nova.dev.olysense.eu/components/card

A React example demonstrating the OdsCard component with a footer. It includes buttons for actions within the footer slot.

```jsx
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;
```

--------------------------------

### Basic Menu Item Examples

Source: https://sense-design-system.nova.dev.olysense.eu/components/menu-item

Use menu items to present options within a menu. Supports checkboxes, disabled states, and icons.

```html
<ods-menu>
  <ods-menu-item>Option 1</ods-menu-item>
  <ods-menu-item>Option 2</ods-menu-item>
  <ods-menu-item>Option 3</ods-menu-item>
  <ods-divider></ods-divider>
  <ods-menu-item type="checkbox" checked>Checkbox</ods-menu-item>
  <ods-menu-item disabled type="checkbox" checked>
    <span>Disabled</span>
    <ods-icon slot="prefix" name="frame"></ods-icon>
  </ods-menu-item>
  <ods-divider></ods-divider>
  <ods-menu-item>
    <span>Prefix Icon</span>
    <ods-icon slot="prefix" name="frame"></ods-icon>
  </ods-menu-item>
  <ods-menu-item>
    <span>Suffix Icon</span>
    <ods-icon slot="suffix" name="download"></ods-icon>
  </ods-menu-item>
</ods-menu>
```

--------------------------------

### React Integration

Source: https://sense-design-system.nova.dev.olysense.eu/components/icon

Example of how to import and use the OdsIcon component within a React application.

```APIDOC
## React OdsIcon Component

### Description
Demonstrates the integration of the OdsIcon component in a React environment.

### Method
Not Applicable (Component Usage)

### Endpoint
Not Applicable (Component Usage)

### Parameters
#### Props
- **src** (string) - Required - The URL of the SVG icon to load.
- **className** (string) - Optional - CSS classes to apply to the icon.

### Request Example
```jsx
import { OdsIcon } from '@ods/components/react.icon';

const Example = () => {
  return (
    <OdsIcon src="https://shoelace.style/assets/images/shoe.svg" className='text-5xl'></OdsIcon>
  )
}

export default Example;
```

### Response
Not Applicable (Component Usage)

### Response Example
Not Applicable (Component Usage)
```

--------------------------------

### App Page Layout (No Side Nav)

Source: https://sense-design-system.nova.dev.olysense.eu/ui-patterns/layout/page-layout

Use this layout as the starting page for applications that do not have side navigation.

```html
<ods-page-layout>
</ods-page-layout>
```

--------------------------------

### React Stats Card Implementation

Source: https://sense-design-system.nova.dev.olysense.eu/ui-patterns/stats-card

Example of importing and using the Stats Card component in a React environment.

```javascript
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 */
```

--------------------------------

### Basic Application Footer

Source: https://sense-design-system.nova.dev.olysense.eu/ui-patterns/application-footer

Use the basic OdsApplicationFooter component for standard footer implementation. No additional setup is required beyond importing the component.

```html
<ods-application-footer></ods-application-footer>
```

```javascript
import { OdsApplicationFooter } from '@ods/components/react.application-footer';


const Example = () => {
  return (
    <OdsApplicationFooter></OdsApplicationFooter>
  )
};


export default Example;
```

--------------------------------

### Importing Segmented Group

Source: https://sense-design-system.nova.dev.olysense.eu/components/segmented-group

Examples for importing the component in web and React environments.

```javascript
import '@ods/components/web.segmented-group';
```

```javascript
import { OdsSegmentedGroup } from '@ods/components/react.segmented-group';
```

--------------------------------

### HTML Input Attribute Example

Source: https://sense-design-system.nova.dev.olysense.eu/foundations/web-components

Demonstrates how to define an initial value for an HTML element using an attribute directly within the tag.

```html
<input type="text" value="initial value" />
```

--------------------------------

### Menu Header Example

Source: https://sense-design-system.nova.dev.olysense.eu/components/menu-header

Use the OdsMenuHeader component to add a header with headline and subline to a menu. Ensure OdsMenu, OdsDivider, and OdsMenuItem are imported.

```html
<ods-menu class="w-[220px]">
  <ods-menu-header headline="Menu Headline" subline="Menu Subline"></ods-menu-header>


  <ods-divider></ods-divider>


  <ods-menu-item value="undo">Undo</ods-menu-item>
  <ods-menu-item value="redo">Redo</ods-menu-item>


  <ods-divider></ods-divider>


  <ods-menu-item value="cut">Cut</ods-menu-item>
  <ods-menu-item value="copy">Copy</ods-menu-item>
  <ods-menu-item value="paste">Paste</ods-menu-item>


  <ods-divider></ods-divider>


  <ods-menu-item>
    <span>Find</span>
    <ods-menu slot="submenu">
      <ods-menu-item value="find">Find…</ods-menu-item>
      <ods-menu-item value="find-previous">Find Next</ods-menu-item>
      <ods-menu-item value="find-next">Find Previous</ods-menu-item>
    </ods-menu>
  </ods-menu-item>


  <ods-menu-item>
    <span>Transformations</span>
    <ods-menu slot="submenu">
      <ods-menu-item value="uppercase" >Make uppercase</ods-menu-item>
      <ods-menu-item value="lowercase">Make lowercase</ods-menu-item>
      <ods-menu-item value="capitalize">Capitalize</ods-menu-item>
    </ods-menu>
  </ods-menu-item>
</ods-menu>
```

--------------------------------

### Alignment Utilities in React

Source: https://sense-design-system.nova.dev.olysense.eu/css/typography

Apply text alignment in React components using 'ods-text' directives. This example shows start, center, and end alignment within a layout.

```jsx
const Example = () => (
  <div ods-layout="block gap:md inline:stretch">
    <p ods-text="content start">align start</p>
    <p ods-text="content center">align center</p>
    <p ods-text="content end">align end</p>
  </div>
);


export default Example;
```

--------------------------------

### Inline Start Alignment

Source: https://sense-design-system.nova.dev.olysense.eu/css/inline

Aligns items to the start of the inline axis.

```HTML
<div ods-layout="inline gap:sm inline:start" class='demo'>
  <div>1</div>
  <div>2</div>
</div>
```

```React
const Example = () => {
  return (
    <div ods-layout="inline gap:sm inline:start" className='demo'>
      <div>1</div>
      <div>2</div>
    </div>
  )
}


export default Example;
```

--------------------------------

### Basic Application Switcher Implementation

Source: https://sense-design-system.nova.dev.olysense.eu/ui-patterns/application-switcher

Demonstrates the basic structure of the Application Switcher using HTML and React components.

```html
<div class="application-switcher-demo">
  <ods-application-switcher>
    <ods-admin-button href="/"></ods-admin-button>
    <ods-insights-button href="/about/about-us/"></ods-insights-button>
    <ods-reports-button href="/getting-started/"></ods-reports-button>
    <ods-assetcare-button href="/components/button/"></ods-assetcare-button>
  </ods-application-switcher>
</div>


<style>
  .application-switcher-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ods-sys-color-accent);
    width: 64px;
    height: 64px;
  }
</style>
```

```javascript
import { OdsApplicationSwitcher } from '@ods/components/react.application-switcher';
import { OdsAdminButton } from '@ods/components/react.ods-admin-button';
import { OdsInsightsButton } from '@ods/components/react.ods-insights-button';
import { OdsAssetcareButton } from '@ods/components/react.ods-assetcare-button';
import { OdsReportsButton } from '@ods/components/react.ods-reports-button';


const css = `
  /* Only used for documentation */
  .application-switcher-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ods-sys-color-accent);
    width: 64px;
    height: 64px;
  }
`;


const Example = () => {
  return (
    <>
      <div className="application-switcher-demo">
        <OdsApplicationSwitcher>
          <OdsAdminButton href="/"></OdsAdminButton>
          <OdsInsightsButton href="/about/about-us/"></OdsInsightsButton>
          <OdsReportsButton href="/getting-started/"></OdsReportsButton>
          <OdsAssetcareButton href="/components/button/"></OdsAssetcareButton>
        </OdsApplicationSwitcher>
      </div>


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


  )
};


export default Example;
```

--------------------------------

### Block Start Alignment

Source: https://sense-design-system.nova.dev.olysense.eu/css/inline

Aligns items to the start of the block axis.

```HTML
<div ods-layout="inline gap:sm block:start" class='demo h-[200px]'>
  <div>1</div>
  <div>2</div>
</div>
```

```React
const Example = () => {
  return (
    <div ods-layout="inline gap:sm block:start" className='demo h-[200px]'>
      <div>1</div>
      <div>2</div>
    </div>
  )
}


export default Example;
```

--------------------------------

### Column Start Positioning

Source: https://sense-design-system.nova.dev.olysense.eu/css/grid

Controls the starting column position of grid items.

```HTML
<div ods-layout="grid gap:sm" class="demo">
  <div ods-layout="col:start-2 ">1</div>
  <div ods-layout="col:start-1">2</div>
</div>
```

```React
const Example = () => {
  return (
    <div ods-layout="grid gap:sm" className="demo">
      <div ods-layout="col:start-2 ">1</div>
      <div ods-layout="col:start-1">2</div>
    </div>
  )
}


export default Example;
```

--------------------------------

### Individual Item Inline Start Alignment

Source: https://sense-design-system.nova.dev.olysense.eu/css/inline

Aligns a specific item to the inline start.

```HTML
<div ods-layout="inline gap:sm" class="demo">
  <div ods-layout="inline:start">1</div>
</div>
```

```React
const Example = () => {
  return (
    <div ods-layout="inline gap:sm" className="demo">
      <div ods-layout="inline:start">1</div>
    </div>
  )
}


export default Example;
```

--------------------------------

### Individual Item Block Start Alignment

Source: https://sense-design-system.nova.dev.olysense.eu/css/inline

Aligns a specific item to the block start.

```HTML
<div ods-layout="inline gap:sm" class="demo h-[200px]">
  <div ods-layout="block:start">1</div>
</div>
```

```React
const Example = () => {
  return (
    <div ods-layout="inline gap:sm" className="demo h-[200px]">
      <div ods-layout="block:start">1</div>
    </div>
  )
}


export default Example;
```

--------------------------------

### HTML Shadow Demonstration

Source: https://sense-design-system.nova.dev.olysense.eu/design-tokens/shadow

Demonstrates the application of shadow classes within a layout container using standard HTML and CSS.

```html
<div class="ods-shadow__demo" ods-layout="p:16 block gap:md align:inline-stretch">
  <div ods-layout="p:16" class="shadow-1">Shadow 1</div>
  <div ods-layout="p:16" class="shadow-2">Shadow 2</div>
  <div ods-layout="p:16" class="shadow-3">Shadow 3</div>
  <div ods-layout="p:16" class="shadow-4">Shadow 4</div>
  <div ods-layout="p:16" class="shadow-5">Shadow 5</div>
  <div ods-layout="p:16" class="shadow-6">Shadow 6</div>
</div>


<style>
  .ods-shadow__demo {
    background-color: var(--ods-sys-color-surface-sunken);
    border: 1px solid var(--ods-sys-color-outline-base);
  }


  div[class*='ods-shadow-'] {
    height: var(--ods-sys-size-96);
    margin-top: var(--ods-sys-space-8);
    border: 1px solid var(--ods-sys-color-outline-base);
    font-size: var(--ods-sys-font-size-base);
    background-color: var(--ods-sys-color-surface-raised);
  }


  .ods-shadow-1 {
    box-shadow: var(--ods-sys-shadow-1);
  }


  .ods-shadow-2 {
    box-shadow: var(--ods-sys-shadow-2);
  }


  .ods-shadow-3 {
    box-shadow: var(--ods-sys-shadow-3);
  }


  .ods-shadow-4 {
    box-shadow: var(--ods-sys-shadow-4);
  }


  .ods-shadow-5 {
    box-shadow: var(--ods-sys-shadow-5);
  }


  .ods-shadow-6 {
    box-shadow: var(--ods-sys-shadow-6);
  }


  .dark {
    .shadow-1, .shadow-2, .shadow-3, .shadow-4, .shadow-5, .shadow-6 {
      border: 1px solid var(--ods-sys-color-outline-base);
    }
  }
</style>
```

--------------------------------

### Basic Drawer Example (HTML/JS)

Source: https://sense-design-system.nova.dev.olysense.eu/components/drawer

Demonstrates how to use the OdsDrawer component with plain HTML and JavaScript. Requires OdsButton for interaction. Ensure the drawer and buttons are correctly selected.

```html
<ods-drawer label="Drawer" class="drawer-overview">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <ods-button slot="footer" variant="primary">Close</ods-button>
</ods-drawer>


<ods-button variant="primary">Open Drawer</ods-button>
```

```javascript
const drawer = document.querySelector('.drawer-overview');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('ods-button[variant="primary"]');


openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
```

--------------------------------

### Install ODS Components

Source: https://sense-design-system.nova.dev.olysense.eu/getting-started

Install the core ODS components package via npm.

```bash
npm install @ods/components
```

--------------------------------

### Install Typography Package

Source: https://sense-design-system.nova.dev.olysense.eu/css/typography

Command to install the ODS typography package via npm.

```Shell
npm install -g @ods/typography
```

--------------------------------

### Basic Skeleton Implementation

Source: https://sense-design-system.nova.dev.olysense.eu/components/skeleton

Demonstrates the basic usage of the OdsSkeleton component with custom CSS for layout.

```html
<div class="skeleton-overview">
  <header>
    <ods-skeleton></ods-skeleton>
    <ods-skeleton></ods-skeleton>
  </header>


  <ods-skeleton></ods-skeleton>
  <ods-skeleton></ods-skeleton>
  <ods-skeleton></ods-skeleton>
</div>


<style>
  .skeleton-overview header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }


  .skeleton-overview header ods-skeleton:last-child {
    flex: 0 0 auto;
    width: 30%;
  }


  .skeleton-overview ods-skeleton {
    margin-bottom: 1rem;
  }


  .skeleton-overview ods-skeleton:nth-child(1) {
    float: left;
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
    vertical-align: middle;
  }


  .skeleton-overview ods-skeleton:nth-child(3) {
    width: 95%;
  }


  .skeleton-overview ods-skeleton:nth-child(4) {
    width: 80%;
  }
</style>
```

```javascript
import { OdsSkeleton } from '@ods/components/react.skeleton';


const css = `
  .skeleton-overview header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }


  .skeleton-overview header ods-skeleton:last-child {
    flex: 0 0 auto;
    width: 30%;
  }


  .skeleton-overview ods-skeleton {
    margin-bottom: 1rem;
  }


  .skeleton-overview ods-skeleton:nth-child(1) {
    float: left;
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
    vertical-align: middle;
  }


  .skeleton-overview ods-skeleton:nth-child(3) {
    width: 95%;
  }


  .skeleton-overview ods-skeleton:nth-child(4) {
    width: 80%;
  }
`;


const Example = () => {
  return (
    <>
      <div className="skeleton-overview">
        <header>
          <OdsSkeleton />
          <OdsSkeleton />
        </header>


        <OdsSkeleton />
        <OdsSkeleton />
        <OdsSkeleton />
      </div>


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


export default Example;
```

--------------------------------

### Input with Help Text

Source: https://sense-design-system.nova.dev.olysense.eu/components/input

Provides additional context or instructions via the help-text attribute.

```html
<ods-input label="Nickname" help-text="What would you like people to call you?"></ods-input>
```

```javascript
import { OdsInput } from '@ods/components/react.input';


const Example = () => {
  return (
    <OdsInput
      label="Nickname"
      help-text="What would you like people to call you?">
    </OdsInput>
  )
}


export default Example;
```

--------------------------------

### Column Start and End Positioning

Source: https://sense-design-system.nova.dev.olysense.eu/css/grid

Defines both start and end column boundaries for grid items.

```HTML
<div ods-layout="grid gap:sm" class="demo">
  <div ods-layout="col:start-3 col:8">1</div>
  <div ods-layout="col:start-1 col:end-5">2</div>
  <div ods-layout="col:4 col:end-13">3</div>
  <div ods-layout="col:start-1 col:end-13">4</div>
</div>
```

```React
const Example = () => {
  return (
    <div ods-layout="grid gap:sm" className="demo">
      <div ods-layout="col:start-3 col:8">1</div>
      <div ods-layout="col:start-1 col:end-5">2</div>
      <div ods-layout="col:4 col:end-13">3</div>
      <div ods-layout="col:start-1 col:end-13">4</div>
    </div>
  )
}


export default Example;
```

--------------------------------

### Inline Start Alignment (HTML)

Source: https://sense-design-system.nova.dev.olysense.eu/css/block

Aligns inline content to the start. Use for left-aligned or top-aligned inline elements.

```html
<div ods-layout="block gap:sm inline:start" class='demo'>
  <div>1</div>
  <div>2</div>
</div>
```

--------------------------------

### Import Theme Tokens

Source: https://sense-design-system.nova.dev.olysense.eu/getting-started

Import the necessary CSS files at your application's entry point to ensure components render correctly.

```javascript
// Will be deprecated after design token 2.0 migration.
import '@ods/theme/assets/tokens.css';
// Design Tokens 2.0
import '@ods/design-tokens/assets/tokens.css';
```

--------------------------------

### Block Start Alignment (HTML)

Source: https://sense-design-system.nova.dev.olysense.eu/css/block

Aligns content to the start of the block. Use when content should be pushed to the top or left.

```html
<div ods-layout="block gap:sm block:start" class='demo h-[300px]'>
  <div>1</div>
  <div>2</div>
</div>
```

--------------------------------

### Basic Side Nav Menu Implementation

Source: https://sense-design-system.nova.dev.olysense.eu/components/side-nav-menu

Demonstrates how to structure a basic side navigation menu using HTML or React components.

```HTML
<ods-side-nav class="example">
  <ods-side-nav-menu slot="side-nav-content">
    <ods-side-nav-menu-item value="dashboard">
      <ods-icon slot="prefix" name="dashboard"></ods-icon>
      Dashboard
    </ods-side-nav-menu-item>


    <ods-side-nav-menu-item value="procedures">
      <ods-icon slot="prefix" name="exam"></ods-icon>
      Procedures
    </ods-side-nav-menu-item>


    <ods-side-nav-menu-item value="findings">
      <ods-icon slot="prefix" name="kudo-classification"></ods-icon>
      Findings
    </ods-side-nav-menu-item>
  </ods-side-nav-menu>
<ods-side-nav>


<style>
  .example {
    border: 1px solid var(--ods-sys-color-outline-base);
    --app-sidebar-height: auto;
    max-width: 17.5rem;
  }
</style>
```

```React
import { OdsSideNav } from '@ods/components/react.side-nav';
import { OdsSideNavMenu } from '@ods/components/react.side-nav-menu';
import { OdsSideNavMenuItem } from '@ods/components/react.side-nav-menu-item';
import { OdsIcon } from '@ods/components/react.icon';


const css = `
  .example {
    border: 1px solid var(--ods-sys-color-outline-base);
    --app-sidebar-height: auto;
    max-width: 17.5rem;
  }
`;


const Example = () => {
  return (
    <>
    <OdsSideNav className="example">
        <OdsSideNavMenu slot="side-nav-content">
          <OdsSideNavMenuItem value="dashboard">
            <OdsIcon slot="prefix" name="dashboard"></OdsIcon>
            Dashboard
          </OdsSideNavMenuItem>


          <OdsSideNavMenuItem value="procedures">
            <OdsIcon slot="prefix" name="exam"></OdsIcon>
            Procedures
          </OdsSideNavMenuItem>


          <OdsSideNavMenuItem value="findings">
            <OdsIcon slot="prefix" name="kudo-classification"></OdsIcon>
            Findings
          </OdsSideNavMenuItem>
        </OdsSideNavMenu>
      </OdsSideNav>


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


export default Example;
```

--------------------------------

### Inline Start Alignment (React)

Source: https://sense-design-system.nova.dev.olysense.eu/css/block

Aligns inline content to the start in a React component. Use for left-aligned or top-aligned inline elements.

```jsx
const Example = () => {
  return (
    <div ods-layout="block gap:sm inline:start" className='demo'>
      <div>1</div>
      <div>2</div>
    </div>
  )
}

export default Example;
```

--------------------------------

### Block Start Alignment (React)

Source: https://sense-design-system.nova.dev.olysense.eu/css/block

Aligns content to the start of the block in a React component. Use when content should be pushed to the top or left.

```jsx
const Example = () => {
  return (
    <div ods-layout="block gap:sm block:start" className='demo h-[300px]'>
      <div>1</div>
      <div>2</div>
    </div>
  )
}

export default Example;
```

--------------------------------

### Basic Drawer Example (React)

Source: https://sense-design-system.nova.dev.olysense.eu/components/drawer

Shows how to implement the OdsDrawer component in a React application using state management for controlling visibility. Imports are required from '@ods/components/react.drawer' and '@ods/components/react.button'.

```jsx
import { useState } from 'react';
import { OdsDrawer } from '@ods/components/react.drawer';
import { OdsButton } from '@ods/components/react.button';


const Example = () => {
  const [open, setOpen] = useState(false);


  return (
    <>
      <OdsDrawer label="Drawer" open={open} onOdsDrawerAfterHide={() => setOpen(false)}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <OdsButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
          Close
        </OdsButton>
      </OdsDrawer>


      <OdsButton onClick={() => setOpen(true)} variant="primary">Open Drawer</OdsButton>
    </>
  )
}


export default Example;
```

--------------------------------

### Item Inline Start Alignment (HTML)

Source: https://sense-design-system.nova.dev.olysense.eu/css/block

Aligns a specific item to the start of the inline axis. Use for left-aligning an item within a row.

```html
<div ods-layout="block gap:sm inline:end" class="demo">
  <div>1</div>
  <div ods-layout="inline:start">2</div>
  <div>3</div>
</div>
```

--------------------------------

### Importing Web Components

Source: https://sense-design-system.nova.dev.olysense.eu/components/icon

Instructions on how to import the OdsIcon web component. It only needs to be imported once.

```APIDOC
## Importing OdsIcon Web Component

### Description
Import the OdsIcon web component once in your application. It registers itself globally upon definition.

### Method
Not Applicable (Import Statement)

### Endpoint
Not Applicable (Import Statement)

### Parameters
None

### Request Example
```javascript
import '@ods/components/web.icon';
```

### Response
Not Applicable (Import Statement)

### Response Example
Not Applicable (Import Statement)
```

--------------------------------

### Install ODS Design Tokens Package

Source: https://sense-design-system.nova.dev.olysense.eu/design-tokens

Install the @ods/design-tokens package using npm or yarn. This command adds the dependency to your package.json file.

```bash
npm install '@ods/design-tokens'
yarn add '@ods/design-tokens'
```

--------------------------------

### Install Olysense Typography

Source: https://sense-design-system.nova.dev.olysense.eu/css

Install the Olysense Typography library using npm or yarn to apply CSS utilities for consistent text styles.

```bash
npm install '@ods/typography'
yarn add '@ods/typography'
```

--------------------------------

### Importing Skeleton Component

Source: https://sense-design-system.nova.dev.olysense.eu/components/skeleton

Instructions on how to import the Skeleton component for both web components and React.

```APIDOC
## Importing

### Web Component Import
```javascript
import '@ods/components/web.skeleton';
```

### React Component Import
```javascript
import { OdsSkeleton } from '@ods/components/react.skeleton';
```

**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.

**Development Status:** This component is still in development and cannot be imported at this time.
```

--------------------------------

### Item Inline Start Alignment (React)

Source: https://sense-design-system.nova.dev.olysense.eu/css/block

Aligns a specific item to the start of the inline axis in React. Use for left-aligning an item within a row.

```jsx
const Example = () => {
  return (
    <div ods-layout="block gap:sm inline:end" className="demo">
      <div>1</div>
      <div ods-layout="inline:start">2</div>
      <div>3</div>
    </div>
  )
}

export default Example;
```

--------------------------------

### Basic Radio Group Example

Source: https://sense-design-system.nova.dev.olysense.eu/components/radio

Demonstrates how to create a basic radio group with three options. Ensure radios are wrapped within an `ods-radio-group` for proper functionality.

```html
<ods-radio-group label="Select an option" name="a" value="1">
  <ods-radio value="1">Option 1</ods-radio>
  <ods-radio value="2">Option 2</ods-radio>
  <ods-radio value="3">Option 3</ods-radio>
</ods-radio-group>
```

--------------------------------

### Basic Alert Implementation

Source: https://sense-design-system.nova.dev.olysense.eu/components/alert

Standard alert usage showing how to include an icon and text content.

```html
<ods-alert open>
  <ods-icon slot="icon" name="info-circle-filled"></ods-icon>
  This is a standard alert. You can customize its content and even the icon.
</ods-alert>
```

```react
import { OdsAlert } from '@ods/components/react.alert';
import { OdsIcon } from '@ods/components/react.icon';


const Example = () => {
  return (
    <OdsAlert open>
      <OdsIcon slot="icon" name="info-circle-filled" />
      This is a standard alert. You can customize its content and even the icon.
    </OdsAlert>
  )
}


export default Example;
```

--------------------------------

### Item Block Start Alignment (HTML)

Source: https://sense-design-system.nova.dev.olysense.eu/css/block

Aligns a specific item to the start of the block axis. Use for pushing an item to the top or left within a group.

```html
<div ods-layout="block gap:sm" class='demo h-[300px]'>
  <div ods-layout="block:start">1</div>
  <div>2</div>
  <div>3</div>
</div>
```

--------------------------------

### Item Block Start Alignment (React)

Source: https://sense-design-system.nova.dev.olysense.eu/css/block

Aligns a specific item to the start of the block axis in React. Use for pushing an item to the top or left within a group.

```jsx
const Example = () => {
  return (
    <div ods-layout="block gap:sm" className='demo h-[300px]'>
      <div ods-layout="block:start">1</div>
      <div>2</div>
      <div>3</div>
    </div>
  )
}

export default Example;
```
Tokens:
Raw