Porsche Design System

Text List

The p-text-list component is used to display listed data in form of an unordered or ordered list. A list depends on two parts (like any native HTML list): A list wrapper which defines the type of the list (unordered or ordered) and the list items. Nesting is also provided and follows the same nesting rules like native HTML lists. For more complex data you should consider the use of a data table.

The quick brown fox jumps over the lazy dog

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<p-text-list>
  <p-text-list-item>
    The quick brown fox jumps over the lazy dog
  </p-text-list-item>
  <p-text-list-item>
    The quick brown fox jumps over the lazy dog
    <p-text-list>
      <p-text-list-item>
        The quick brown fox jumps over the lazy dog
      </p-text-list-item>
      <p-text-list-item>
        The quick brown fox jumps over the lazy dog
      </p-text-list-item>
    </p-text-list>
  </p-text-list-item>
  <p-text-list-item>
    The quick brown fox jumps over the lazy dog
  </p-text-list-item>
</p-text-list>
<script>

</script>
</body>
</html>