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 #
<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>
<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>
<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>
Properties #
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
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" | "" |
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.
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.
- Tab group component uses
role="tablist"
to convey its functionality correctly to assistive technologies.
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.
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
TutorialsUsing CLI Tools
TutorialsCreating Custom Patterns
TutorialsServer Side Rendering
TutorialsSharing Prototypes
TutorialsUsage With Markdown
Troubleshooting
If you experience any issues while using a component, please head over to the Support page for more guidelines and help.