---
title: "Alderwood Residential - Portfolio Performance"
platform: web
slug: alderwood-residential-portfolio-performance
screens: ["data-table"]
domains: ["real-estate"]
style: "flat"
fonts: ["Hanken Grotesk", "JetBrains Mono"]
roles: ["top-navigation-bar", "navigation-menu", "chip", "search-bar", "avatar", "button", "card", "segmented-control", "toolbar", "table", "pagination"]
score: {clean: 100, consistent: 85, accessible: 89, comprehensible: 56}
url: https://gui.farm/web/alderwood-residential-portfolio-performance
raw: https://gui.farm/web/alderwood-residential-portfolio-performance/design.guix
download: https://gui.farm/web/alderwood-residential-portfolio-performance.gui
---

# Alderwood Residential - Portfolio Performance

A dark, flat web data table where a small residential rental operator reviews their six Columbus properties by occupancy, monthly rent roll, status, and cap rate, with a rent-roll trend chart and portfolio KPIs.

- **Live preview:** https://gui.farm/web/alderwood-residential-portfolio-performance
- **Raw source:** https://gui.farm/web/alderwood-residential-portfolio-performance/design.guix
- **Download (.gui):** https://gui.farm/web/alderwood-residential-portfolio-performance.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Alderwood Residential - Portfolio Performance">
  <tokens>
    <color name="bg" value="#0F0F12" />
    <color name="surface" value="#17161B" />
    <color name="surface-2" value="#1F1D24" />
    <color name="track" value="#2A2733" />
    <color name="line" value="#2A2732" />
    <color name="line-strong" value="#3C3846" />
    <color name="text" value="#F5F3F0" />
    <color name="body" value="#CFCAC2" />
    <color name="muted" value="#A39D95" />
    <color name="faint" value="#8B857D" />
    <color name="accent" value="#F5A623" />
    <color name="accent-tint" value="#3A2A0E" />
    <color name="accent-ink" value="#1A1206" />
    <color name="ok" value="#5FB98A" />
    <color name="turn" value="#EC8A6B" />
    <number name="r-sm" value="6" />
    <number name="r-md" value="9" />
    <number name="r-lg" value="14" />
    <number name="r-pill" value="999" />
  </tokens>

  <fonts>
    <font family="Hanken Grotesk" source="google" weights="400 500 600 700" styles="normal" />
    <font family="JetBrains Mono" source="google" weights="400 500 600" styles="normal" />
  </fonts>

  <styles>
    <text-style name="Wordmark" font-family="Hanken Grotesk" font-size="16" font-weight="700" line-height="20" />
    <text-style name="Display" font-family="Hanken Grotesk" font-size="26" font-weight="700" line-height="32" />
    <text-style name="Body" font-family="Hanken Grotesk" font-size="13" font-weight="400" line-height="19" />
    <text-style name="Label" font-family="Hanken Grotesk" font-size="13" font-weight="500" line-height="18" />
    <text-style name="LabelB" font-family="Hanken Grotesk" font-size="13" font-weight="600" line-height="18" />
    <text-style name="Small" font-family="Hanken Grotesk" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Tiny" font-family="Hanken Grotesk" font-size="11" font-weight="500" line-height="14" />
    <text-style name="Eyebrow" font-family="Hanken Grotesk" font-size="11" font-weight="600" line-height="14" />
    <text-style name="Nav" font-family="Hanken Grotesk" font-size="13" font-weight="500" line-height="16" />
    <text-style name="Btn" font-family="Hanken Grotesk" font-size="13" font-weight="600" line-height="16" />
    <text-style name="Metric" font-family="JetBrains Mono" font-size="26" font-weight="600" line-height="32" />
    <text-style name="Num" font-family="JetBrains Mono" font-size="13" font-weight="500" line-height="17" />
    <text-style name="NumB" font-family="JetBrains Mono" font-size="13" font-weight="600" line-height="17" />
    <text-style name="Mono" font-family="JetBrains Mono" font-size="12" font-weight="500" line-height="15" />
  </styles>

  <col w="1440" fill="$bg" align="top-center">

    <!-- ================= TOP NAV ================= -->
    <row w="1440" h="60" p="0 120" gap="22" align="middle-left" fill="$bg" border="0 0 1 0 $line" role="top-navigation-bar">
      <row gap="10" align="middle-center">
        <row w="27" h="27" radius="$r-sm" fill="$accent" align="middle-center">
          <img src="https://api.iconify.design/lucide/trees.svg?color=%231A1206" w="16" h="16" />
        </row>
        <text text-style="Wordmark" value="Alderwood" color="$text" letter-spacing="-0.2" />
        <row p="2 7" radius="$r-sm" fill="$surface-2" align="middle-center">
          <text text-style="Tiny" value="RESIDENTIAL" color="$muted" letter-spacing="1" />
        </row>
      </row>
      <row gap="20" align="middle-left" role="navigation-menu">
        <text text-style="Nav" value="Overview" color="$muted" />
        <text text-style="Nav" value="Properties" color="$text" />
        <text text-style="Nav" value="Leasing" color="$muted" />
        <text text-style="Nav" value="Reports" color="$muted" />
      </row>
      <row w="fill" gap="12" align="middle-right">
        <row p="7 11" gap="8" radius="$r-md" fill="$surface" border="1 $line" align="middle-center" role="chip">
          <img src="https://api.iconify.design/lucide/map-pin.svg?color=%23A39D95" w="14" h="14" />
          <text text-style="Small" value="Columbus, OH" color="$body" />
          <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%238B857D" w="14" h="14" />
        </row>
        <row w="260" p="8 12" gap="9" radius="$r-md" fill="$surface" border="1 $line" align="middle-left" role="search-bar">
          <img src="https://api.iconify.design/lucide/search.svg?color=%238B857D" w="15" h="15" />
          <text w="fill" text-style="Small" value="Search properties or units" color="$faint" />
          <row p="1 5" radius="4" fill="$surface-2" border="1 $line"><text text-style="Tiny" value="/" color="$muted" /></row>
        </row>
        <row w="34" h="34" radius="$r-md" fill="$surface" border="1 $line" align="middle-center">
          <img src="https://api.iconify.design/lucide/bell.svg?color=%23A39D95" w="16" h="16" />
        </row>
        <row w="34" h="34" radius="$r-pill" fill="$accent-tint" border="1 $accent" align="middle-center" role="avatar">
          <text text-style="Tiny" value="RM" color="$accent" />
        </row>
      </row>
    </row>

    <!-- ================= CONTENT ================= -->
    <col w="1200" p="28 0 56 0" gap="20" align="top-left">

      <!-- page header -->
      <row w="1200" gap="16" align="bottom-left">
        <col w="fill" gap="6">
          <row gap="10" align="middle-left">
            <text text-style="Display" value="Portfolio Performance" color="$text" letter-spacing="-0.4" />
            <row p="3 9" radius="$r-pill" fill="$surface" border="1 $line" align="middle-center">
              <text text-style="Mono" value="6 properties · 24 units" color="$muted" />
            </row>
          </row>
          <text text-style="Body" value="Rent roll, occupancy, and yield across the Columbus portfolio. Reviewed as of Aug 18, 2026." color="$muted" />
        </col>
        <row gap="10" align="middle-right">
          <row p="9 13" gap="8" radius="$r-md" fill="$surface" border="1 $line" align="middle-center" role="button">
            <img src="https://api.iconify.design/lucide/download.svg?color=%23CFCAC2" w="15" h="15" />
            <text text-style="Btn" value="Export" color="$body" />
          </row>
          <row p="9 14" gap="8" radius="$r-md" fill="$accent" align="middle-center" role="button">
            <img src="https://api.iconify.design/lucide/plus.svg?color=%231A1206" w="15" h="15" />
            <text text-style="Btn" value="Add property" color="$accent-ink" />
          </row>
        </row>
      </row>

      <!-- KPI band -->
      <row w="1200" gap="24" align="top-left">

        <!-- rent roll trend card -->
        <col w="588" fill="$surface" border="1 $line" radius="$r-lg" p="18 20" gap="14" role="card">
          <row w="548" gap="12" align="top-left">
            <col w="fill" gap="6">
              <text text-style="Eyebrow" value="MONTHLY RENT ROLL" color="$faint" text-case="uppercase" letter-spacing="0.8" />
              <row gap="10" align="baseline">
                <text text-style="Metric" value="$34,330" color="$text" />
                <row gap="4" align="middle-left">
                  <img src="https://api.iconify.design/lucide/arrow-up-right.svg?color=%235FB98A" w="14" h="14" />
                  <text text-style="Small" value="+$430 vs Jul · 1.3%" color="$ok" />
                </row>
              </row>
              <text text-style="Small" value="Gross scheduled rent · 5 income properties · USD" color="$muted" />
            </col>
            <row h="30" fill="$bg" border="1 $line" radius="$r-md" p="3" gap="2" align="middle-left" role="segmented-control">
              <row h="24" p="0 10" align="middle-center"><text text-style="Tiny" value="3M" color="$muted" /></row>
              <row h="24" p="0 10" radius="$r-sm" fill="$accent" align="middle-center"><text text-style="Tiny" value="6M" color="$accent-ink" /></row>
              <row h="24" p="0 10" align="middle-center"><text text-style="Tiny" value="1Y" color="$muted" /></row>
            </row>
          </row>
          <img src="https://gui.farm/tools/charts/line-chart.svg?data=Mar:31.2,Apr:32.0,May:32.6,Jun:33.4,Jul:33.9,Aug:34.3&amp;line=%23F5A623&amp;curve=smooth&amp;area=on&amp;points=hide&amp;grid=show&amp;width=1096&amp;height=260" w="548" h="130" />
        </col>

        <!-- 4 stat tiles -->
        <grid w="588" cols="284 284" gap="20">
          <col w="284" fill="$surface" border="1 $line" radius="$r-lg" p="15 17" gap="8" role="card">
            <text text-style="Eyebrow" value="OCCUPANCY" color="$faint" text-case="uppercase" letter-spacing="0.8" />
            <text text-style="Metric" font-size="24" line-height="30" value="87.5%" color="$text" />
            <row w="250" h="8" radius="$r-pill" fill="$track" align="middle-left">
              <rect w="219" h="8" radius="$r-pill" fill="$accent" />
            </row>
            <text text-style="Small" value="21 of 24 units leased" color="$muted" />
          </col>
          <col w="284" fill="$surface" border="1 $line" radius="$r-lg" p="15 17" gap="7" role="card">
            <text text-style="Eyebrow" value="ANNUALIZED RENT" color="$faint" text-case="uppercase" letter-spacing="0.8" />
            <text text-style="Metric" font-size="24" line-height="30" value="$412K" color="$text" />
            <text text-style="Small" value="$411,960 gross scheduled / yr" color="$muted" />
          </col>
          <col w="284" fill="$surface" border="1 $line" radius="$r-lg" p="15 17" gap="7" role="card">
            <text text-style="Eyebrow" value="AVG CAP RATE" color="$faint" text-case="uppercase" letter-spacing="0.8" />
            <row gap="8" align="baseline">
              <text text-style="Metric" font-size="24" line-height="30" value="6.1%" color="$text" />
              <text text-style="Num" value="in-place" color="$muted" />
            </row>
            <text text-style="Small" value="Across 5 income properties" color="$muted" />
          </col>
          <col w="284" fill="$surface" border="1 $accent" radius="$r-lg" p="15 17" gap="7" role="card">
            <text text-style="Eyebrow" value="NEEDS ATTENTION" color="$accent" text-case="uppercase" letter-spacing="0.8" />
            <text text-style="Metric" font-size="24" line-height="30" value="2" color="$text" />
            <text text-style="Small" value="1 turnover · 1 in renovation" color="$muted" />
          </col>
        </grid>
      </row>

      <!-- TABLE CARD -->
      <col w="1200" fill="$surface" border="1 $line" radius="$r-lg" p="16 20 20 20" gap="14" role="card">

        <!-- toolbar -->
        <row w="1160" gap="12" align="middle-left" role="toolbar">
          <row h="34" fill="$bg" border="1 $line" radius="$r-md" p="3" gap="2" align="middle-left" role="segmented-control">
            <row h="26" p="0 12" radius="$r-sm" fill="$accent" align="middle-center"><text text-style="Small" value="All 6" color="$accent-ink" /></row>
            <row h="26" p="0 12" align="middle-center"><text text-style="Small" value="Stabilized 3" color="$muted" /></row>
            <row h="26" p="0 12" align="middle-center"><text text-style="Small" value="Leasing 1" color="$muted" /></row>
            <row h="26" p="0 12" align="middle-center"><text text-style="Small" value="Turnover 1" color="$muted" /></row>
            <row h="26" p="0 12" align="middle-center"><text text-style="Small" value="Renovation 1" color="$muted" /></row>
          </row>
          <row w="fill" gap="10" align="middle-right">
            <row p="7 11" gap="8" radius="$r-md" fill="$bg" border="1 $line" align="middle-center" role="chip">
              <img src="https://api.iconify.design/lucide/sliders-horizontal.svg?color=%23A39D95" w="14" h="14" />
              <text text-style="Small" value="Type: All" color="$body" />
              <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%238B857D" w="14" h="14" />
            </row>
            <row p="7 11" gap="8" radius="$r-md" fill="$bg" border="1 $line" align="middle-center" role="button">
              <img src="https://api.iconify.design/lucide/arrow-up-down.svg?color=%23A39D95" w="14" h="14" />
              <text text-style="Small" value="Sort: Rent roll" color="$body" />
            </row>
          </row>
        </row>

        <!-- table -->
        <col w="1160" gap="0" role="table">

          <!-- header -->
          <row w="1160" h="34" border="0 0 1 0 $line-strong" gap="16" align="middle-left">
            <row w="380" gap="6" align="middle-left">
              <text text-style="Tiny" value="PROPERTY" color="$muted" letter-spacing="0.5" />
              <img src="https://api.iconify.design/lucide/arrow-down.svg?color=%23F5A623" w="12" h="12" />
            </row>
            <text w="120" text-style="Tiny" value="TYPE" color="$muted" letter-spacing="0.5" />
            <text w="168" text-style="Tiny" value="OCCUPANCY" color="$muted" letter-spacing="0.5" />
            <text w="128" align="right" text-style="Tiny" value="RENT ROLL" color="$muted" letter-spacing="0.5" />
            <text w="140" text-style="Tiny" value="STATUS" color="$muted" letter-spacing="0.5" />
            <text w="104" align="right" text-style="Tiny" value="CAP RATE" color="$muted" letter-spacing="0.5" />
          </row>

          <!-- row 1: Third & Hamlet -->
          <row w="1160" h="60" border="0 0 1 0 $line" gap="16" align="middle-left">
            <row w="380" gap="11" align="middle-left">
              <row w="34" h="34" radius="$r-sm" fill="$accent-tint" border="1 $line-strong" align="middle-center"><img src="https://api.iconify.design/lucide/building-2.svg?color=%23F5A623" w="18" h="18" /></row>
              <col w="fill" gap="1">
                <text text-style="LabelB" value="Third &amp; Hamlet" color="$text" />
                <text text-style="Mono" value="S 3rd St · Italian Village" color="$faint" />
              </col>
            </row>
            <row w="120" align="middle-left"><row p="3 8" radius="$r-sm" fill="$surface-2" border="1 $line" align="middle-center"><text text-style="Tiny" value="6-Unit" color="$body" /></row></row>
            <row w="168" gap="12" align="middle-left">
              <text w="36" text-style="Mono" value="6/6" color="$body" />
              <row w="96" h="6" radius="$r-pill" fill="$track" align="middle-left"><rect w="96" h="6" radius="$r-pill" fill="$accent" /></row>
            </row>
            <text w="128" align="right" text-style="NumB" value="$9,240" color="$text" />
            <row w="140" gap="7" align="middle-left"><ellipse w="7" h="7" fill="$ok" /><text text-style="Label" value="Stabilized" color="$ok" /></row>
            <text w="104" align="right" text-style="Num" value="6.4%" color="$body" />
            <row w="24" align="middle-center"><img src="https://api.iconify.design/lucide/ellipsis-vertical.svg?color=%238B857D" w="16" h="16" /></row>
          </row>

          <!-- row 2: 418 Buttles Ave -->
          <row w="1160" h="60" border="0 0 1 0 $line" gap="16" align="middle-left">
            <row w="380" gap="11" align="middle-left">
              <row w="34" h="34" radius="$r-sm" fill="$accent-tint" border="1 $line-strong" align="middle-center"><img src="https://api.iconify.design/lucide/building.svg?color=%23F5A623" w="18" h="18" /></row>
              <col w="fill" gap="1">
                <text text-style="LabelB" value="418 Buttles Ave" color="$text" />
                <text text-style="Mono" value="Victorian Village" color="$faint" />
              </col>
            </row>
            <row w="120" align="middle-left"><row p="3 8" radius="$r-sm" fill="$surface-2" border="1 $line" align="middle-center"><text text-style="Tiny" value="Triplex" color="$body" /></row></row>
            <row w="168" gap="12" align="middle-left">
              <text w="36" text-style="Mono" value="3/3" color="$body" />
              <row w="96" h="6" radius="$r-pill" fill="$track" align="middle-left"><rect w="96" h="6" radius="$r-pill" fill="$accent" /></row>
            </row>
            <text w="128" align="right" text-style="NumB" value="$5,850" color="$text" />
            <row w="140" gap="7" align="middle-left"><ellipse w="7" h="7" fill="$ok" /><text text-style="Label" value="Stabilized" color="$ok" /></row>
            <text w="104" align="right" text-style="Num" value="6.1%" color="$body" />
            <row w="24" align="middle-center"><img src="https://api.iconify.design/lucide/ellipsis-vertical.svg?color=%238B857D" w="16" h="16" /></row>
          </row>

          <!-- row 3: Sylvan Court (leasing) -->
          <row w="1160" h="60" border="0 0 1 0 $line" gap="16" align="middle-left">
            <row w="380" gap="11" align="middle-left">
              <row w="34" h="34" radius="$r-sm" fill="$accent-tint" border="1 $line-strong" align="middle-center"><img src="https://api.iconify.design/lucide/building-2.svg?color=%23F5A623" w="18" h="18" /></row>
              <col w="fill" gap="1">
                <text text-style="LabelB" value="Sylvan Court" color="$text" />
                <text text-style="Mono" value="Sylvan Ave · Clintonville" color="$faint" />
              </col>
            </row>
            <row w="120" align="middle-left"><row p="3 8" radius="$r-sm" fill="$surface-2" border="1 $line" align="middle-center"><text text-style="Tiny" value="8-Unit" color="$body" /></row></row>
            <row w="168" gap="12" align="middle-left">
              <text w="36" text-style="Mono" value="7/8" color="$body" />
              <row w="96" h="6" radius="$r-pill" fill="$track" align="middle-left"><rect w="84" h="6" radius="$r-pill" fill="$accent" /></row>
            </row>
            <text w="128" align="right" text-style="NumB" value="$10,640" color="$text" />
            <row w="140" gap="7" align="middle-left"><ellipse w="7" h="7" fill="$accent" /><text text-style="Label" value="Leasing" color="$accent" /></row>
            <text w="104" align="right" text-style="Num" value="5.9%" color="$body" />
            <row w="24" align="middle-center"><img src="https://api.iconify.design/lucide/ellipsis-vertical.svg?color=%238B857D" w="16" h="16" /></row>
          </row>

          <!-- row 4: 72 Detroit Ave (turnover) -->
          <row w="1160" h="60" border="0 0 1 0 $line" gap="16" align="middle-left">
            <row w="380" gap="11" align="middle-left">
              <row w="34" h="34" radius="$r-sm" fill="$accent-tint" border="1 $line-strong" align="middle-center"><img src="https://api.iconify.design/lucide/house.svg?color=%23F5A623" w="18" h="18" /></row>
              <col w="fill" gap="1">
                <text text-style="LabelB" value="72 Detroit Ave" color="$text" />
                <text text-style="Mono" value="Franklinton" color="$faint" />
              </col>
            </row>
            <row w="120" align="middle-left"><row p="3 8" radius="$r-sm" fill="$surface-2" border="1 $line" align="middle-center"><text text-style="Tiny" value="Duplex" color="$body" /></row></row>
            <row w="168" gap="12" align="middle-left">
              <text w="36" text-style="Mono" value="1/2" color="$body" />
              <row w="96" h="6" radius="$r-pill" fill="$track" align="middle-left"><rect w="48" h="6" radius="$r-pill" fill="$accent" /></row>
            </row>
            <text w="128" align="right" text-style="NumB" value="$1,480" color="$text" />
            <row w="140" gap="7" align="middle-left"><ellipse w="7" h="7" fill="$turn" /><text text-style="Label" value="Turnover" color="$turn" /></row>
            <text w="104" align="right" text-style="Num" value="5.2%" color="$body" />
            <row w="24" align="middle-center"><img src="https://api.iconify.design/lucide/ellipsis-vertical.svg?color=%238B857D" w="16" h="16" /></row>
          </row>

          <!-- row 5: Maplewood Flats -->
          <row w="1160" h="60" border="0 0 1 0 $line" gap="16" align="middle-left">
            <row w="380" gap="11" align="middle-left">
              <row w="34" h="34" radius="$r-sm" fill="$accent-tint" border="1 $line-strong" align="middle-center"><img src="https://api.iconify.design/lucide/building.svg?color=%23F5A623" w="18" h="18" /></row>
              <col w="fill" gap="1">
                <text text-style="LabelB" value="Maplewood Flats" color="$text" />
                <text text-style="Mono" value="Grandview Heights" color="$faint" />
              </col>
            </row>
            <row w="120" align="middle-left"><row p="3 8" radius="$r-sm" fill="$surface-2" border="1 $line" align="middle-center"><text text-style="Tiny" value="4-Plex" color="$body" /></row></row>
            <row w="168" gap="12" align="middle-left">
              <text w="36" text-style="Mono" value="4/4" color="$body" />
              <row w="96" h="6" radius="$r-pill" fill="$track" align="middle-left"><rect w="96" h="6" radius="$r-pill" fill="$accent" /></row>
            </row>
            <text w="128" align="right" text-style="NumB" value="$7,120" color="$text" />
            <row w="140" gap="7" align="middle-left"><ellipse w="7" h="7" fill="$ok" /><text text-style="Label" value="Stabilized" color="$ok" /></row>
            <text w="104" align="right" text-style="Num" value="6.7%" color="$body" />
            <row w="24" align="middle-center"><img src="https://api.iconify.design/lucide/ellipsis-vertical.svg?color=%238B857D" w="16" h="16" /></row>
          </row>

          <!-- row 6: 905 Oakwood (renovation) -->
          <row w="1160" h="60" gap="16" align="middle-left">
            <row w="380" gap="11" align="middle-left">
              <row w="34" h="34" radius="$r-sm" fill="$surface-2" border="1 $line" align="middle-center"><img src="https://api.iconify.design/lucide/house.svg?color=%23A39D95" w="18" h="18" /></row>
              <col w="fill" gap="1">
                <text text-style="LabelB" value="905 Oakwood" color="$body" />
                <text text-style="Mono" value="Olde Towne East" color="$faint" />
              </col>
            </row>
            <row w="120" align="middle-left"><row p="3 8" radius="$r-sm" fill="$bg" border="1 $line" align="middle-center"><text text-style="Tiny" value="SFR" color="$faint" /></row></row>
            <row w="168" gap="12" align="middle-left">
              <text w="36" text-style="Mono" value="0/1" color="$faint" />
              <rect w="96" h="6" radius="$r-pill" fill="$track" />
            </row>
            <text w="128" align="right" text-style="NumB" value="$0" color="$muted" />
            <row w="140" gap="7" align="middle-left"><ellipse w="7" h="7" fill="$muted" /><text text-style="Label" value="Renovation" color="$muted" /></row>
            <text w="104" align="right" text-style="Num" value="n/a" color="$faint" />
            <row w="24" align="middle-center"><img src="https://api.iconify.design/lucide/ellipsis-vertical.svg?color=%238B857D" w="16" h="16" /></row>
          </row>

          <!-- total row -->
          <row w="1160" h="52" fill="$surface-2" radius="$r-md" gap="16" align="middle-left">
            <row w="700" gap="8" p="0 0 0 14" align="middle-left">
              <img src="https://api.iconify.design/lucide/sigma.svg?color=%23A39D95" w="15" h="15" />
              <text text-style="LabelB" value="Portfolio total · 6 properties · 21/24 leased" color="$text" />
            </row>
            <text w="128" align="right" text-style="NumB" value="$34,330" color="$accent" />
            <text w="140" text-style="Mono" value="/ mo" color="$muted" />
            <text w="104" align="right" text-style="NumB" value="6.1%" color="$body" />
          </row>
        </col>

        <!-- pagination -->
        <row w="1160" gap="12" align="middle-left" role="pagination">
          <text w="fill" text-style="Small" value="Showing 1 to 6 of 6 properties" color="$muted" />
          <row p="6 10" gap="7" radius="$r-md" fill="$bg" border="1 $line" align="middle-center" role="button">
            <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%238B857D" w="14" h="14" />
            <text text-style="Small" value="Prev" color="$faint" />
          </row>
          <row w="28" h="28" radius="$r-md" fill="$surface-2" border="1 $line" align="middle-center"><text text-style="Small" value="1" color="$text" /></row>
          <row p="6 10" gap="7" radius="$r-md" fill="$bg" border="1 $line" align="middle-center" role="button">
            <text text-style="Small" value="Next" color="$faint" />
            <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%238B857D" w="14" h="14" />
          </row>
        </row>
      </col>

      <!-- footer -->
      <row w="1200" p="4 2 0 2" gap="16" align="middle-left">
        <text w="fill" text-style="Small" value="Alderwood Residential · Rent roll figures are gross scheduled rent, net of concessions" color="$faint" />
        <text text-style="Small" value="Cap rate = in-place NOI / current basis" color="$faint" />
      </row>
    </col>
  </col>
</gui>
```