Duet

https://www.duetds.com
Admin
Duet is a design system of reusable components and tools guided by clear standards for building...
Tokens:272,537
Snippets:1,925
Trust Score:8.4
Update:6 months ago
Show doc for...
Tokens:
Raw
### NPM Installation

Source: https://www.duetds.com/using-components

Instructions for installing Duet Components using npm for various frameworks.

```APIDOC
## NPM Installation

### Description
Install Duet Components and related packages using npm. This is recommended for projects using Node Package Manager.

### Method
CLI Commands

### Endpoint
N/A

### Parameters
N/A

### Request Example
```bash
# WEB COMPONENTS for HTML, Ember, Vue.js, and Vanilla JS:
npm install @duetds/components

# REACT COMPONENTS:
npm install @duetds/react

# CSS FRAMEWORK (platform independent):
npm install @duetds/css

# WEBFONTS (platform independent):
npm install @duetds/fonts
```

### Response
N/A
```

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

### Install Core Duet Packages

Source: https://www.duetds.com/developers

Installs foundational packages including design tokens, CSS framework, icons, and fonts for use with any web framework.

```bash
npm install @duetds/tokens
npm install @duetds/css
npm install @duetds/icons
npm install @duetds/fonts
```

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

### Install Duet Components and Dependencies

Source: https://www.duetds.com/server-side-rendering

Installs the required Duet Design System components and the ncp utility for file copying as development dependencies.

```bash
npm install @duetds/components ncp --save-dev
```

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

### Duet Toggle Examples

Source: https://www.duetds.com/components/toggle

Code examples demonstrating how to use the Duet Toggle component in different states.

```APIDOC
## Duet Toggle Examples

### Description
Provides practical examples of how to implement the Duet Toggle component, including basic usage and event handling.

### Checked Toggle Example

```html
<duet-toggle label="Checked toggle" value="Some value" checked></duet-toggle>

<script>
  // Select the above toggle component
  var toggle = document.querySelector("duet-toggle")

  // Listen for change events in the toggle
  toggle.addEventListener("duetChange", function (e) {
    console.log("Change detected in toggle:", e.detail)
  })
</script>
```

### Unchecked Toggle Example

```html
<duet-toggle label="Toggle" value="Some value"></duet-toggle>
```
```

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

### Install Duet Design System Packages

Source: https://www.duetds.com/templates/author

Installs the necessary Duet Design System packages using npm. These include components, CSS framework, and fonts.

```bash
npm install @duetds/components
npm install @duetds/css
npm install @duetds/fonts
```

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

### Initialize Development Environment

Source: https://www.duetds.com/contributing

Commands to install global dependencies and bootstrap the mono repository for local development.

```bash
npm install --global lerna
npm install
npm run bootstrap
npm start
```

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

### Usage with Basic HTML after NPM Install

Source: https://www.duetds.com/using-components

How to use Duet Components in basic HTML after installing via npm.

```APIDOC
## Usage with Basic HTML after NPM Install

### Description
After installing `@duetds/components` via npm, you can copy the component library to your project and include it using script tags. Alternatively, use the Duet CDN as recommended.

### Method
HTML & Scripting

### Endpoint
N/A

### Parameters
N/A

### Request Example
1. **Copy Components (using ncp):**
   - Install ncp: `npm install ncp --save-dev`
   - Add script to `package.json`:
     ```json
     "scripts": {
       "copy:components": "ncp node_modules/@duetds/components/lib src/SPECIFY_PATH"
     }
     ```
   - Run script: `npm run copy:components`

2. **Include in HTML:**
   ```html
   <head>
     <script type="module" src="SPECIFY_YOUR_PATH/duet.esm.js"></script>
     <script nomodule src="SPECIFY_YOUR_PATH/duet.js"></script>
   </head>
   ```

3. **Use Components:**
   ```html
   <duet-button variation="primary">Send</duet-button>
   ```

### Response
N/A
```

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

### Install Duet Components

Source: https://www.duetds.com/developers

Installs the web components library for use in HTML, Angular, Ember, Vue.js, and Vanilla JS environments.

```bash
npm install @duetds/components
```

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

### Default File Chooser Example (HTML, JavaScript)

Source: https://www.duetds.com/components/file-chooser

Demonstrates the basic usage of the Duet File Chooser component. It includes a button to trigger the file dialog and displays selected file names. This example uses HTML for structure and JavaScript for event handling and component interaction.

```html
<duet-layout center>
  <div slot="main">
    <duet-file-chooser id="file-chooser">
    </duet-file-chooser>
    <duet-button
      id="open-button"
      size="small"
      variation="secondary"
      fixed
      icon="action-add-circle"
    >
      Open file chooser
    </duet-button>
    <div id="file-list"></div>
  </div>
</duet-layout>


<script>
  const fileChooser = document.querySelector("#file-chooser");
  const openButton = document.querySelector("#open-button");

  openButton.addEventListener("click", () => {
    fileChooser.open()
  });
</script>
```

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

### Default Toolbar Link Example

Source: https://www.duetds.com/components/toolbar-link

This example demonstrates the default appearance and usage of the Toolbar Link component. It creates a standard navigation link within a toolbar.

```html
<duet-toolbar-link href="#henkilöasiakkaat">Henkilöasiakkaat</duet-toolbar-link>
```

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

### Install Duet CLI

Source: https://www.duetds.com/developers

Installs the Duet Command Line Interface globally to facilitate project scaffolding and management.

```bash
npm install -g @duetds/cli
```

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

### Basic Menu Bar Button Implementation

Source: https://www.duetds.com/components/menu-bar-button

A standard example of how to implement the duet-menu-bar-button component with an icon and label.

```html
<duet-menu-bar-button icon="navigation-user">Omat sivut</duet-menu-bar-button>
```

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

### Duet Input with Tooltip and Caption Variations (HTML)

Source: https://www.duetds.com/components/input

Provides examples of Duet input components configured with tooltips and captions. It demonstrates various combinations of placeholder, caption, and echo-placeholder attributes to control how information is presented to the user. The examples are contained within a card for layout.

```html
<duet-input label="Tooltip usage with top caption" accessible-described-by="caption-for-input" placeholder="placeholder" caption="caption" echo-placeholder> </duet-input>  
  
  <duet-input label="Tooltip usage with top caption" accessible-described-by="caption-for-input" placeholder="placeholder" caption="caption"> </duet-input>  
  
  <duet-input label="Tooltip usage with top caption" accessible-described-by="caption-for-input" placeholder="placeholder" echo-placeholder> </duet-input>  
  
  <duet-input label="Tooltip usage with top caption" accessible-described-by="caption-for-input" placeholder="placeholder"> </duet-input>  
  
  <duet-input label="Tooltip usage with top caption" value="inputvalue" accessible-described-by="caption-for-input" placeholder="placeholder" caption="caption" echo-placeholder> </duet-input>  
  
  <duet-input label="Tooltip usage with top caption" value="inputvalue" accessible-described-by="caption-for-input" placeholder="placeholder" caption="caption"> </duet-input>  
  
  <duet-input label="Tooltip usage with top caption" value="inputvalue" accessible-described-by="caption-for-input" placeholder="placeholder" echo-placeholder> </duet-input>  
  
  <duet-input label="Tooltip usage with top caption" value="inputvalue" accessible-described-by="caption-for-input" placeholder="placeholder"> </duet-input>  
  
  <duet-card style="max-width: 480px">  
    <duet-input label="Tooltip usage with top caption" value="inputvalue" accessible-described-by="caption-for-input" placeholder="its a long placeholder" echo-placeholder> </duet-input>    
  </duet-card>
```

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

### Basic Breadcrumbs Example

Source: https://www.duetds.com/components/breadcrumbs

Demonstrates a standard Duet Breadcrumbs implementation with navigation links and a click event listener to prevent default behavior. This example shows how to create a breadcrumb trail for a web page.

```html
<duet-breadcrumbs class="duet-example-without-padding">
  <duet-breadcrumb href="/" icon="damage-home" accessible-label="Etusivu"></duet-breadcrumb>
  <duet-breadcrumb href="/edut-ja-kampanjat">Edut ja kampanjat</duet-breadcrumb>
  <duet-breadcrumb>LähiTapiola Pirkanmaa</duet-breadcrumb>
</duet-breadcrumbs>

<script>
  const breadcrumb = document.querySelector("duet-breadcrumb")
  breadcrumb.addEventListener("click", (e) => {
    e.preventDefault()
    console.log("Default prevented")
  })
</script>
```

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

### Grid Distribution Examples

Source: https://www.duetds.com/components/grid

Illustrates different distribution options for grid items within a duet-grid.

```APIDOC
## Grid Distribution Examples

### Description
These examples showcase how to control the spacing and alignment of grid items along the main axis using the `distribution` attribute.

### Method
N/A (HTML Structure)

### Endpoint
N/A

### Parameters
- **distribution** (string) - Optional - Specifies the distribution of items. Options: `center`, `right`, `space-between`, `space-around`, `space-evenly`.

### Request Example
```html
<duet-grid responsive distribution="center" class="grid-demo">
  <duet-grid-item>Grid Item<br />with multiple<br />rows of text.</duet-grid-item>
  <duet-grid-item>Grid Item</duet-grid-item>
  <duet-grid-item>Grid Item</duet-grid-item>
</duet-grid>

<duet-grid responsive distribution="right" class="grid-demo">
  <duet-grid-item>Grid Item<br />with multiple<br />rows of text.</duet-grid-item>
  <duet-grid-item>Grid Item</duet-grid-item>
  <duet-grid-item>Grid Item</duet-grid-item>
</duet-grid>

<duet-grid responsive distribution="space-between" class="grid-demo">
  <duet-grid-item>Grid Item<br />with multiple<br />rows of text.</duet-grid-item>
  <duet-grid-item>Grid Item</duet-grid-item>
  <duet-grid-item>Grid Item</duet-grid-item>
</duet-grid>

<duet-grid responsive distribution="space-around" class="grid-demo">
  <duet-grid-item>Grid Item<br />with multiple<br />rows of text.</duet-grid-item>
  <duet-grid-item>Grid Item</duet-grid-item>
  <duet-grid-item>Grid Item</duet-grid-item>
</duet-grid>

<duet-grid responsive distribution="space-evenly" class="grid-demo">
  <duet-grid-item>Grid Item<br />with multiple<br />rows of text.</duet-grid-item>
  <duet-grid-item>Grid Item</duet-grid-item>
  <duet-grid-item>Grid Item</duet-grid-item>
</duet-grid>
```

### Response
N/A
```

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

### Default Banner Example

Source: https://www.duetds.com/components/banner

Demonstrates the basic usage of the Duet Banner component with essential content.

```APIDOC
## Default Banner Example

### Description
This example shows a basic Duet Banner with a heading, description, and a call-to-action button.

### Method
N/A (This is a UI component example)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<duet-banner  
  size="auto"  
  icon="category-apartment"  
  image="https://www.duetds.com/assets/img/example-banner1.jpg"
>
  <span slot="heading">
    Kasko-vakuutus autosi turvaksi, lorem ipsum!
  </span>
  <span slot="description">
    Optional paragraph. Kasko-vakuutus autosi turvaksi,
    lorem ipsum dolor sit.
  </span>
  <duet-button
    slot="action"
    margin="none"
    variation="primary"
    icon="navigation-arrow-right"
    icon-right
  >
    Call to action
  </duet-button>
</duet-banner>
```

### Response
#### Success Response (200)
N/A (This is a UI component)

#### Response Example
N/A
```

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

### Grid Alignment Examples

Source: https://www.duetds.com/components/grid

Demonstrates different alignment options for grid items within a duet-grid.

```APIDOC
## Grid Alignment Examples

### Description
These examples illustrate how to control the alignment of grid items along the cross axis using the `alignment` attribute.

### Method
N/A (HTML Structure)

### Endpoint
N/A

### Parameters
- **alignment** (string) - Optional - Specifies the alignment of items along the cross axis. Options: `top`, `center`, `bottom`, `stretch`, `baseline`.

### Request Example
```html
<duet-grid responsive alignment="top" class="grid-demo">
  <duet-grid-item>Grid Item<br />with multiple<br />rows of text.</duet-grid-item>
  <duet-grid-item>Grid Item</duet-grid-item>
  <duet-grid-item>Grid Item</duet-grid-item>
</duet-grid>

<duet-grid responsive alignment="center" class="grid-demo">
  <duet-grid-item>Grid Item<br />with multiple<br />rows of text.</duet-grid-item>
  <duet-grid-item>Grid Item</duet-grid-item>
  <duet-grid-item>Grid Item</duet-grid-item>
</duet-grid>

<duet-grid responsive alignment="bottom" class="grid-demo">
  <duet-grid-item>Grid Item<br />with multiple<br />rows of text.</duet-grid-item>
  <duet-grid-item>Grid Item</duet-grid-item>
  <duet-grid-item>Grid Item</duet-grid-item>
</duet-grid>

<duet-grid responsive alignment="stretch" class="grid-demo">
  <duet-grid-item>Grid Item<br />with multiple<br />rows of text.</duet-grid-item>
  <duet-grid-item>Grid Item</duet-grid-item>
  <duet-grid-item>Grid Item</duet-grid-item>
</duet-grid>

<duet-grid responsive alignment="baseline" class="grid-demo">
  <duet-grid-item>
    <div style="line-height: 1.2">Grid Item<br />with multiple<br />rows of text.</div>
  </duet-grid-item>
  <duet-grid-item><div style="line-height: 7">Grid Item</div></duet-grid-item>
  <duet-grid-item><div style="line-height: 3">Grid Item</div></duet-grid-item>
</duet-grid>
```

### Response
N/A
```

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

### Banner with Sources Example

Source: https://www.duetds.com/components/banner

Illustrates how to use the `sources` property for responsive images within the Duet Banner.

```APIDOC
## Banner with Sources Example

### Description
This example demonstrates using the `sources` attribute to provide different image sources based on media queries, enabling responsive image behavior.

### Method
N/A (This is a UI component example)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<duet-banner
  size="auto"
  icon="category-apartment"
  image="https://www.duetds.com/assets/img/example-brand1.png"
  sources='[
    {
      "srcset": "https://www.duetds.com/assets/img/example-banner1.jpg",
      "media": "(max-width: 36em)"
    },
    {
      "srcset": "https://www.duetds.com/assets/img/example-brand2.png",
      "media": "(max-width: 62em)"
    }
  ]'
>
  <span slot="heading">
    Kasko-vakuutus autosi turvaksi, lorem ipsum!
  </span>
  <span slot="description">
    Optional paragraph. Kasko-vakuutus autosi turvaksi,
    lorem ipsum dolor sit.
  </span>
  <duet-button
    slot="action"
    margin="none"
    variation="primary"
    icon="navigation-arrow-right"
    icon-right
  >
    Call to action
  </duet-button>
</duet-banner>
```

### Response
#### Success Response (200)
N/A (This is a UI component)

#### Response Example
N/A
```

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

### Install Duet Icons NPM Package

Source: https://www.duetds.com/iconography

Installs the Duet Icons package using npm. This is the recommended way to get started with using icons in your project.

```bash
npm install @duetds/icons
```

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

### Component File Structure Example

Source: https://www.duetds.com/dev-standards

Illustrates the recommended directory and file organization for a single Duet Design System component, including implementation, styles, and tests.

```bash
├── duet-button  
│   ├── duet-button.scss  
│   ├── duet-button.tsx  
│   ├── duet-button.spec.ts  
│   ├── duet-button.e2e.ts  
│   └── readme.md  
├── card-card  
│   ├── duet-card.scss  
│   ├── duet-card.tsx  
│   ├── duet-card.spec.ts  
│   ├── duet-card.e2e.ts  
│   └── readme.md
```

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

### Integrate Icon Copy Script into Start Command

Source: https://www.duetds.com/iconography

Shows how to integrate the `copy:icons` script into your application's start command. It provides examples for both UNIX-like environments using '&' and cross-platform solutions using `npm-run-all`.

```json
"start": "copy:icons & dev"
```

```json
"start": "npm-run-all copy:icons dev"
```

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

### Integration and Tutorials

Source: https://www.duetds.com/components/toolbar-dropdown

Information on integrating the Duet Toolbar Dropdown component and links to tutorials.

```APIDOC
## Integration and Tutorials

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Integration guidelines

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials
### Building Layouts
Tutorials
### Using CLI Tools
Tutorials
### Creating Custom Patterns
Tutorials
### Server Side Rendering
Tutorials
### Sharing Prototypes
Tutorials
### Usage With Markdown
```

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

### Duet Layout: Full-width with Top Alert, Main, and Sidebar

Source: https://www.duetds.com/components/layout

A comprehensive full-width layout example that includes a top alert, main content, and a sidebar. This setup allows for a rich content hierarchy and multiple information zones.

```html
<duet-layout>
  <div slot="top">
    <duet-alert icon="messaging-alert"> A simple alert with an icon on left! </duet-alert>
  </div>
  <div slot="main">
    <duet-card heading="Main">Main content</duet-card>
  </div>
  <div slot="sidebar">
    <duet-card heading="Sidebar">Sidebar content</duet-card>
  </div>
</duet-layout>
```

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

### Tab Component Tutorials

Source: https://www.duetds.com/components/tab

Links to tutorials for learning how to build layouts and use Duet components.

```APIDOC
## Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

* [Building Layouts](link-to-building-layouts-tutorial)
* [Using CLI Tools](link-to-using-cli-tools-tutorial)
* [Creating Custom Patterns](link-to-creating-custom-patterns-tutorial)
* [Server Side Rendering](link-to-server-side-rendering-tutorial)
* [Sharing Prototypes](link-to-sharing-prototypes-tutorial)
* [Usage With Markdown](link-to-usage-with-markdown-tutorial)
```

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

### Use Duet Components in HTML Markup

Source: https://www.duetds.com/using-components

Demonstrates how to use Duet Design System components directly within HTML markup after they have been included via CDN or installed via npm. This example shows a simple input field and a button component.

```html
<duet-input label="Your name" placeholder="John Doe"></duet-input>  
<duet-button variation="primary">Send</duet-button>
```

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

### Copy Duet Components to Project Directory

Source: https://www.duetds.com/using-components

This snippet demonstrates how to configure npm scripts to copy Duet component library files from `node_modules` to a specified project path. It uses `ncp` for copying and shows examples of integrating this task into `start` scripts using shell separators or `npm-run-all` for cross-platform compatibility.

```json
"scripts": {  
  "copy:components": "ncp node_modules/@duetds/components/lib src/SPECIFY_PATH"  
}

"start": "copy:components & dev"

"start": "npm-run-all copy:components dev"
```

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

### Implement Toolbar Item with Variations

Source: https://www.duetds.com/components/toolbar-item

Examples of how to initialize the duet-toolbar-item component with different visual variations and URL configurations.

```HTML
<duet-toolbar-item url="#henkilöasiakkaat" variation="negative">Henkilöasiakkaat</duet-toolbar-item>
<duet-toolbar-item url="#henkilöasiakkaat">Henkilöasiakkaat</duet-toolbar-item>
```

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

### Disabled Radio Example

Source: https://www.duetds.com/components/radio

Example of a disabled radio button.

```APIDOC
## Disabled Radio Example

### Description
Illustrates a radio button that is disabled and cannot be interacted with.

### HTML
```html
<duet-radio checked disabled label="Disabled"></duet-radio>
```
```

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

### Checked Radio Example

Source: https://www.duetds.com/components/radio

Example of a checked radio button.

```APIDOC
## Checked Radio Example

### Description
Demonstrates how to render a pre-selected radio button.

### HTML
```html
<duet-radio checked label="Checked" value="test"></duet-radio>
```

### JavaScript
```javascript
// Select the above radio component
var radio = document.querySelector("duet-radio");

// Listen for change events in the radio
radio.addEventListener("duetChange", function (e) {
  console.log("Change detected in radio", e.detail);
});
```
```

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

### Implement Configurable Action Buttons

Source: https://www.duetds.com/components/action-button

Shows how to use advanced properties like action-name, action-meta, and background colors, as well as how to handle events for multiple buttons.

```html
<duet-layout center>  
  <div slot="main">  
    <duet-card heading="Coloured action buttons with callback features">  
      <duet-action-button  
        action-name="go-back"  
        action-meta="{some:'string'}"  
        action-id="foobar2000"  
      ></duet-action-button>  
      <duet-action-button disabled></duet-action-button>  
      <duet-divider></duet-divider>  
      <duet-action-button background="danger" name="category-personal" color="gray-lightest"></duet-action-button>  
      <duet-action-button  
        disabled  
        background="danger"  
        name="category-personal"  
        color="gray-lightest"  
      ></duet-action-button>  
    </duet-card>  
  </div>  
</duet-layout>  
<script>  
  const actionBN = document.querySelectorAll('duet-action-button');  
  actionBN.forEach(item=>{
    item.addEventListener('duetActionEvent', (e) => {  
      console.log(e.detail);  
    });  
  })
</script>
```

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

### Unchecked Radio Example

Source: https://www.duetds.com/components/radio

Example of a standard unchecked radio button.

```APIDOC
## Unchecked Radio Example

### Description
Shows a basic, unchecked radio button.

### HTML
```html
<duet-radio label="Unchecked"></duet-radio>
```
```

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

### Install Duet Fonts using Yarn

Source: https://www.duetds.com/typography

Installs the Duet Design System fonts package using Yarn. This command achieves the same result as the NPM installation, allowing for self-hosting of the typefaces.

```bash
yarn add @duetds/fonts
```

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

### Default Toolbar Dropdown Example

Source: https://www.duetds.com/components/toolbar-dropdown

Example of a default Duet Toolbar Dropdown component.

```APIDOC
## Default Toolbar Dropdown Example

```html
<duet-toolbar-dropdown icon="navigation-language">
  <span slot="label">FI</span>
  <duet-toolbar-dropdown-link active>Suomeksi</duet-toolbar-dropdown-link>
  <duet-toolbar-dropdown-link>På Svenska</duet-toolbar-dropdown-link>
  <duet-toolbar-dropdown-link>In English</duet-toolbar-dropdown-link>
</duet-toolbar-dropdown>
```
```

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

### Responsive Spacer Examples - HTML

Source: https://www.duetds.com/components/spacer

Shows how to implement responsive spacing using the duet-spacer component by defining different sizes based on breakpoints.

```html
<div class="spacer-demo">
  <duet-spacer breakpoint="xx-large" size="xxxx-large"></duet-spacer>
  <duet-spacer breakpoint="x-large" size="xxx-large"></duet-spacer>
  <duet-spacer breakpoint="large" size="xx-large"></duet-spacer>
  <duet-spacer breakpoint="medium" size="x-large"></duet-spacer>
  <duet-spacer breakpoint="small" size="large"></duet-spacer>
  <duet-spacer breakpoint="x-small" size="medium"></duet-spacer>
  <duet-spacer breakpoint="xx-small" size="small"></duet-spacer>
</div>
```

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

### Duet Multiselect Example

Source: https://www.duetds.com/components/multiselect

Example of how to use the Duet Multiselect component with Greek gods.

```APIDOC
```html
<duet-multiselect
  label="Greek gods"
  open
  value='[
    { "label": "Aphrodite", "value": "a" },
    { "label": "Apollo", "value": "b" },
    { "label": "Ares", "value": "c" },
    { "label": "Artemis", "value": "d" },
    { "label": "Athena", "value": "e" },
    { "label": "Chaos", "value": "f" },
    { "label": "Chronos", "value": "g" },
    { "label": "Dionysus", "value": "x" },
    { "label": "Zeus", "value": "z" },
  ]'
></duet-multiselect>

<script type="module">
  // Listen for change events in the select
  const multiselect = document.querySelector('duet-multiselect');
  multiselect.addEventListener('duetChange', (e) => {
    console.log('Change event detected in multiselect:', e.detail);
  });
</script>
```
```

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

### Configuring External and Download Links

Source: https://www.duetds.com/components/link

Examples of using the external attribute to open links in new windows and the download attribute to specify file download behavior.

```html
<duet-link url="https://www.duetds.com" external>Link that opens a new window</duet-link>
<duet-link url="/assets/downloads/localtapiola-brand-guidelines.pdf" download="Graafinen-ohjeisto.pdf">Download attribute with value</duet-link>
<duet-spacer size="x-large"></duet-spacer>
```

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

### Negative Toolbar Dropdown Example

Source: https://www.duetds.com/components/toolbar-dropdown

Example of a negative variation Duet Toolbar Dropdown component.

```APIDOC
## Negative Toolbar Dropdown Example

```html
<duet-toolbar-dropdown icon="navigation-language" variation="negative">
  <span slot="label">FI</span>
  <duet-toolbar-dropdown-link active>Suomeksi</duet-toolbar-dropdown-link>
  <duet-toolbar-dropdown-link>På Svenska</duet-toolbar-dropdown-link>
  <duet-toolbar-dropdown-link>In English</duet-toolbar-dropdown-link>
</duet-toolbar-dropdown>
```
```

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

### Radio with HTML in Label Example

Source: https://www.duetds.com/components/radio

Example of a radio button with HTML content within its label.

```APIDOC
## Radio with HTML in Label Example

### Description
Demonstrates using the `label` slot to include rich HTML content in the radio button's label.

### HTML
```html
<duet-radio value="test" name="foo">
  <span slot="label">Label with <strong>HTML</strong></span>
</duet-radio>
```
```

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

### Initialize and Configure Duet Footer

Source: https://www.duetds.com/components/footer

Demonstrates how to select a Duet footer component, populate its items and menu arrays, and attach event listeners to handle user interactions like clicks on links, menu items, and the logo.

```javascript
(function(){
  var footer = document.querySelector("#duet-footer_footer_with_additional_info");
  footer.items = [
    { label: "09 453 4315 ", href: "tel:094534315 ", hideArrow: true },
    { label: "ajoneuvovakuutukset@lahitapiola.fi", href: "mailto:ajoneuvovakuutukset@lahitapiola.fi", hideArrow: true }
  ];
  footer.menu = [
    { label: "Turvallisuus ja käyttöehdot", href: "#" },
    { label: "Evästeet", href: "#" },
    { label: "Henkilötietojen käsittely", href: "#" }
  ];
  footer.addEventListener("duetItemClick", function (e) {
    console.log("Item clicked:", e.detail);
    e.detail.originalEvent.preventDefault();
  });
  footer.addEventListener("duetMenuClick", function (e) {
    console.log("Menu clicked:", e.detail);
    e.detail.originalEvent.preventDefault();
  });
  footer.addEventListener("duetLogoClick", function (e) {
    console.log("Logo clicked:", e.detail);
    e.detail.originalEvent.preventDefault();
  });
  footer.addEventListener("duetEvent", function (e) {
    console.log("Duet event:", e.detail);
  });
}());
```

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

### Integration and Tutorials

Source: https://www.duetds.com/components/submenu-bar-dropdown-link

Information on integrating the Submenu Bar Dropdown Link component with various frameworks and links to tutorials for building layouts and using Duet's features.

```APIDOC
## Integration and Tutorials

### Integration
For detailed guidelines on integration, event handling, and theming across different technologies (Angular, React, Vanilla JavaScript), please refer to the 'Using Components' documentation.

### Tutorials
Explore practical tutorials to learn how to build page layouts and utilize Duet's features, including:
- Building Layouts
- Using CLI Tools
- Creating Custom Patterns
- Server Side Rendering
- Sharing Prototypes
- Usage With Markdown
```

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

### Installing Ember Stencil Addon

Source: https://www.duetds.com/using-components

Command to install the ember-cli-stencil addon for integrating Duet components into Ember applications.

```bash
ember install ember-cli-stencil
```

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

### Complete HTML Page with Duet Integration

Source: https://www.duetds.com/building-layouts

Combines the basic HTML structure with the imported Duet Design System packages. This complete example shows how to set up an HTML page ready for building layouts with Duet.

```html
<!doctype html>
<html lang="fi">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Ota yhteyttä | LähiTapiola</title>
    <link rel="stylesheet" href="https://cdn.duetds.com/api/fonts/3.0.51/lib/localtapiola.css" integrity="sha384-5JYmtSD7nykpUvSmTW1CHMoBDkBZUpUmG0vuh+NUVtZag3F75Kr7+/JU3J7JV6Wq" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdn.duetds.com/api/css/4.1.1/lib/duet.min.css" integrity="sha384-+ZbvFfRkS7/4TEJKxK6wjFN7HwFEHEWaoRXZ0Fc1MrYNJmTNUhz2hmNbeGev1c/f" crossorigin="anonymous" />
    <script type="module" src="https://cdn.duetds.com/api/components/9.17.0/lib/duet/duet.esm.js" integrity="sha384-WCzBMj8k8KhF5ZU5/Pc2Ky1PNrSwMWObwxgoIcTftUCgB7z3+WVrLOwGhhyNA4wq" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.duetds.com/api/components/9.17.0/lib/duet/duet.js" integrity="sha384-fpIYGe2ZrKGNbShNMlRlHs40SPZNehZpCuCc2/IeOmDBjeabE7gf5hApTGX4TPGZ" crossorigin="anonymous"></script>
  </head>
  <body></body>
</html>
```

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

### Apply Spacing Utility Classes

Source: https://www.duetds.com/css-framework

Examples of using shorthand margin and padding classes following the duet-{property}{sides}-{size} naming convention.

```html
<div class="duet-pl-x-small">
  Element with x-small left padding.
</div>

<div class="duet-mx-medium">
  Element with medium left and right margin.
</div>

<div class="duet-p-large">
  Element with large padding on all sides.
</div>
```

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

### Implementing Duet Panel Variations

Source: https://www.duetds.com/components/panel

Demonstrates how to use the duet-panel component with different variations, border settings, and padding sizes. The example is wrapped in a duet-grid for layout management.

```html
<duet-grid grid-template="medium">
  <div>
    <duet-panel>
      <strong>Default variation is with white background - usually some other variation is wanted.</strong>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </duet-panel>

    <duet-panel variation="accent">
      <strong>Accent variation.</strong>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </duet-panel>

    <duet-panel border padding="large">
      <strong>Default variation with border and large padding.</strong>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </duet-panel>

    <duet-panel variation="secondary">
      <strong>Secondary variation.</strong>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </duet-panel>

    <duet-panel variation="accent-secondary">
      <strong>Accent secondary variation.</strong>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </duet-panel>

    <duet-panel variation="accent-secondary" border padding="small">
      <strong>Accent secondary variation with border and small padding.</strong>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </duet-panel>
  </div>
</duet-grid>
```

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

### Install Duet CSS Framework

Source: https://www.duetds.com/css-framework

Commands to install the Duet CSS package in your project using common package managers.

```bash
npm install @duetds/css
```

```bash
yarn add @duetds/css
```

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

### Install Duet React Components

Source: https://www.duetds.com/developers

Installs the specific wrapper package for React applications to ensure native-like integration with Duet components.

```bash
npm install @duetds/react
```

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

### Theming Configuration

Source: https://www.duetds.com/using-components

Explains how to apply themes globally or to specific components.

```APIDOC
## Theming Configuration

### Global Theme
To apply a theme globally, add the class to the html tag:
`<html class="duet-theme-turva">`

### Component Theme
To apply a theme to a specific component:
`<duet-component theme="turva"></duet-component>`
```

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

### Implementing a Popup Menu with Items

Source: https://www.duetds.com/components/popup-menu-item

This example demonstrates how to define a popup menu using the duet-popup-menu component and populate it with various duet-popup-menu-item elements. It also includes the necessary JavaScript to toggle the menu visibility via a button trigger.

```html
<duet-button size="small" id="menu-toggle">toggle menu</duet-button>
<duet-popup-menu accessibleLabel="Sample action menu" id="sample-menu">
  <duet-popup-menu-item leading-icon="category-pet">Some Action</duet-popup-menu-item>
  <duet-popup-menu-item>Another Action With a Much Longer Label</duet-popup-menu-item>
  <duet-popup-menu-item active trailing-icon="messaging-success">Active Action</duet-popup-menu-item>
  <duet-popup-menu-item url="#" trailing-text="⌘ A">Actually a link</duet-popup-menu-item>
</duet-popup-menu>

<script>
  document.getElementById('menu-toggle').addEventListener('click', function(evt) {
    const menu = document.getElementById('sample-menu');
    menu.controller = evt.target;
    menu.toggle();
  });
</script>
```

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

### Install Duet Design System Dependencies

Source: https://www.duetds.com/templates/grid-example

Commands to install the core Duet Design System packages including components, CSS, and fonts via npm.

```bash
npm install @duetds/components @duetds/css @duetds/fonts
```
Tokens:
Raw