---
status: beta
title: List
desc: Layout to display continuous rows of information and details.
ico: mdi:list-box
keywords:
  - menu
  - nav

props:
  - class: .prs-list
    type: component
    desc: Container
  
controls:
  - name: bordered
    type: toggle
    label: Bordered
    desc: Add a border around and between the list items.
    default: false

  - name: sub
    type: toggle
    label: Subtext
    desc: Show subtext row.
    default: false

preview: |
  <div class="w-screen max-w-xs">
    <ul
      class="prs-list"
      :class="{
        'prs-list-bordered': bordered,
      }"
    >
      <template x-for="i in 3" hidden>
        <li>
          <div class="prs-avatar"><span class="prs-avatar-placeholder">CS</span></div>
          <div>
            <a href="#">Coming soon...</a>
            <small x-show="sub" class="prs-list-subtext">Coming soon...</small>
          </div>
          <div class="prs-list-action">
            <div class="prs-tooltip" data-tip="Information" tabindex="0">
              <iconify-icon icon="mdi:information-outline" noobserver></iconify-icon>
            </div>
          </div>
        </li>
      </template>
    </ul>
  </div>

code:
  html: |
    <ul class="prs-list{bordered}">
      <li>
        List item{sub}
      </li>
    </ul>

  logic:
    bordered: "this.bordered ? ' prs-list-bordered' : ''"
    sub: "this.sub ? '\\n    <small class=\"prs-list-subtext\">Subtext</small>' : ''"
---