Get help Color blind mode Low vision mode

Show more Ready

Show more is to hide content behind a simple button. It should be used when you want to hide most of the content of a larger block of content.

Open in new window 
<duet-paragraph>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Cras cursus tellus ut tortor commodo auctor.
  Nulla gravida, diam ut suscipit tempus, ipsum velit ultricies enim,
  sit amet scelerisque odio augue vitae neque. In dictum libero ex,
  vel lacinia nisl euismod faucibus. Nullam rhoncus, nulla ac gravida imperdiet,
  mi purus porta tortor, vestibulum porta diam enim vitae lacus.
  Nam tincidunt lorem id mauris faucibus dignissim. Nulla rhoncus,
  magna finibus pharetra sodales, ligula urna lobortis arcu,
  ac euismod ligula lacus at quam. Suspendisse ipsum urna, tempus quis arcu in,
  molestie pulvinar dui. Aenean et neque magna.
  Nunc pulvinar erat at risus commodo, sed interdum purus pellentesque.
  Nam at erat turpis. Integer volutpat consequat ipsum,
  sollicitudin sollicitudin erat auctor quis.
  Class aptent taciti sociosqu ad litora torquent per conubia nostra,
  per inceptos himenaeos. Aenean nec justo in libero tincidunt eleifend ut vel nisl.
</duet-paragraph>
<duet-show-more>
  <duet-paragraph margin="none">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Cras cursus tellus ut tortor commodo auctor.
    Nulla gravida, diam ut suscipit tempus, ipsum velit ultricies enim,
    sit amet scelerisque odio augue vitae neque. In dictum libero ex,
    vel lacinia nisl euismod faucibus. Nullam rhoncus, nulla ac gravida imperdiet,
    mi purus porta tortor, vestibulum porta diam enim vitae lacus.
    Nam tincidunt lorem id mauris faucibus dignissim. Nulla rhoncus,
    magna finibus pharetra sodales, ligula urna lobortis arcu,
    ac euismod ligula lacus at quam. Suspendisse ipsum urna, tempus quis arcu in,
    molestie pulvinar dui. Aenean et neque magna.
    Nunc pulvinar erat at risus commodo, sed interdum purus pellentesque.
    Nam at erat turpis. Integer volutpat consequat ipsum,
    sollicitudin sollicitudin erat auctor quis.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra,
    per inceptos himenaeos. Aenean nec justo in libero tincidunt eleifend ut vel nisl.
  </duet-paragraph>
</duet-show-more>

Properties #

Property Attribute Description Type Default
buttonMargin button-margin Controls the margin of the button component inside of show more. "auto" | "none" "auto"
buttonPadding button-padding Controls the padding of the button component inside of show more. "auto" | "none" "auto"
language language [DEPRECATED] this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing

The currently active language. This setting also changes the logo to match the chosen language.		 "en" | "fi" | "sv" getLanguage()
margin margin Controls the margin of the component. "auto" | "none" "auto"
open open Is the component expanded or collapsed. boolean false
showLessAccessibleLabel show-less-accessible-label Show less accessible label. Defaults to what is in showLessAccessibleLabelDefaults prop. string getLocaleString( this.showLessAccessibleLabelDefaults )
showLessAccessibleLabelDefaults -- Default translations for show less accessible label. DuetLangObject { fi: "Näytä vähemmän tästä aiheesta", sv: "Visa mindre om detta ämne", en: "Show less about this subject", }
showLessLabel show-less-label Show less label. Defaults to what is in showLessLabelDefaults prop. string getLocaleString(this.showLessLabelDefaults)
showLessLabelDefaults -- Default translations for show less label. DuetLangObject { fi: "Näytä vähemmän", sv: "Visa mindre", en: "Show less", }
showMoreAccessibleLabel show-more-accessible-label Show more accessible label. Defaults to what is in showMoreAccessibleLabelDefaults prop. string getLocaleString( this.showMoreAccessibleLabelDefaults )
showMoreAccessibleLabelDefaults -- Default translations for show more accessible label. DuetLangObject { fi: "Näytä lisää tästä aiheesta", sv: "Visa mer om detta ämne", en: "Show more about this subject", }
showMoreLabel show-more-label Show more label. Defaults to what is in showMoreLabelDefaults prop. string getLocaleString(this.showMoreLabelDefaults)
showMoreLabelDefaults -- Default translations for show more label. DuetLangObject { fi: "Näytä lisää", sv: "Visa mer", en: "Show more", }
theme theme Theme. "" | "default" | "turva" ""

Events #

Event Description Type
duetToggle Event emitted when opened/closed CustomEvent<{ component: "duet-show-more"; originalEvent: KeyboardEvent | MouseEvent; }>

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

When to use #

  • When you want to hide content which a customer can show if then want to.

When not to use #

  • When you don't have any content that can be used as a introduction to the show more.

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.