Skip to main content
LocalTapiola Turva

Definition List ready

Definition Lists are used to display name/value pairs such as terms and definitions. Particularly useful for glossaries.

Examples

Open in new window
<duet-definition-list variation="striped"></duet-definition-list>

<script>
  var list = document.querySelector("duet-definition-list")

  list.items = [
    { label: "Nimi", value: "Lasse Mäkinen" },
    { label: "Osoite", value: "Kotikatu 23 A 4, 00220 Helsinki, Suomi" },
    { label: "Puhelin", value: "+358 400 123 456" },
    { label: "Email", value: "lasse.makinen@test.com" },
    { label: "Kieli", value: "Suomi" },
    { label: "Alueyhtiö", value: "Lähitapiola Keskinäinen Vakuutusyhtiö" }
  ]
</script>
Open in new window
<duet-definition-list></duet-definition-list>

<script>
  var list = document.querySelector("duet-definition-list")

  list.items = [
    { label: "Nimi", value: "Lasse Mäkinen" },
    { label: "Osoite", value: "Kotikatu 23 A 4, 00220 Helsinki, Suomi" },
    { label: "Puhelin", value: "+358 400 123 456" },
    { label: "Email", value: "lasse.makinen@test.com" },
    { label: "Kieli", value: "Suomi" },
    { label: "Alueyhtiö", value: "Lähitapiola Keskinäinen Vakuutusyhtiö" }
  ]
</script>

Properties #

PropertyAttributeDescriptionTypeDefault
items--An array of items for the definition list. Items have to include mandatory "label" and "value" fields to work.any[]undefined
marginmarginControls the margin of the component. Can be one of: "auto", "none".string"auto"
themethemeTheme of the definition list. Can be one of: "default", "turva".string""
variationvariationStyle variation of the definition list. Can be one of: "default", "striped".string"default"

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.