Get help Color blind mode Low vision mode

Paragraph Ready

Paragraphs are blocks of text separated from adjacent blocks by blank lines.

Examples #

Open in new window 
<duet-paragraph>
  Majasalmi muistaa tarkalleen, <duet-link url="#" external>koska hän</duet-link> otti ensiaskeleensa kohti
  taloudellista riippumattomuutta. Tämä tapahtui 31.3.1998, kun hän avasi asuntosäästötilin ja talletti sille tuhat
  markkaa. Tänä päivänä Majasalmi nauttii vakaasta taloudellisesta tilanteesta ja jakaa valmentajana osaamistaan myös
  muille.
</duet-paragraph>
<duet-paragraph>
  Majasalmi havahtui taloudellisen hyvinvoinnin merkitykseen 1990-luvun lamavuosina, kun oma isä jäi työttömäksi.
  ”Ymmärsin tuolloin, että talouden on kestettävä myrskyjä. Niiden varalta on hyvä olla varallisuutta, ja nimenomaan
  omissa nimissä eikä esimerkiksi puolisolla,” Majasalmi toteaa.
</duet-paragraph>
Open in new window 
<duet-paragraph variation="intro">
  This is an intro paragraph. Intro Paragraphs are used as distinct sections of text designed to make a bold visual
  statement. They utilize bigger than normal font sizes and are often below the main page heading.
</duet-paragraph>
Open in new window 
<duet-paragraph size="small">
  Majasalmi muistaa tarkalleen, koska hän otti ensiaskeleensa kohti taloudellista riippumattomuutta. Tämä tapahtui
  31.3.1998, kun hän avasi asuntosäästötilin ja talletti sille tuhat markkaa. Tänä päivänä Majasalmi nauttii vakaasta
  taloudellisesta tilanteesta ja jakaa valmentajana osaamistaan myös muille.
</duet-paragraph>
<duet-paragraph size="small">
  Majasalmi havahtui taloudellisen hyvinvoinnin merkitykseen 1990-luvun lamavuosina, kun oma isä jäi työttömäksi.
  ”Ymmärsin tuolloin, että talouden on kestettävä myrskyjä. Niiden varalta on hyvä olla varallisuutta, ja nimenomaan
  omissa nimissä eikä esimerkiksi puolisolla,” Majasalmi toteaa.
</duet-paragraph>
Open in new window 
<duet-paragraph color="primary">
  Majasalmi muistaa tarkalleen, koska hän otti ensiaskeleensa kohti taloudellista riippumattomuutta. Tämä tapahtui
  31.3.1998, kun hän avasi asuntosäästötilin ja talletti sille tuhat markkaa. Tänä päivänä Majasalmi nauttii vakaasta
  taloudellisesta tilanteesta ja jakaa valmentajana osaamistaan myös muille.
</duet-paragraph>
<duet-paragraph color="success">
  Majasalmi havahtui taloudellisen hyvinvoinnin merkitykseen 1990-luvun lamavuosina, kun oma isä jäi työttömäksi.
  ”Ymmärsin tuolloin, että talouden on kestettävä myrskyjä. Niiden varalta on hyvä olla varallisuutta, ja nimenomaan
  omissa nimissä eikä esimerkiksi puolisolla,” Majasalmi toteaa.
</duet-paragraph>
Open in new window 
<duet-paragraph weight="bold">
  Majasalmi muistaa tarkalleen, <duet-link url="#" external>koska hän</duet-link> otti ensiaskeleensa kohti
  taloudellista riippumattomuutta. Tämä tapahtui 31.3.1998, kun hän avasi asuntosäästötilin ja talletti sille tuhat
  markkaa. Tänä päivänä Majasalmi nauttii vakaasta taloudellisesta tilanteesta ja jakaa valmentajana osaamistaan myös
  muille.
</duet-paragraph>
<duet-paragraph weight="semi-bold">
  Majasalmi havahtui taloudellisen hyvinvoinnin merkitykseen 1990-luvun lamavuosina, kun oma isä jäi työttömäksi.
  ”Ymmärsin tuolloin, että talouden on kestettävä myrskyjä. Niiden varalta on hyvä olla varallisuutta, ja nimenomaan
  omissa nimissä eikä esimerkiksi puolisolla,” Majasalmi toteaa.
</duet-paragraph>
Open in new window 
<style>
  duet-paragraph::part(duet-paragraph) {
    text-decoration: underline
  }
</style>
<duet-paragraph variation="intro">
  Underlined intro paragraph.
</duet-paragraph>

Properties #

Property Attribute Description Type Default
color color Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary". string ""
margin margin Controls the margin of the component. "auto" | "none" "auto"
size size Controls the size of the paragraph. "medium" | "small" "medium"
theme theme Theme of the paragraph. "" | "default" | "turva" ""
variation variation Style variation of the paragraph. "default" | "intro" "default"
weight weight Controls the Font-Weight of the paragraph. "bold" | "semi-bold" undefined

Shadow Parts #

Part Description
"duet-paragraph" piercing selector for styling the paragraph

Usage #

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

When to use #

  • When you need to display blocks of text.
  • To make text content more accessible as assistive technology provides shortcuts to let their users skip to the next or previous paragraph.

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.