---
title: "The Meridian Line · Grand Continental, London to Venice"
platform: android
slug: the-meridian-line-grand-continental-london-to-venice
screens: []
domains: ["travel"]
style: "art-deco"
fonts: ["Cinzel", "Roboto", "Roboto Mono"]
roles: ["top-navigation-bar", "button", "card", "avatar", "chip", "table", "toolbar"]
score: {clean: 100, consistent: 79, accessible: 84, comprehensible: 26}
url: https://gui.farm/android/the-meridian-line-grand-continental-london-to-venice
raw: https://gui.farm/android/the-meridian-line-grand-continental-london-to-venice/design.guix
download: https://gui.farm/android/the-meridian-line-grand-continental-london-to-venice.gui
---

# The Meridian Line · Grand Continental, London to Venice

A live luxury overnight-rail itinerary tracking a passenger mid-journey from London to Venice, with a station-by-station timeline, cabin and dining details, and a settled fare summary.

- **Live preview:** https://gui.farm/android/the-meridian-line-grand-continental-london-to-venice
- **Raw source:** https://gui.farm/android/the-meridian-line-grand-continental-london-to-venice/design.guix
- **Download (.gui):** https://gui.farm/android/the-meridian-line-grand-continental-london-to-venice.gui

## Source (design.guix)

```xml
<gui version="0.2" name="The Meridian Line · Grand Continental, London to Venice">
  <tokens>
    <color name="bg" value="#100D0B" />
    <color name="panel" value="#1A1611" />
    <color name="panel-2" value="#241E17" />
    <color name="ink" value="#F2E9D6" />
    <color name="muted" value="#B4A88F" />
    <color name="gold" value="#C79A46" />
    <color name="gold-tx" value="#E3C070" />
    <color name="gold-bright" value="#EAD79A" />
    <color name="oxblood" value="#8E2A3B" />
    <color name="oxblood-dim" value="#8E2A3B33" />
    <color name="oxblood-tx" value="#F0A2AD" />
    <color name="hair" value="#3A3120" />
    <color name="track" value="#2A241B" />
    <color name="on-ox" value="#FBEFE8" />
    <color name="on-gold" value="#17130A" />
    <number name="r-card" value="4" />
    <number name="r-lg" value="8" />
    <number name="r-pill" value="999" />
  </tokens>
  <fonts>
    <font family="Cinzel" source="google" weights="400 600 700" styles="normal" />
    <font family="Roboto" source="google" weights="400 500 600 700" styles="normal" />
    <font family="Roboto Mono" source="google" weights="400 500 600" styles="normal" />
  </fonts>
  <styles>
    <text-style
      name="Nameplate"
      font-family="Cinzel"
      font-size="21"
      font-weight="700"
      line-height="24"
      letter-spacing="1.5"
    />
    <text-style name="Crest" font-family="Cinzel" font-size="20" font-weight="700" line-height="22" />
    <text-style
      name="Cat"
      font-family="Cinzel"
      font-size="14"
      font-weight="700"
      line-height="17"
      letter-spacing="1.2"
    />
    <text-style
      name="Total"
      font-family="Cinzel"
      font-size="26"
      font-weight="700"
      line-height="28"
      letter-spacing="-0.3"
    />
    <text-style
      name="Eyebrow"
      font-family="Roboto"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="2"
    />
    <text-style
      name="Label"
      font-family="Roboto"
      font-size="12"
      font-weight="700"
      line-height="15"
      letter-spacing="0.8"
    />
    <text-style
      name="Badge"
      font-family="Roboto"
      font-size="10"
      font-weight="700"
      line-height="12"
      letter-spacing="1"
    />
    <text-style name="H1" font-family="Roboto" font-size="24" font-weight="700" line-height="28" />
    <text-style name="H2" font-family="Roboto" font-size="16" font-weight="700" line-height="20" />
    <text-style name="Name" font-family="Roboto" font-size="15" font-weight="700" line-height="19" />
    <text-style name="Sub" font-family="Roboto" font-size="13" font-weight="400" line-height="18" />
    <text-style name="Meta" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="ItemName" font-family="Roboto" font-size="14" font-weight="600" line-height="18" />
    <text-style name="ItemSub" font-family="Roboto" font-size="12" font-weight="400" line-height="16" />
    <text-style name="Amount" font-family="Roboto" font-size="15" font-weight="600" line-height="19" />
    <text-style
      name="BtnLabel"
      font-family="Roboto"
      font-size="15"
      font-weight="700"
      line-height="18"
      letter-spacing="0.3"
    />
    <text-style name="Mono" font-family="Roboto Mono" font-size="14" font-weight="500" line-height="18" />
    <text-style
      name="MonoSm"
      font-family="Roboto Mono"
      font-size="11"
      font-weight="500"
      line-height="14"
      letter-spacing="0.3"
    />
  </styles>
  <col w="360" fill="$bg" gap="0">
    <!-- status bar (device chrome, untagged) -->
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-center">
      <text value="9:41" text-style="Mono" color="$ink" />
      <row gap="6" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23F2E9D6"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23F2E9D6" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23F2E9D6"
          w="15"
          h="15"
        />
      </row>
    </row>
    <!-- top navigation -->
    <row
      w="fill"
      h="56"
      p="0 8 0 4"
      gap="4"
      align="middle-center"
      fill="$bg"
      border-bottom="1 $hair"
      role="top-navigation-bar"
    >
      <row w="48" h="48" align="middle-center" role="button">
        <img
          src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23F2E9D6"
          w="24"
          h="24"
        />
      </row>
      <col w="fill" gap="1" align="middle-center">
        <text value="ITINERARY" text-style="Label" color="$ink" align="center" />
        <text value="BOOKING MRD-40817" text-style="MonoSm" color="$muted" align="center" />
      </col>
      <row w="48" h="48" align="middle-center" role="button">
        <img src="https://api.iconify.design/material-symbols/more-horiz.svg?color=%23E3C070" w="24" h="24" />
      </row>
    </row>
    <!-- body -->
    <col w="360" p="12 16 8 16" gap="14">
      <!-- HERO -->
      <frame w="328" h="200" radius="$r-card" clip="true" border="1 $gold">
        <img
          x="0"
          y="0"
          w="328"
          h="200"
          fit="cover"
          src="https://images.unsplash.com/photo-1678863255419-f721cf4ec6fe?auto=format&amp;fit=crop&amp;w=780&amp;h=470&amp;q=80"
        />
        <rect
          x="0"
          y="0"
          w="328"
          h="200"
          fill="linear-gradient(180deg, #100D0BCC 0%, #100D0B33 34%, #100D0B99 66%, #100D0BF7 100%)"
        />
        <!-- deco corner brackets -->
        <rect x="12" y="12" w="22" h="2" fill="$gold" />
        <rect x="12" y="12" w="2" h="22" fill="$gold" />
        <rect x="294" y="12" w="22" h="2" fill="$gold" />
        <rect x="314" y="12" w="2" h="22" fill="$gold" />
        <text x="16" y="18" value="GRAND CONTINENTAL · 1 NIGHT" text-style="Eyebrow" color="$gold-tx" />
        <row
          x="222"
          y="42"
          w="94"
          h="24"
          fill="$oxblood"
          border="1 $gold"
          radius="$r-pill"
          gap="6"
          align="middle-center"
        >
          <ellipse w="6" h="6" fill="$on-ox" />
          <text value="ABOARD" text-style="Badge" color="$on-ox" />
        </row>
        <col x="16" y="86" w="44" h="44" fill="$gold" radius="$r-pill" align="middle-center">
          <text value="M" text-style="Crest" color="$on-gold" align="center" />
        </col>
        <text x="16" y="140" w="300" value="LONDON → VENICE" text-style="Nameplate" color="$gold-bright" />
        <text
          x="16"
          y="170"
          w="300"
          value="The Meridian Line  ·  Sleeper 3812"
          text-style="Meta"
          color="$muted"
        />
      </frame>
      <!-- PASSENGER -->
      <row
        w="328"
        fill="$panel"
        border="1 $hair"
        radius="$r-card"
        p="14"
        gap="12"
        align="middle-left"
        role="card"
      >
        <col
          w="46"
          h="46"
          fill="$panel-2"
          border="1 $gold"
          radius="$r-pill"
          align="middle-center"
          role="avatar"
        >
          <text value="EA" text-style="H2" color="$gold-tx" align="center" />
        </col>
        <col w="fill" gap="3" align="middle-left">
          <text value="Eleanor Ashcroft" text-style="Name" color="$ink" />
          <row gap="6" align="middle-center">
            <img
              src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23C79A46"
              w="14"
              h="14"
            />
            <text value="Meridian Club · Grand Suite, Cabin 8" text-style="Sub" color="$muted" />
          </row>
        </col>
      </row>
      <!-- ABOARD STATUS -->
      <col w="328" fill="$panel" border="1 $hair" radius="$r-lg" p="16" gap="14" role="card">
        <row w="fill" gap="auto" align="middle-center">
          <row h="24" radius="$r-pill" fill="$oxblood" p="0 10" gap="6" align="middle-center" role="chip">
            <img
              src="https://api.iconify.design/material-symbols/directions-railway-rounded.svg?color=%23FBEFE8"
              w="14"
              h="14"
            />
            <text value="ABOARD · DAY 2" text-style="Badge" color="$on-ox" />
          </row>
          <row gap="6" align="middle-center">
            <ellipse w="7" h="7" fill="$oxblood-tx" />
            <text value="ON TIME" text-style="MonoSm" color="$oxblood-tx" />
          </row>
        </row>
        <col gap="4" align="top-left">
          <text value="ARRIVING VENICE S. LUCIA · SAT 19 SEP" text-style="Eyebrow" color="$muted" />
          <text value="18:30 today" text-style="H1" color="$ink" />
          <text value="Departing Innsbruck now · 420 km remaining" text-style="Sub" color="$muted" />
        </col>
        <col w="296" gap="7" align="top-left">
          <frame w="296" h="10" radius="$r-pill" clip="true">
            <rect x="0" y="0" w="296" h="10" radius="$r-pill" fill="$track" />
            <rect x="0" y="0" w="219" h="10" radius="$r-pill" fill="$oxblood" />
          </frame>
          <row w="fill" gap="auto" align="middle-center">
            <text value="1,202 / 1,622 km" text-style="Mono" color="$ink" />
            <text value="74%" text-style="Mono" color="$oxblood-tx" />
          </row>
        </col>
      </col>
      <!-- JOURNEY TIMELINE -->
      <col w="328" fill="$panel" border="1 $hair" radius="$r-lg" p="16 14" gap="14" role="card">
        <row w="fill" gap="auto" align="middle-center">
          <row gap="8" align="middle-center">
            <img
              src="https://api.iconify.design/material-symbols/route-rounded.svg?color=%23C79A46"
              w="16"
              h="16"
            />
            <text value="THE ROUTE" text-style="Cat" color="$gold-tx" />
          </row>
          <text value="4 STOPS · 1,622 KM" text-style="MonoSm" color="$muted" />
        </row>
        <frame w="300" h="3" clip="true">
          <rect x="0" y="0" w="300" h="1" fill="$gold" />
          <rect x="0" y="2" w="300" h="1" fill="$hair" />
        </frame>
        <col w="300" gap="0" align="top-left">
          <!-- London (completed) -->
          <row w="300" h="80" gap="10" align="top-left">
            <col w="44" gap="1" align="top-right">
              <text value="11:04" text-style="Mono" color="$ink" />
              <text value="FRI 18" text-style="MonoSm" color="$muted" />
            </col>
            <col w="20" h="80" gap="0" align="top-center">
              <frame w="20" h="18">
                <ellipse x="2" y="1" w="16" h="16" fill="$oxblood" />
                <img
                  x="4"
                  y="3"
                  src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FBEFE8"
                  w="12"
                  h="12"
                />
              </frame>
              <rect w="2" h="62" fill="$oxblood" />
            </col>
            <col w="fill" gap="2" align="top-left">
              <row w="fill" gap="8" align="middle-left">
                <text value="London Victoria" text-style="H2" color="$ink" />
                <text value="VIC" text-style="MonoSm" color="$muted" />
              </row>
              <text value="British Pullman departed · Platform 2" text-style="Sub" color="$muted" />
              <row gap="6" align="middle-center" p="4 0 0 0">
                <rect w="10" h="2" fill="$oxblood" />
                <text value="494 KM · 5H 10M" text-style="MonoSm" color="$muted" />
              </row>
            </col>
          </row>
          <!-- Paris (completed) -->
          <row w="300" h="80" gap="10" align="top-left">
            <col w="44" gap="1" align="top-right">
              <text value="16:14" text-style="Mono" color="$ink" />
              <text value="FRI 18" text-style="MonoSm" color="$muted" />
            </col>
            <col w="20" h="80" gap="0" align="top-center">
              <frame w="20" h="18">
                <ellipse x="2" y="1" w="16" h="16" fill="$oxblood" />
                <img
                  x="4"
                  y="3"
                  src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FBEFE8"
                  w="12"
                  h="12"
                />
              </frame>
              <rect w="2" h="62" fill="$oxblood" />
            </col>
            <col w="fill" gap="2" align="top-left">
              <row w="fill" gap="8" align="middle-left">
                <text value="Paris Gare de l'Est" text-style="H2" color="$ink" />
                <text value="PAR" text-style="MonoSm" color="$muted" />
              </row>
              <text value="Continental sleeper boarded · dinner at 20:00" text-style="Sub" color="$muted" />
              <row gap="6" align="middle-center" p="4 0 0 0">
                <rect w="10" h="2" fill="$oxblood" />
                <text value="708 KM · OVERNIGHT" text-style="MonoSm" color="$muted" />
              </row>
            </col>
          </row>
          <!-- Innsbruck (current) -->
          <row w="300" h="80" gap="10" align="top-left">
            <col w="44" gap="1" align="top-right">
              <text value="09:40" text-style="Mono" color="$ink" />
              <text value="SAT 19" text-style="MonoSm" color="$oxblood-tx" />
            </col>
            <col w="20" h="80" gap="0" align="top-center">
              <frame w="20" h="20">
                <ellipse x="0" y="0" w="20" h="20" fill="$oxblood-dim" border="2 $oxblood" />
                <ellipse x="6" y="6" w="8" h="8" fill="$oxblood" />
              </frame>
              <rect w="2" h="60" fill="$hair" />
            </col>
            <col w="fill" gap="2" align="top-left">
              <row w="fill" gap="8" align="middle-left">
                <text value="Innsbruck Hbf" text-style="H2" color="$ink" />
                <text value="IBK" text-style="MonoSm" color="$oxblood-tx" />
              </row>
              <text value="Aboard now · brief Alpine halt, no disembark" text-style="Sub" color="$ink" />
              <row gap="6" align="middle-center" p="4 0 0 0">
                <rect w="10" h="2" fill="$oxblood-tx" />
                <text value="279 KM · 6H 35M · NEXT" text-style="MonoSm" color="$oxblood-tx" />
              </row>
            </col>
          </row>
          <!-- Verona (upcoming) -->
          <row w="300" h="80" gap="10" align="top-left">
            <col w="44" gap="1" align="top-right">
              <text value="16:15" text-style="Mono" color="$muted" />
              <text value="SAT 19" text-style="MonoSm" color="$muted" />
            </col>
            <col w="20" h="80" gap="0" align="top-center">
              <ellipse x="2" y="1" w="16" h="16" fill="$panel" border="2 $hair" />
              <rect x="9" y="18" w="2" h="60" fill="$hair" />
            </col>
            <col w="fill" gap="2" align="top-left">
              <row w="fill" gap="8" align="middle-left">
                <text value="Verona Porta Nuova" text-style="H2" color="$ink" />
                <text value="VRN" text-style="MonoSm" color="$muted" />
              </row>
              <text value="Scheduled · guided old-town walk, 45 min" text-style="Sub" color="$muted" />
              <row gap="6" align="middle-center" p="4 0 0 0">
                <rect w="10" h="2" fill="$hair" />
                <text value="141 KM · 2H 15M" text-style="MonoSm" color="$muted" />
              </row>
            </col>
          </row>
          <!-- Venice (arrival) -->
          <row w="300" h="hug" gap="10" align="top-left">
            <col w="44" gap="1" align="top-right">
              <text value="18:30" text-style="Mono" color="$ink" />
              <text value="ARR" text-style="MonoSm" color="$muted" />
            </col>
            <col w="20" h="hug" gap="0" align="top-center">
              <frame w="20" h="20">
                <ellipse x="0" y="0" w="20" h="20" fill="$oxblood-dim" border="2 $oxblood" />
                <img
                  x="4"
                  y="4"
                  src="https://api.iconify.design/material-symbols/location-on-outline.svg?color=%23F0A2AD"
                  w="12"
                  h="12"
                />
              </frame>
            </col>
            <col w="fill" gap="2" align="top-left">
              <row w="fill" gap="8" align="middle-left">
                <text value="Venice Santa Lucia" text-style="H2" color="$ink" />
                <text value="VCE" text-style="MonoSm" color="$oxblood-tx" />
              </row>
              <text value="Arrival · private water-taxi to the hotel" text-style="Sub" color="$muted" />
            </col>
          </row>
        </col>
      </col>
      <!-- CABIN &amp; DINING -->
      <col w="328" fill="$panel" border="1 $hair" radius="$r-lg" p="16 14" gap="12" role="card">
        <row w="300" gap="8" align="middle-left">
          <img
            src="https://api.iconify.design/material-symbols/king-bed-outline-rounded.svg?color=%23C79A46"
            w="16"
            h="16"
          />
          <text w="fill" value="CABIN &amp; DINING" text-style="Cat" color="$gold-tx" />
          <text value="CAR 3812" text-style="MonoSm" color="$muted" align="right" />
        </row>
        <frame w="300" h="3" clip="true">
          <rect x="0" y="0" w="300" h="1" fill="$gold" />
          <rect x="0" y="2" w="300" h="1" fill="$hair" />
        </frame>
        <col w="300" gap="0" role="table">
          <row w="300" p="2 0 12 0" gap="12" align="middle-left" border-bottom="1 $hair">
            <col w="fill" gap="3" align="top-left">
              <text value="Grand Suite · Cabin 8" text-style="ItemName" color="$ink" />
              <text value="Double bed · en-suite · two guests" text-style="ItemSub" color="$muted" />
            </col>
            <img
              src="https://api.iconify.design/material-symbols/bed-rounded.svg?color=%23B4A88F"
              w="18"
              h="18"
            />
          </row>
          <row w="300" p="12 0" gap="12" align="middle-left" border-bottom="1 $hair">
            <col w="fill" gap="3" align="top-left">
              <text value="Dinner · Cote d'Or dining car" text-style="ItemName" color="$ink" />
              <text value="Table 4 · second sitting, 20:00 Fri" text-style="ItemSub" color="$muted" />
            </col>
            <img
              src="https://api.iconify.design/material-symbols/restaurant-rounded.svg?color=%23B4A88F"
              w="18"
              h="18"
            />
          </row>
          <row w="300" p="12 0 0 0" gap="12" align="middle-left">
            <col w="fill" gap="3" align="top-left">
              <text value="Breakfast in cabin" text-style="ItemName" color="$ink" />
              <text value="Served 07:30 Sat · steward Henri, press 3" text-style="ItemSub" color="$muted" />
            </col>
            <img
              src="https://api.iconify.design/material-symbols/local-cafe-rounded.svg?color=%23B4A88F"
              w="18"
              h="18"
            />
          </row>
        </col>
      </col>
      <!-- FARE SUMMARY -->
      <col w="328" fill="$panel" border="1 $hair" radius="$r-lg" p="16 14" gap="11" role="card">
        <row w="300" gap="8" align="middle-left">
          <img
            src="https://api.iconify.design/material-symbols/receipt-long-rounded.svg?color=%23C79A46"
            w="16"
            h="16"
          />
          <text w="fill" value="FARE SUMMARY" text-style="Cat" color="$gold-tx" />
        </row>
        <col w="300" gap="10" role="table">
          <row w="300" align="middle-left">
            <col w="fill" gap="2" align="top-left">
              <text value="Grand Suite · 1 night, 2 guests" text-style="ItemName" color="$ink" />
              <text value="London-Venice, all-inclusive" text-style="ItemSub" color="$muted" />
            </col>
            <text value="£5,400.00" text-style="Amount" color="$ink" align="right" />
          </row>
          <row w="300" align="middle-left">
            <col w="fill" gap="2" align="top-left">
              <text value="Dining &amp; champagne" text-style="ItemName" color="$ink" />
              <text value="2 covers" text-style="ItemSub" color="$muted" />
            </col>
            <text value="£480.00" text-style="Amount" color="$ink" align="right" />
          </row>
          <row w="300" align="middle-left">
            <col w="fill" gap="2" align="top-left">
              <text value="Verona excursion" text-style="ItemName" color="$ink" />
              <text value="Guided walk · 2 guests" text-style="ItemSub" color="$muted" />
            </col>
            <text value="£190.00" text-style="Amount" color="$ink" align="right" />
          </row>
        </col>
        <frame w="300" h="1" clip="true">
          <rect x="0" y="0" w="300" h="1" fill="$hair" />
        </frame>
        <row w="300" align="middle-left">
          <text w="fill" value="SUBTOTAL" text-style="Label" color="$muted" />
          <text value="£6,070.00" text-style="Amount" color="$ink" align="right" />
        </row>
        <row w="300" align="middle-left">
          <col w="fill" gap="2" align="top-left">
            <text value="MERIDIAN CLUB CREDIT" text-style="Label" color="$oxblood-tx" />
            <text value="Gold member" text-style="ItemSub" color="$oxblood-tx" />
          </col>
          <text value="-£150.00" text-style="Amount" color="$oxblood-tx" align="right" />
        </row>
        <row w="300" align="middle-left">
          <col w="fill" gap="2" align="top-left">
            <text value="SERVICE" text-style="Label" color="$muted" />
            <text value="5%" text-style="ItemSub" color="$muted" />
          </col>
          <text value="+£296.00" text-style="Amount" color="$ink" align="right" />
        </row>
        <frame w="300" h="3" clip="true">
          <rect x="0" y="0" w="300" h="1" fill="$gold" />
          <rect x="0" y="2" w="300" h="1" fill="$hair" />
        </frame>
        <frame w="300" h="64" radius="$r-card" clip="true">
          <rect x="0" y="0" w="300" h="64" fill="$oxblood" />
          <rect x="0" y="0" w="10" h="10" fill="$on-ox" />
          <rect x="290" y="0" w="10" h="10" fill="$on-ox" />
          <rect x="0" y="54" w="10" h="10" fill="$on-ox" />
          <rect x="290" y="54" w="10" h="10" fill="$on-ox" />
          <col x="16" y="13" w="160" gap="3" align="top-left">
            <text value="FARE SETTLED" text-style="Label" color="$on-ox" />
            <text value="Paid · Amex ···· 3007" text-style="ItemSub" color="$on-ox" />
          </col>
          <text x="140" y="17" w="146" value="£6,216.00" text-style="Total" color="$on-ox" align="right" />
        </frame>
      </col>
      <row w="328" gap="8" align="middle-left">
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23B4A88F" w="15" h="15" />
        <text
          w="fill"
          value="Onboard Wi-Fi included. Dial 3 for your carriage steward."
          text-style="Meta"
          color="$muted"
        />
      </row>
    </col>
    <!-- sticky action bar (last flow child) -->
    <col w="360" fill="$panel" border-top="1 $gold" p="12 16 10 16" gap="10" role="toolbar">
      <row w="328" gap="10" align="middle-left">
        <row
          w="120"
          h="50"
          fill="$bg"
          border="1 $gold"
          radius="$r-card"
          gap="8"
          align="middle-center"
          role="button"
        >
          <img
            src="https://api.iconify.design/material-symbols/description-outline-rounded.svg?color=%23E3C070"
            w="17"
            h="17"
          />
          <text value="Trip docs" text-style="BtnLabel" color="$gold-tx" />
        </row>
        <row w="fill" h="50" fill="$oxblood" radius="$r-card" gap="8" align="middle-center" role="button">
          <appearance>
            <effect type="drop-shadow" x="0" y="4" radius="14" spread="0" color="#8E2A3B4D" />
          </appearance>
          <img
            src="https://api.iconify.design/material-symbols/room-service-rounded.svg?color=%23FBEFE8"
            w="19"
            h="19"
          />
          <text value="Onboard concierge" text-style="BtnLabel" color="$on-ox" />
        </row>
      </row>
      <row w="328" h="16" align="bottom-center">
        <rect w="130" h="5" radius="3" fill="$hair" />
      </row>
    </col>
  </col>
</gui>
```