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>
Open in new window 
<duet-layout margin="none" center>
  <div slot="main">
    <duet-card heading="Scrollable list">
      <duet-paragraph>Try removing the cards so that the remaining fit in the container - the scrolling buttons will get hidden.</duet-paragraph>
      <duet-scrollable button-alignment="top">
          <duet-card class="scroll-card">Irure id est adipisicing ad id sunt deserunt. Mollit amet est amet enim. Aute laboris ut sint pariatur. Sit cillum minim cillum enim elit et mollit enim do sit.</duet-card>
          <duet-card class="scroll-card">Tempor dolore adipisicing fugiat id id tempor est aute irure. Ullamco velit nulla minim proident tempor ipsum sit labore esse incididunt. Elit officia fugiat exercitation laborum veniam amet tempor tempor consequat.</duet-card>
          <duet-card class="scroll-card">Est aliqua irure deserunt in excepteur minim elit pariatur pariatur aute consequat labore. Qui tempor sunt in enim deserunt laboris sit magna commodo sit aliqua laborum adipisicing. Duis et est consectetur dolor occaecat cupidatat tempor cupidatat id irure deserunt amet ullamco non. Cupidatat proident aliqua enim nulla do elit sunt. Officia laborum est minim sunt eu Lorem quis. Duis aliquip duis nisi mollit do laboris.</duet-card>
          <duet-card class="scroll-card">Eiusmod ex tempor irure sit ullamco irure sit laboris dolore nostrud. Proident labore eu minim labore nisi pariatur deserunt esse consequat nulla labore voluptate. Laborum duis nulla dolore eiusmod. Eu cillum velit nostrud exercitation. Velit deserunt esse deserunt ullamco amet velit velit velit aliqua elit ipsum.</duet-card>
          <duet-card class="scroll-card">Dolore consequat proident ullamco ad eiusmod nisi ex commodo. Dolore tempor ut ullamco commodo ipsum dolore voluptate esse culpa. Do laborum deserunt duis pariatur qui eiusmod cillum sunt duis voluptate consectetur nulla. Ea do dolore ipsum elit velit voluptate consectetur cupidatat esse.</duet-card>
          <duet-card class="scroll-card">Adipisicing eiusmod veniam velit eiusmod. Excepteur laboris irure sit excepteur qui velit excepteur elit laboris. Duis Lorem officia in anim. In sit do culpa quis tempor. Nostrud sunt consequat sunt duis officia incididunt consequat cillum excepteur mollit. Anim enim deserunt occaecat ad officia enim nulla. Excepteur reprehenderit ipsum eiusmod eu est consequat anim.</duet-card>

      </duet-scrollable>
    </duet-card>
  </div>
</duet-layout>

<style>
  .scroll-card {
    width: 250px;
  }
</style>

<script>
  document.querySelectorAll(".scroll-card").forEach(card => {
    const button = document.createElement("duet-button")
    button.textContent = "Remove"
    card.appendChild(button)
    button.addEventListener("click", () => {
      card.remove()
    })
  });
</script>

Properties #

Property Attribute Description Type Default
buttonAlignment button-alignment Vertical alignment of the previous and forward buttons. Defaults to center. "bottom" | "center" | "top" "center"
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.