---
title: "Cassette Kids — Ratings & Reviews"
platform: android
slug: cassette-kids-ratings-reviews
screens: ["reviews"]
domains: ["gaming"]
style: null
fonts: ["Roboto", "Space Grotesk"]
roles: ["top-navigation-bar", "button", "divider", "chip", "toolbar"]
score: {clean: 100, consistent: 77, accessible: 87, comprehensible: 16}
url: https://gui.farm/android/cassette-kids-ratings-reviews
raw: https://gui.farm/android/cassette-kids-ratings-reviews/design.guix
download: https://gui.farm/android/cassette-kids-ratings-reviews.gui
---

# Cassette Kids — Ratings & Reviews

A Memphis-style Android ratings and reviews screen where players weigh an indie co-op platformer's overall score, star distribution, per-category breakdown, and written player reviews before installing.

- **Live preview:** https://gui.farm/android/cassette-kids-ratings-reviews
- **Raw source:** https://gui.farm/android/cassette-kids-ratings-reviews/design.guix
- **Download (.gui):** https://gui.farm/android/cassette-kids-ratings-reviews.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Cassette Kids — Ratings &amp; Reviews">
  <tokens>
    <color name="ink" value="#17130F" />
    <color name="paper" value="#FBF5E9" />
    <color name="white" value="#FFFFFF" />
    <color name="muted" value="#6B6357" />
    <color name="pink" value="#D6106C" />
    <color name="pink-soft" value="#FFDCEC" />
    <color name="yellow" value="#FDBA2D" />
    <color name="yellow-soft" value="#FFEFC6" />
    <color name="cyan" value="#16A9C9" />
    <color name="cyan-soft" value="#D2F0F6" />
    <color name="track" value="#ECE4D3" />
    <number name="r-lg" value="18" />
    <number name="r-md" value="12" />
    <number name="r-sm" value="8" />
    <number name="r-pill" value="999" />
  </tokens>

  <fonts>
    <font family="Space Grotesk" source="google" weights="500 600 700" styles="normal" />
    <font family="Roboto" source="google" weights="400 500 700" styles="normal" />
  </fonts>

  <styles>
    <text-style name="Status" font-family="Roboto" font-size="12" font-weight="700" line-height="16" />
    <text-style name="Eyebrow" font-family="Roboto" font-size="10" font-weight="700" line-height="13" letter-spacing="1.4" />
    <text-style name="NavTitle" font-family="Space Grotesk" font-size="17" font-weight="700" line-height="22" />
    <text-style name="GameTitle" font-family="Space Grotesk" font-size="21" font-weight="700" line-height="24" letter-spacing="-0.2" />
    <text-style name="Meta" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="BadgeSm" font-family="Roboto" font-size="10" font-weight="700" line-height="13" letter-spacing="0.4" />
    <text-style name="BigScore" font-family="Space Grotesk" font-size="52" font-weight="700" line-height="52" letter-spacing="-1.5" />
    <text-style name="OutOf" font-family="Roboto" font-size="13" font-weight="700" line-height="16" />
    <text-style name="Caption" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="StatBig" font-family="Space Grotesk" font-size="24" font-weight="700" line-height="26" />
    <text-style name="StatCap" font-family="Roboto" font-size="10" font-weight="700" line-height="13" letter-spacing="0.3" />
    <text-style name="DistDigit" font-family="Roboto" font-size="12" font-weight="700" line-height="16" />
    <text-style name="Count" font-family="Roboto" font-size="12" font-weight="700" line-height="16" />
    <text-style name="SectionLbl" font-family="Roboto" font-size="11" font-weight="700" line-height="14" letter-spacing="0.9" />
    <text-style name="AttrLabel" font-family="Roboto" font-size="13" font-weight="500" line-height="17" />
    <text-style name="AttrNum" font-family="Space Grotesk" font-size="13" font-weight="700" line-height="17" />
    <text-style name="ChipTxt" font-family="Roboto" font-size="12" font-weight="700" line-height="16" />
    <text-style name="Avatar" font-family="Space Grotesk" font-size="15" font-weight="700" line-height="18" />
    <text-style name="Name" font-family="Roboto" font-size="14" font-weight="700" line-height="18" />
    <text-style name="Date" font-family="Roboto" font-size="12" font-weight="400" line-height="16" />
    <text-style name="RevTitle" font-family="Space Grotesk" font-size="15" font-weight="700" line-height="20" />
    <text-style name="Body" font-family="Roboto" font-size="13" font-weight="400" line-height="19" />
    <text-style name="Helpful" font-family="Roboto" font-size="12" font-weight="700" line-height="16" />
    <text-style name="LinkTxt" font-family="Space Grotesk" font-size="14" font-weight="700" line-height="18" />
    <text-style name="BtnTxt" font-family="Space Grotesk" font-size="15" font-weight="700" line-height="20" letter-spacing="0.2" />
  </styles>

  <col w="360" fill="$paper">

    <row w="fill" h="28" p="0 16" gap="auto" align="middle-center">
      <text text-style="Status" value="9:41" color="$ink" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt.svg?color=%2317130F" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi.svg?color=%2317130F" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full.svg?color=%2317130F" w="15" h="15" />
      </row>
    </row>

    <row role="top-navigation-bar" w="fill" h="58" p="0 14" gap="auto" align="middle-center">
      <row role="button" w="42" h="42" radius="$r-md" fill="$white" border="3 $ink" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%2317130F" w="22" h="22" />
      </row>
      <col gap="1" align="middle-center">
        <text text-style="Eyebrow" value="COMMUNITY" color="$pink" align="center" />
        <text text-style="NavTitle" value="Ratings &amp; Reviews" color="$ink" align="center" />
      </col>
      <row role="button" w="42" h="42" radius="$r-md" fill="$white" border="3 $ink" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/ios-share.svg?color=%2317130F" w="20" h="20" />
      </row>
    </row>

    <col w="fill" p="6 16 18 16" gap="14">

      <row w="fill" gap="13" align="middle-center">
        <frame w="72" h="72">
          <rect x="4" y="4" w="68" h="68" radius="$r-md" fill="$ink" />
          <img x="0" y="0" src="https://images.unsplash.com/photo-1558324190-c940eb141401?auto=format&amp;fit=crop&amp;w=180&amp;h=180&amp;q=80" w="68" h="68" radius="$r-md" fit="cover" border="3 $ink" />
        </frame>
        <col w="fill" gap="4">
          <text text-style="Eyebrow" value="CO-OP PLATFORMER" color="$muted" />
          <text text-style="GameTitle" value="Cassette Kids" color="$ink" />
          <row gap="7" align="middle-center">
            <text text-style="Meta" value="Lo-Fi Llama Games" color="$muted" />
            <row h="18" radius="$r-sm" fill="$cyan-soft" border="2 $ink" p="0 6" align="middle-center">
              <text text-style="BadgeSm" value="E10+" color="$ink" />
            </row>
          </row>
        </col>
      </row>

      <row w="fill" gap="12" align="middle-center">
        <rect w="14" h="14" radius="$r-pill" fill="$yellow" border="2 $ink" />
        <img src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23D6106C" w="17" h="17" />
        <rect w="12" h="12" radius="3" fill="$cyan" border="2 $ink" />
        <img src="https://api.iconify.design/material-symbols/change-history-rounded.svg?color=%2317130F" w="15" h="15" />
        <rect w="13" h="13" radius="$r-pill" fill="$pink" border="2 $ink" />
        <img src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%2316A9C9" w="15" h="15" />
        <rect w="12" h="12" radius="3" fill="$yellow" border="2 $ink" />
      </row>

      <col w="fill" fill="$ink" radius="$r-lg" p="0 6 6 0">
        <col w="fill" fill="$white" border="3 $ink" radius="$r-lg" p="16" gap="14">
          <row w="fill" gap="auto" align="top-left">
            <col gap="7">
              <row gap="8" align="bottom-left">
                <text text-style="BigScore" value="4.4" color="$pink" />
                <col gap="4" align="bottom-left">
                  <row gap="2" align="middle-center">
                    <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="20" h="20" />
                    <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="20" h="20" />
                    <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="20" h="20" />
                    <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="20" h="20" />
                    <frame w="20" h="20">
                      <img x="0" y="0" src="https://api.iconify.design/material-symbols/star-outline-rounded.svg?color=%23B9AE97" w="20" h="20" />
                      <row w="8" h="20" clip="true" align="middle-left">
                        <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="20" h="20" />
                      </row>
                    </frame>
                  </row>
                  <text text-style="OutOf" value="out of 5" color="$muted" />
                </col>
              </row>
              <text text-style="Caption" value="12,483 ratings · 3,204 written reviews" color="$muted" />
            </col>
            <col w="96" radius="$r-md" fill="$yellow" border="3 $ink" p="10 8" gap="2" align="middle-center">
              <text text-style="StatBig" value="92%" color="$ink" align="center" />
              <text text-style="StatCap" value="RECOMMEND" color="$ink" align="center" />
            </col>
          </row>

          <rect role="divider" w="fill" h="2" fill="$ink" />

          <col w="fill" gap="9">
            <row w="fill" gap="10" align="middle-center">
              <row w="30" gap="3" align="middle-center">
                <text text-style="DistDigit" value="5" color="$ink" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="12" h="12" />
              </row>
              <frame w="176" h="12">
                <rect x="0" y="0" w="176" h="12" radius="6" fill="$track" />
                <rect x="0" y="0" w="176" h="12" radius="6" fill="$pink" />
              </frame>
              <text text-style="Count" w="fill" value="8,140" color="$muted" align="right" />
            </row>
            <row w="fill" gap="10" align="middle-center">
              <row w="30" gap="3" align="middle-center">
                <text text-style="DistDigit" value="4" color="$ink" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="12" h="12" />
              </row>
              <frame w="176" h="12">
                <rect x="0" y="0" w="176" h="12" radius="6" fill="$track" />
                <rect x="0" y="0" w="60" h="12" radius="6" fill="$pink" />
              </frame>
              <text text-style="Count" w="fill" value="2,760" color="$muted" align="right" />
            </row>
            <row w="fill" gap="10" align="middle-center">
              <row w="30" gap="3" align="middle-center">
                <text text-style="DistDigit" value="3" color="$ink" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="12" h="12" />
              </row>
              <frame w="176" h="12">
                <rect x="0" y="0" w="176" h="12" radius="6" fill="$track" />
                <rect x="0" y="0" w="20" h="12" radius="6" fill="$pink" />
              </frame>
              <text text-style="Count" w="fill" value="902" color="$muted" align="right" />
            </row>
            <row w="fill" gap="10" align="middle-center">
              <row w="30" gap="3" align="middle-center">
                <text text-style="DistDigit" value="2" color="$ink" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="12" h="12" />
              </row>
              <frame w="176" h="12">
                <rect x="0" y="0" w="176" h="12" radius="6" fill="$track" />
                <rect x="0" y="0" w="8" h="12" radius="6" fill="$pink" />
              </frame>
              <text text-style="Count" w="fill" value="388" color="$muted" align="right" />
            </row>
            <row w="fill" gap="10" align="middle-center">
              <row w="30" gap="3" align="middle-center">
                <text text-style="DistDigit" value="1" color="$ink" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="12" h="12" />
              </row>
              <frame w="176" h="12">
                <rect x="0" y="0" w="176" h="12" radius="6" fill="$track" />
                <rect x="0" y="0" w="6" h="12" radius="6" fill="$pink" />
              </frame>
              <text text-style="Count" w="fill" value="293" color="$muted" align="right" />
            </row>
          </col>
        </col>
      </col>

      <col w="fill" fill="$ink" radius="$r-lg" p="0 6 6 0">
        <col w="fill" fill="$yellow-soft" border="3 $ink" radius="$r-lg" p="16" gap="12">
          <text text-style="SectionLbl" value="HOW PLAYERS RATE IT" color="$ink" />
          <row w="fill" gap="10" align="middle-center">
            <text text-style="AttrLabel" w="88" value="Gameplay" color="$ink" />
            <frame w="148" h="12">
              <rect x="0" y="0" w="148" h="12" radius="6" fill="$track" />
              <rect x="0" y="0" w="139" h="12" radius="6" fill="$pink" />
            </frame>
            <text text-style="AttrNum" w="34" value="4.7" color="$ink" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-center">
            <text text-style="AttrLabel" w="88" value="Graphics" color="$ink" />
            <frame w="148" h="12">
              <rect x="0" y="0" w="148" h="12" radius="6" fill="$track" />
              <rect x="0" y="0" w="142" h="12" radius="6" fill="$pink" />
            </frame>
            <text text-style="AttrNum" w="34" value="4.8" color="$ink" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-center">
            <text text-style="AttrLabel" w="88" value="Controls" color="$ink" />
            <frame w="148" h="12">
              <rect x="0" y="0" w="148" h="12" radius="6" fill="$track" />
              <rect x="0" y="0" w="121" h="12" radius="6" fill="$pink" />
            </frame>
            <text text-style="AttrNum" w="34" value="4.1" color="$ink" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-center">
            <text text-style="AttrLabel" w="88" value="Replay value" color="$ink" />
            <frame w="148" h="12">
              <rect x="0" y="0" w="148" h="12" radius="6" fill="$track" />
              <rect x="0" y="0" w="127" h="12" radius="6" fill="$pink" />
            </frame>
            <text text-style="AttrNum" w="34" value="4.3" color="$ink" align="right" />
          </row>
        </col>
      </col>

      <row w="fill" gap="8" align="middle-center">
        <row role="chip" h="36" radius="$r-md" fill="$pink" border="3 $ink" p="0 14" align="middle-center">
          <text text-style="ChipTxt" value="All" color="$white" />
        </row>
        <row role="chip" h="36" radius="$r-md" fill="$white" border="3 $ink" p="0 12" gap="4" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="15" h="15" />
          <text text-style="ChipTxt" value="5 star" color="$ink" />
        </row>
        <row role="chip" h="36" radius="$r-md" fill="$white" border="3 $ink" p="0 12" gap="4" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/image-outline.svg?color=%2317130F" w="15" h="15" />
          <text text-style="ChipTxt" value="Photos" color="$ink" />
        </row>
      </row>

      <row w="fill" gap="auto" align="middle-center">
        <text text-style="SectionLbl" value="3,204 REVIEWS" color="$ink" />
        <row gap="4" align="middle-center">
          <text text-style="Caption" value="Most helpful" color="$muted" />
          <img src="https://api.iconify.design/material-symbols/expand-more-rounded.svg?color=%236B6357" w="16" h="16" />
        </row>
      </row>

      <col w="fill" fill="$white" border="3 $ink" radius="$r-lg" p="14" gap="10">
        <row w="fill" gap="11" align="top-left">
          <col w="44" h="44" radius="$r-pill" fill="$pink" border="3 $ink" align="middle-center">
            <text text-style="Avatar" value="JM" color="$white" align="center" />
          </col>
          <col w="fill" gap="4">
            <row w="fill" gap="auto" align="middle-center">
              <text text-style="Name" value="Jordan Mika" color="$ink" />
              <text text-style="Date" value="3 days ago" color="$muted" align="right" />
            </row>
            <row w="fill" gap="7" align="middle-center">
              <row gap="1" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="14" h="14" />
              </row>
              <row h="18" radius="$r-sm" fill="$yellow-soft" border="2 $ink" p="0 6" gap="3" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/schedule-rounded.svg?color=%2317130F" w="11" h="11" />
                <text text-style="BadgeSm" value="41H PLAYED" color="$ink" />
              </row>
            </row>
          </col>
        </row>
        <text text-style="RevTitle" value="The co-op finale had us yelling" color="$ink" />
        <text text-style="Body" value="My roommate and I beat the Cassette Caverns at 2am and the final boss remix is the best track in the whole game. Checkpoints are fair, the pixel art is gorgeous, and every level hides a tape to hunt down." color="$muted" />
        <rect role="divider" w="fill" h="2" fill="$track" />
        <row w="fill" gap="auto" align="middle-center">
          <row role="button" h="32" radius="$r-sm" fill="$pink-soft" border="2 $ink" p="0 10" gap="6" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/thumb-up-rounded.svg?color=%23D6106C" w="14" h="14" />
            <text text-style="Helpful" value="Helpful · 128" color="$ink" />
          </row>
          <text text-style="Helpful" value="Report" color="$muted" align="right" />
        </row>
      </col>

      <col w="fill" fill="$white" border="3 $ink" radius="$r-lg" p="14" gap="10">
        <row w="fill" gap="11" align="top-left">
          <col w="44" h="44" radius="$r-pill" fill="$yellow" border="3 $ink" align="middle-center">
            <text text-style="Avatar" value="RS" color="$ink" align="center" />
          </col>
          <col w="fill" gap="4">
            <row w="fill" gap="auto" align="middle-center">
              <text text-style="Name" value="Reza Solano" color="$ink" />
              <text text-style="Date" value="1 week ago" color="$muted" align="right" />
            </row>
            <row w="fill" gap="7" align="middle-center">
              <row gap="1" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-outline-rounded.svg?color=%23B9AE97" w="14" h="14" />
              </row>
              <row h="18" radius="$r-sm" fill="$yellow-soft" border="2 $ink" p="0 6" gap="3" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/schedule-rounded.svg?color=%2317130F" w="11" h="11" />
                <text text-style="BadgeSm" value="22H PLAYED" color="$ink" />
              </row>
            </row>
          </col>
        </row>
        <text text-style="RevTitle" value="Great, but the boss spikes hard" color="$ink" />
        <text text-style="Body" value="Loved the first three worlds, then world four jumps in difficulty and the checkpoint before the crane fight is brutal. Still worth it for the soundtrack alone. Fix that one room and it is a five for me." color="$muted" />
        <rect role="divider" w="fill" h="2" fill="$track" />
        <row w="fill" gap="auto" align="middle-center">
          <row role="button" h="32" radius="$r-sm" fill="$pink-soft" border="2 $ink" p="0 10" gap="6" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/thumb-up-rounded.svg?color=%23D6106C" w="14" h="14" />
            <text text-style="Helpful" value="Helpful · 74" color="$ink" />
          </row>
          <text text-style="Helpful" value="Report" color="$muted" align="right" />
        </row>
      </col>

      <col w="fill" fill="$white" border="3 $ink" radius="$r-lg" p="14" gap="10">
        <row w="fill" gap="11" align="top-left">
          <col w="44" h="44" radius="$r-pill" fill="$cyan" border="3 $ink" align="middle-center">
            <text text-style="Avatar" value="AO" color="$ink" align="center" />
          </col>
          <col w="fill" gap="4">
            <row w="fill" gap="auto" align="middle-center">
              <text text-style="Name" value="Amara Okonkwo" color="$ink" />
              <text text-style="Date" value="2 weeks ago" color="$muted" align="right" />
            </row>
            <row w="fill" gap="7" align="middle-center">
              <row gap="1" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A300" w="14" h="14" />
              </row>
              <row h="18" radius="$r-sm" fill="$yellow-soft" border="2 $ink" p="0 6" gap="3" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/schedule-rounded.svg?color=%2317130F" w="11" h="11" />
                <text text-style="BadgeSm" value="63H PLAYED" color="$ink" />
              </row>
            </row>
          </col>
        </row>
        <text text-style="RevTitle" value="Speedrunning this for months now" color="$ink" />
        <text text-style="Body" value="Sixty plus hours in and I still find new movement tech. The devs patched the wall clip everyone abused and added a proper run timer, so the leaderboards feel honest now. The platformer I recommend to everyone." color="$muted" />
        <rect role="divider" w="fill" h="2" fill="$track" />
        <row w="fill" gap="auto" align="middle-center">
          <row role="button" h="32" radius="$r-sm" fill="$pink-soft" border="2 $ink" p="0 10" gap="6" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/thumb-up-rounded.svg?color=%23D6106C" w="14" h="14" />
            <text text-style="Helpful" value="Helpful · 309" color="$ink" />
          </row>
          <text text-style="Helpful" value="Report" color="$muted" align="right" />
        </row>
      </col>

      <col w="fill" fill="$ink" radius="$r-lg" p="0 5 5 0">
        <row role="button" w="fill" h="48" radius="$r-lg" fill="$white" border="3 $ink" gap="6" align="middle-center">
          <text text-style="LinkTxt" value="See all 3,204 reviews" color="$ink" />
          <img src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%2317130F" w="18" h="18" />
        </row>
      </col>

    </col>

    <col role="toolbar" w="360" fill="$white" border="3 0 0 0 $ink" p="12 16 8 16" gap="8">
      <row w="fill" gap="12" align="middle-center">
        <col w="52" h="52" fill="$ink" radius="$r-md" p="0 5 5 0">
          <row role="button" w="47" h="47" radius="$r-md" fill="$white" border="3 $ink" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/bookmark-outline-rounded.svg?color=%2317130F" w="24" h="24" />
          </row>
        </col>
        <col w="fill" fill="$ink" radius="$r-md" p="0 5 5 0">
          <row role="button" w="fill" h="47" radius="$r-md" fill="$pink" border="3 $ink" gap="8" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/rate-review-outline-rounded.svg?color=%23FFFFFF" w="20" h="20" />
            <text text-style="BtnTxt" value="Write a review" color="$white" />
          </row>
        </col>
      </row>
      <row w="fill" h="20" align="middle-center">
        <rect w="120" h="5" radius="$r-pill" fill="$ink" />
      </row>
    </col>

  </col>
</gui>
```