Skip to main content
LocalTapiola Turva

Paragraph ready

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

Examples

Open in new window
<duet-paragraph>
  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>
  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 utilise bigger than normal font sizes and are often below the main page heading.
</duet-paragraph>

Properties #

PropertyAttributeDescriptionTypeDefault
colorcolorCustom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary".string""
marginmarginControls the margin of the component. Can be one of: "auto", "none".string"auto"
themethemeTheme of the card. Can be one of: "default", "turva".string""
variationvariationStyle variation of the paragraph. Can be one of: "default", "intro".string"default"

Dependencies #

Used by #

Graph #

graph TD;
  duet-hero --> duet-paragraph
  style duet-paragraph fill:#f9f,stroke:#333,stroke-width:4px

Integration

For integration, events and theming guidelines, please see Using Components. That page explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.