<div class="filter-card">
  <h3 class="title">Results <span class="title-bold">Filtering</span></h3>
  <p class="subtitle">Listed content is categorized by the following groups:</p>

  <mat-list class="list">
    <mat-list-item class="list-wrapper">
      <div class="list-item">
        <p class="list-title">Hot Ideas</p>
        <mat-chip-listbox>
          <mat-chip-option color="primary" selected class="list-badge">34</mat-chip-option>
        </mat-chip-listbox>
      </div>
    </mat-list-item>
    <mat-list-item class="list-wrapper">
      <div class="list-item">
        <p class="list-title">Latest Pictures</p>
        <mat-chip-listbox>
          <mat-chip-option color="warn" selected class="list-badge">9</mat-chip-option>
        </mat-chip-listbox>
      </div>
    </mat-list-item>
    <mat-list-item class="list-wrapper">
      <div class="list-item">
        <p class="list-title">Labels of Day</p>
      </div>
    </mat-list-item>
    <mat-list-item class="list-wrapper">
      <div class="list-item">
        <p class="list-title">Resent Movies</p>
      </div>
    </mat-list-item>
    <mat-list-item class="list-wrapper">
      <div class="list-item">
        <p class="list-title">Globals</p>
        <mat-chip-listbox>
          <mat-chip-option color="accent" selected class="list-badge">18</mat-chip-option>
        </mat-chip-listbox>
      </div>
    </mat-list-item>
  </mat-list>
</div>
