Get help Color blind mode Low vision mode

Scrollable Ready

Scrollable is used as a container for a series of elements that you want to scroll horizontally.

The Scrollable component can take anything as long as they are a 1 dimensional series of buttons

Examples #

Open in new window 
<duet-layout margin="none" center>
  <div slot="main">
    <duet-card heading="plain>default">
      <duet-tab-group variation="plain" scrolls>
        <duet-tab label=" -- Item 1 -- " accessible-description="Extra information" selected>
          <duet-card margin="none" image="https://cdn.duetds.com/api/assets/illustrations/placeholder-dark.svg">
            <duet-heading level="h3">Card heading 1</duet-heading>
            <duet-paragraph margin="none">
              Card content lorem ipsum dolor sit amet consectetuer adipiscing elit no nummy laoreet lorem ipsum.
            </duet-paragraph>
            <duet-spacer></duet-spacer>
            <duet-button
              fixed
              url="#"
              padding="none"
              variation="plain"
              icon="action-arrow-right-small"
              icon-size="small"
              icon-right
            >
              Read more
            </duet-button>
          </duet-card>
        </duet-tab>
        <duet-tab label=" -- Item 2 -- " accessible-description="Extra information">
          <duet-card margin="none" image="https://cdn.duetds.com/api/assets/illustrations/placeholder-dark.svg">
            <duet-heading level="h3">Card heading 2</duet-heading>
            <duet-paragraph margin="none">
              Card content lorem ipsum dolor sit amet consectetuer adipiscing elit no nummy laoreet lorem ipsum.
            </duet-paragraph>
            <duet-spacer></duet-spacer>
            <duet-button
              fixed
              url="#"
              padding="none"
              variation="plain"
              icon="action-arrow-right-small"
              icon-size="small"
              icon-right
            >
              Read more
            </duet-button>
          </duet-card>
        </duet-tab>
        <duet-tab label=" -- Item 3 -- " accessible-description="Extra information">
          <duet-heading level="h3">Card heading 1</duet-heading>
        </duet-tab>
        <duet-tab label=" -- Item 4 -- " accessible-description="Extra information">
          <duet-heading level="h3">Card heading 2</duet-heading>
        </duet-tab>
        <duet-tab label=" -- Item 5 -- " accessible-description="Extra information">
          <duet-heading level="h3">Card heading 3</duet-heading>
        </duet-tab>
        <duet-tab label=" -- Item 6 -- " accessible-description="Extra information">
          <duet-heading level="h3">Card heading 4</duet-heading>
        </duet-tab>
        <duet-tab label=" -- Item 7 -- " accessible-description="Extra information">
          <duet-heading level="h3">Card heading 5</duet-heading>
        </duet-tab>
        <duet-tab label=" -- Item 8 -- " accessible-description="Extra information">
          <duet-heading level="h3">Card heading 6</duet-heading>
        </duet-tab>
        <duet-tab label=" -- Item 9 -- " accessible-description="Extra information">
          <duet-heading level="h3">Card heading 7</duet-heading>
        </duet-tab>
        <duet-tab label=" -- Item 10 -- " accessible-description="Extra information">
          <duet-heading level="h3">Card heading 8</duet-heading>
        </duet-tab>
      </duet-tab-group>
    </duet-card>
  </div>
</duet-layout>
Open in new window 
<duet-layout margin="none" center>
  <div slot="main" aria-live="polite">
    <duet-card heading="plain>default">
      <duet-tab-group variation="plain" scrolls>
        <duet-tab label=" -- Item 1 -- " accessible-description="Extra information" selected>
          <duet-card margin="none" image="https://cdn.duetds.com/api/assets/illustrations/placeholder-dark.svg">
            <duet-heading level="h3">Card heading 1</duet-heading>
            <duet-paragraph margin="none">
              Card content lorem ipsum dolor sit amet consectetuer adipiscing elit no nummy laoreet lorem ipsum.
            </duet-paragraph>
            <duet-spacer></duet-spacer>
            <duet-button
              fixed
              url="#"
              padding="none"
              variation="plain"
              icon="action-arrow-right-small"
              icon-size="small"
              icon-right
            >
              Read more
            </duet-button>
          </duet-card>
        </duet-tab>
        <duet-tab label=" -- Item 2 -- " accessible-description="Extra information">
          <duet-card margin="none" image="https://cdn.duetds.com/api/assets/illustrations/placeholder-dark.svg">
            <duet-heading level="h3">Card heading 2</duet-heading>
            <duet-paragraph margin="none">
              Card content lorem ipsum dolor sit amet consectetuer adipiscing elit no nummy laoreet lorem ipsum.
            </duet-paragraph>
            <duet-spacer></duet-spacer>
            <duet-button
              fixed
              url="#"
              padding="none"
              variation="plain"
              icon="action-arrow-right-small"
              icon-size="small"
              icon-right
            >
              Read more
            </duet-button>
          </duet-card>
        </duet-tab>
        <duet-tab label=" -- Item 3 -- " accessible-description="Extra information">
          <duet-heading level="h3">Card heading 1</duet-heading>
        </duet-tab>
        <duet-tab label=" -- Item 4 -- " accessible-description="Extra information">
          <duet-heading level="h3">Card heading 2</duet-heading>
        </duet-tab>
        <duet-tab label=" -- Item 5 -- " accessible-description="Extra information">
          <duet-heading level="h3">Card heading 3</duet-heading>
        </duet-tab>
        <duet-tab label=" -- Item 6 -- " accessible-description="Extra information">
          <duet-heading level="h3">Card heading 4</duet-heading>
        </duet-tab>
        <duet-tab label=" -- Item 7 -- " accessible-description="Extra information">
          <duet-heading level="h3">Card heading 5</duet-heading>
        </duet-tab>
        <duet-tab label=" -- Item 8 -- " accessible-description="Extra information">
          <duet-heading level="h3">Card heading 6</duet-heading>
        </duet-tab>
        <duet-tab label=" -- Item 9 -- " accessible-description="Extra information">
          <duet-heading level="h3">Card heading 7</duet-heading>
        </duet-tab>
        <duet-tab label=" -- Item 10 -- " accessible-description="Extra information">
          <duet-heading level="h3">Card heading 8</duet-heading>
        </duet-tab>
      </duet-tab-group>
    </duet-card>
  </div>
</duet-layout>
Open in new window 
<style>
  .duet-dummy-placeholder {
    height: 170px;
    width: 150px;
    background-color: #fff;
    border: 1px solid #ccc;
    min-width: 200px;
    font-size: 50px;
    color: #c3c3c3;
  }
</style>
<duet-layout margin="none" center>
  <div slot="main">
    <duet-card heading="plain>scrollable items">
      <duet-scrollable>
        <button class="duet-dummy-placeholder" aria-label="Click to open image 1">1</button>
        <button class="duet-dummy-placeholder" aria-label="Click to open image 2">2</button>
        <button class="duet-dummy-placeholder" aria-label="Click to open image 3">3</button>
        <button class="duet-dummy-placeholder" aria-label="Click to open image 4">4</button>
        <button class="duet-dummy-placeholder" aria-label="Click to open image 5">5</button>
        <button class="duet-dummy-placeholder" aria-label="Click to open image 6">6</button>
        <button class="duet-dummy-placeholder" aria-label="Click to open image 7">7</button>
        <button class="duet-dummy-placeholder" aria-label="Click to open image 8">8</button>
        <button class="duet-dummy-placeholder" aria-label="Click to open image 9">9</button>
        <button class="duet-dummy-placeholder" aria-label="Click to open image 10">10</button>
        <button class="duet-dummy-placeholder" aria-label="Click to open image 11">11</button>
      </duet-scrollable>
    </duet-card>
  </div>
</duet-layout>
Open in new window 
<style>
  .duet-dummy-placeholder {
    height: 170px;
    width: 150px;
    background-color: #fff;
    border: 1px solid #ccc;
    min-width: 200px;
    font-size: 50px;
    color: #c3c3c3;
  }
</style>
<duet-layout margin="none" center>
  <div slot="main">
    <duet-card heading="plain>scrollable items">
      <duet-caption>This element will not show any scrollable buttons if all elements can be shown at the same time, try to decrease the window size until the some of the elements below are obscured</duet-caption>
      <duet-scrollable>
        <button class="duet-dummy-placeholder" aria-label="Click to open image 1">1</button>
        <button class="duet-dummy-placeholder" aria-label="Click to open image 2">2</button>
        <button class="duet-dummy-placeholder" aria-label="Click to open image 3">3</button>
      </duet-scrollable>
    </duet-card>
  </div>
</duet-layout>
Open in new window 
<style>
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  duet-heading {
    text-align: center;
  }
  duet-promo-card {
    min-width: 319px;
    max-width: 319px;
  }
</style>
<duet-layout>
  <div slot="main">
    <div class="container">
      <duet-heading margin="none">LähiTapiola näkökulmat</duet-heading>
      <duet-scrollable id="#duet-scrollable_scrollable_promo-cards" buttons="false" center>
        <span slot="collapse-button-label">Näytä kaikki näkökulmat</span>
        <duet-promo-card image="https://www.duetds.com/assets/img/example-banner1.jpg" margin="none">
          <span slot="heading">Card heading</span>
          <span slot="description">
            Card content lorem ipsum dolor sit amet
            Card content lorem ipsum dolor sit amet
          </span>
        </duet-promo-card>
        <duet-promo-card image="https://www.duetds.com/assets/img/example-banner1.jpg" margin="none">
          <span slot="heading">Card heading</span>
          <span slot="description">Card content lorem ipsum dolor sit amet</span>
        </duet-promo-card>
        <duet-promo-card image="https://www.duetds.com/assets/img/example-banner1.jpg" margin="none">
          <span slot="heading">Card heading</span>
          <span slot="description">Card content lorem ipsum dolor sit amet</span>
        </duet-promo-card>
      </duet-scrollable>
    </div>
  </div>
</duet-layout>

<script>
  const scrollable = document.querySelector("#duet-scrollable_scrollable_promo-cards")
  const collapseButtonLabel = document.querySelector("span[slot=collapse-button-label]")

const observer = new MutationObserver((mutationList, observer) => {
    if (scrollable.collapsed) {
      collapseButtonLabel.innerHTML = "Sulje"
    } else {
      collapseButtonLabel.innerHTML = "Näytä kaikki näkökulmat"
    }
  })
observer.observe(scrollable, { attributes: true, childList: false, subtree: false })
</script>

Properties #

Property Attribute Description Type Default
buttons buttons Whether or not include previous and forward buttons. Defaults to true. boolean true
center center Center the scrollable list. Defaults to false. boolean false
collapsed collapsed Boolean to collapse scrollable items into normal flow. boolean false
identifier identifier Optional identifier to add to buttons in the tab group string ""
selected selected Selected element number 0
theme theme Theme of duet-tab-scrollable. When used this will override the color setting and use "primary" or "primary-turva" as the color depending on which theme is chosen. "" | "default" | "turva" ""

Slots #

Slot Description
"collapse-button-label" This is to label collapse button.

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.
The Scrollable component wil only show "navigation/Scroll" arrows when its content is occluded, see the Scrollable list of images - dynamic arrow buttons example for a demonstration

When to use #

  • If you want a user to be able to horizontally navigate multiple items, such as images, card etc.

When not to use #

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

Integration

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

Tutorials

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

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.