Juli Living Showcase

Colour tokens

Primitive OKLCH scales. Mode-agnostic — they do not change between light and dark themes (ADR 0003). Semantic mappings live in semantic.css.

teal

  1. 50 oklch(0.99 0.01 195) #f5fefe rgb(245, 254, 254)
  2. 100 oklch(0.97 0.05 195) #cfffff rgb(207, 255, 255)
  3. 200 oklch(0.96 0.08 195) #b1ffff rgb(177, 255, 255)
  4. 300 oklch(0.93 0.13 195) #68ffff rgb(104, 255, 255)
  5. 400 oklch(0.85 0.19 195) #00f2f4 rgb(0, 242, 244)
  6. 500 oklch(0.68 0.15 195) #00b3b5 rgb(0, 179, 181)
  7. 600 oklch(0.55 0.13 195) #008889 rgb(0, 136, 137)
  8. 700 oklch(0.38 0.09 195) #005051 rgb(0, 80, 81)
  9. 800 oklch(0.27 0.06 195) #002f2f rgb(0, 47, 47)
  10. 900 oklch(0.18 0.04 195) #001717 rgb(0, 23, 23)
  11. 950 oklch(0.11 0.02 195) #000606 rgb(0, 6, 6)

green

  1. 50 oklch(0.99 0.01 146) #f8fef8 rgb(248, 254, 248)
  2. 100 oklch(0.97 0.05 146) #e1ffe1 rgb(225, 255, 225)
  3. 200 oklch(0.96 0.08 146) #d0ffd2 rgb(208, 255, 210)
  4. 300 oklch(0.93 0.13 146) #aeffb3 rgb(174, 255, 179)
  5. 400 oklch(0.86 0.19 146) #72f181 rgb(114, 241, 129)
  6. 500 oklch(0.68 0.15 146) #51b05c rgb(81, 176, 92)
  7. 600 oklch(0.56 0.13 146) #388842 rgb(56, 136, 66)
  8. 700 oklch(0.38 0.09 146) #1c4f23 rgb(28, 79, 35)
  9. 800 oklch(0.28 0.06 146) #123116 rgb(18, 49, 22)
  10. 900 oklch(0.19 0.04 146) #071808 rgb(7, 24, 8)
  11. 950 oklch(0.11 0.02 146) #020602 rgb(2, 6, 2)

yellow

  1. 50 oklch(0.99 0.01 105) #fdfcf5 rgb(253, 252, 245)
  2. 100 oklch(0.98 0.05 105) #fdfbd4 rgb(253, 251, 212)
  3. 200 oklch(0.96 0.08 105) #f9f6b7 rgb(249, 246, 183)
  4. 300 oklch(0.94 0.13 105) #f8f085 rgb(248, 240, 133)
  5. 400 oklch(0.87 0.19 105) #e8d900 rgb(232, 217, 0)
  6. 500 oklch(0.7 0.15 105) #ada200 rgb(173, 162, 0)
  7. 600 oklch(0.57 0.13 105) #837a00 rgb(131, 122, 0)
  8. 700 oklch(0.39 0.09 105) #4d4700 rgb(77, 71, 0)
  9. 800 oklch(0.28 0.06 105) #2d2a00 rgb(45, 42, 0)
  10. 900 oklch(0.19 0.04 105) #171500 rgb(23, 21, 0)
  11. 950 oklch(0.11 0.02 105) #050500 rgb(5, 5, 0)

neutral

  1. 50 oklch(0.99 0.005 90) #fdfcf8 rgb(253, 252, 248)
  2. 100 oklch(0.97 0.008 90) #f7f5ef rgb(247, 245, 239)
  3. 200 oklch(0.95 0.01 90) #f1eee7 rgb(241, 238, 231)
  4. 300 oklch(0.9 0.012 90) #e1ded5 rgb(225, 222, 213)
  5. 400 oklch(0.8 0.014 90) #c1bdb4 rgb(193, 189, 180)
  6. 500 oklch(0.65 0.012 90) #928f87 rgb(146, 143, 135)
  7. 600 oklch(0.5 0.01 90) #65635d rgb(101, 99, 93)
  8. 700 oklch(0.38 0.008 90) #44423e rgb(68, 66, 62)
  9. 800 oklch(0.28 0.006 90) #2a2926 rgb(42, 41, 38)
  10. 900 oklch(0.1913 0 0) #141414 rgb(20, 20, 20)
  11. 950 oklch(0.1 0 90) #030303 rgb(3, 3, 3)

Semantic tokens

Role-named mappings to primitives. The resolved value below each swatch updates live when you toggle the theme — that is the light/dark behaviour these tokens encode.

  1. --surface-default … … light var(--c-juli-yellow-50) dark var(--c-juli-teal-950)
  2. --surface-elevated … … light var(--c-white) dark var(--c-juli-teal-900)
  3. --text-default … … light var(--c-juli-teal-800) dark var(--c-juli-yellow-50)
  4. --text-strong … … light var(--c-juli-teal-700) dark var(--c-juli-yellow-100)
  5. --text-muted … … light var(--c-juli-green-600) dark var(--c-juli-yellow-400)
  6. --border-subtle … … light var(--c-juli-neutral-200) dark var(--c-juli-neutral-800)
  7. --focus-ring … … light var(--c-juli-teal-700) dark var(--c-juli-green-300)
  8. --surface-action … … light var(--c-juli-green-400) dark var(--c-juli-green-500)
  9. --text-on-action … … light var(--c-juli-teal-800) dark var(--c-juli-neutral-950)
  10. --status-available-surface … … light var(--c-juli-green-200) dark var(--c-juli-green-900)
  11. --status-available-text … … light var(--c-juli-green-900) dark var(--c-juli-green-300)
  12. --status-reserved-surface … … light var(--c-juli-teal-200) dark var(--c-juli-teal-800)
  13. --status-reserved-text … … light var(--c-juli-teal-900) dark var(--c-juli-teal-200)
  14. --status-coming-soon-surface … … light var(--c-juli-teal-100) dark var(--c-juli-teal-700)
  15. --status-coming-soon-text … … light var(--c-juli-teal-700) dark var(--c-juli-teal-100)
  16. --status-let-surface … … light var(--c-juli-neutral-200) dark var(--c-juli-neutral-800)
  17. --status-let-text … … light var(--c-juli-neutral-700) dark var(--c-juli-neutral-300)
  18. --flag-new-surface … … light var(--c-juli-yellow-400) dark var(--c-juli-yellow-400)
  19. --flag-new-text … … light var(--c-juli-neutral-950) dark var(--c-juli-neutral-950)
  20. --status-pill-border … … light transparent dark var(--c-juli-teal-700)

Type scale

Fluid type steps from Utopia. Each clamp() interpolates between a 320 px and 1440 px viewport. Sample text is rendered at the live value of each step.

  1. --step--2 The quick brown fox jumps over the lazy dog clamp(0.6944rem, 0.6919rem + 0.0129vw, 0.7035rem)
  2. --step--1 The quick brown fox jumps over the lazy dog clamp(0.8333rem, 0.8035rem + 0.1491vw, 0.9377rem)
  3. --step-0 The quick brown fox jumps over the lazy dog clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem)
  4. --step-1 The quick brown fox jumps over the lazy dog clamp(1.2rem, 1.0668rem + 0.6661vw, 1.6663rem)
  5. --step-2 The quick brown fox jumps over the lazy dog clamp(1.44rem, 1.2168rem + 1.1159vw, 2.2211rem)
  6. --step-3 The quick brown fox jumps over the lazy dog clamp(1.728rem, 1.3758rem + 1.7611vw, 2.9607rem)
  7. --step-4 The quick brown fox jumps over the lazy dog clamp(2.0736rem, 1.5384rem + 2.6758vw, 3.9467rem)
  8. --step-5 The quick brown fox jumps over the lazy dog clamp(2.4883rem, 1.6962rem + 3.9608vw, 5.2609rem)

Spacing scale

Fluid spacing steps from Utopia. Each bar's width is the live value of its token. Pairs (e.g. --space-s-m) interpolate between two base steps over the viewport range.

Base scale

  1. --space-3xs clamp(0.25rem, 0.2321rem + 0.0893vw, 0.3125rem)
  2. --space-2xs clamp(0.5rem, 0.4643rem + 0.1786vw, 0.625rem)
  3. --space-xs clamp(0.75rem, 0.6964rem + 0.2679vw, 0.9375rem)
  4. --space-s clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem)
  5. --space-m clamp(1.5rem, 1.3929rem + 0.5357vw, 1.875rem)
  6. --space-l clamp(2rem, 1.8571rem + 0.7143vw, 2.5rem)
  7. --space-xl clamp(3rem, 2.7857rem + 1.0714vw, 3.75rem)
  8. --space-2xl clamp(4rem, 3.7143rem + 1.4286vw, 5rem)
  9. --space-3xl clamp(6rem, 5.5714rem + 2.1429vw, 7.5rem)

Pairs

  1. --space-3xs-2xs clamp(0.25rem, 0.1429rem + 0.5357vw, 0.625rem)
  2. --space-2xs-xs clamp(0.5rem, 0.375rem + 0.625vw, 0.9375rem)
  3. --space-xs-s clamp(0.75rem, 0.6071rem + 0.7143vw, 1.25rem)
  4. --space-s-m clamp(1rem, 0.75rem + 1.25vw, 1.875rem)
  5. --space-s-l clamp(1rem, 0.5714rem + 2.1429vw, 2.5rem)
  6. --space-m-l clamp(1.5rem, 1.2143rem + 1.4286vw, 2.5rem)
  7. --space-l-xl clamp(2rem, 1.5rem + 2.5vw, 3.75rem)
  8. --space-xl-2xl clamp(3rem, 2.4286rem + 2.8571vw, 5rem)
  9. --space-2xl-3xl clamp(4rem, 3rem + 5vw, 7.5rem)

Radii

Corner-radius primitives. Mode-agnostic. --radius-pill is an arbitrarily large value that fully rounds any box into a pill or circle. Each demo box has the token applied as its border-radius.

  1. --radius-s 0.5rem
  2. --radius-m 1rem
  3. --radius-pill 624.9375rem

Section tones

data-tone contexts (ADR 0013) remap the semantic surface/text/border tokens for their subtree, so any component inside adapts. dark and light hold their tone in both site modes (shifting shade per mode); inverse is the page's opposite tone; accent is the gentle same-tone raise. Toggle the theme to watch each shade shift.

data-tone="accent"

Heading, body copy and a link all read from the remapped tokens.

data-tone="inverse"

Heading, body copy and a link all read from the remapped tokens.

data-tone="light"

Heading, body copy and a link all read from the remapped tokens.

data-tone="dark"

Heading, body copy and a link all read from the remapped tokens.

An inline text link. Carries its own styling (underlined, --text-default, hover to --text-strong) so it settles link appearance for the blocks that use it without touching the global <a> defaults (ADR 0011).

Read our tenancy terms before you apply.

Button

The action / CTA affordance. Polymorphic: with href it is an <a> (a CTA that navigates), otherwise a <button> (a real action) — same look, picked by intent. primary fills with --surface-action; secondary is an outline that reads --text-default, so it adapts inside tone contexts. A link-styled affordance stays the Link primitive's job (no third variant). Toggle the theme to check both.

Hae asuntoa Lue lisää

Listing card

A Listing rendered as a card, in the brand layout (ADR 0014): a mint garden-tone header band (name + address) on top, then the photo, then the body — price, an inline status line with a colour-coded dot (one per Availability state, ADR 0010), and the specs. Presentational: all strings are pre-localized by the caller. Toggle the theme to check contrast in both modes.

  • Midgårdsvej 3, 2., 19 5200 Odense V

    8.400 kr/md. Lejlighed
    New Available

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.

    56 m² 2 rooms
    2 months dep.

  • Kløvervej 12 8000 Aarhus C

    11.200 kr/md. Rækkehus
    Reserved

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum.

    84 m² 3 rooms
    3 months dep.

  • Strandgade 7, 1. 5000 Odense C

    6.950 kr/md. Lejlighed
    New Coming soon

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.

    42 m² 1 room
    1 month dep.

  • Bredgade 44, 3. 5200 Odense V

    9.500 kr/md. Lejlighed
    Let

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet.

    63 m² 2 rooms
    2 months dep.

The same cards inside a data-tone="dark" band. The card reads only semantic tokens, so it adapts to the tone (ADR 0013) — the header band, status dot and text all stay legible. Toggle the theme to confirm both directions.

  • Midgårdsvej 3, 2., 19 5200 Odense V

    8.400 kr/md. Lejlighed
    New Available

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.

    56 m² 2 rooms
    2 months dep.

  • Kløvervej 12 8000 Aarhus C

    11.200 kr/md. Rækkehus
    Reserved

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum.

    84 m² 3 rooms
    3 months dep.

  • Strandgade 7, 1. 5000 Odense C

    6.950 kr/md. Lejlighed
    New Coming soon

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.

    42 m² 1 room
    1 month dep.

The Property kind (kind="property"): a development/building shown with general info — area + rooms ranges and a read-more cue, no single price, type, deposit, or availability status (CONTEXT.md). Same component, varies by kind.

A full-bleed band: prose + CTA on the left, an Embla-powered row of listing cards that bleeds off the right edge (ADR 0011). Tone-agnostic — drop it in a data-tone section and it adapts, pills included (ADR 0013). Drag or scroll; tab into a card and it scrolls into view (ADR 0007). Shown here in a dark band; the progress bar stands in for a scrollbar.

Andra bostadssökande tittade också på dessa

I samma område hittar du även andra intressanta hyresbostäder.

Se lediga bostäder

  • Midgårdsvej 3, 2., 19 5200 Odense V

    8.400 kr/md. Lejlighed
    New Available

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.

    56 m² 2 rooms
    2 months dep.

  • Kløvervej 12 8000 Aarhus C

    11.200 kr/md. Rækkehus
    Reserved

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum.

    84 m² 3 rooms
    3 months dep.

  • Strandgade 7, 1. 5000 Odense C

    6.950 kr/md. Lejlighed
    New Coming soon

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.

    42 m² 1 room
    1 month dep.

  • Bredgade 44, 3. 5200 Odense V

    9.500 kr/md. Lejlighed
    Let

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet.

    63 m² 2 rooms
    2 months dep.

  • Midgårdsvej 3, 2., 19 5200 Odense V

    8.400 kr/md. Lejlighed
    New Available

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.

    56 m² 2 rooms
    2 months dep.

  • Kløvervej 12 8000 Aarhus C

    11.200 kr/md. Rækkehus
    Reserved

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum.

    84 m² 3 rooms
    3 months dep.

  • Strandgade 7, 1. 5000 Odense C

    6.950 kr/md. Lejlighed
    New Coming soon

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.

    42 m² 1 room
    1 month dep.

  • Bredgade 44, 3. 5200 Odense V

    9.500 kr/md. Lejlighed
    Let

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet.

    63 m² 2 rooms
    2 months dep.

Listings grid

A responsive grid of listing cards whose bands line up across the row via subgrid (ADR 0015): header bands share a height so the photos start on a common line, and footers share a baseline — no clamped line counts or measured heights. Note the varied address and description lengths; the cards still align. A real list (ul/li), one tab stop per card. This is the static "browse all" surface; the carousel above shares the same band alignment (its track is a horizontal grid).

  • Midgårdsvej 3, 2., 19 5200 Odense V

    8.400 kr/md. Lejlighed
    New Available

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.

    56 m² 2 rooms
    2 months dep.

  • Kløvervej 12 8000 Aarhus C

    11.200 kr/md. Rækkehus
    Reserved

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum.

    84 m² 3 rooms
    3 months dep.

  • Strandgade 7, 1. 5000 Odense C

    6.950 kr/md. Lejlighed
    New Coming soon

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.

    42 m² 1 room
    1 month dep.

  • Bredgade 44, 3. 5200 Odense V

    9.500 kr/md. Lejlighed
    Let

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet.

    63 m² 2 rooms
    2 months dep.

  • Midgårdsvej 3, 2., 19 5200 Odense V

    8.400 kr/md. Lejlighed
    New Available

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.

    56 m² 2 rooms
    2 months dep.

  • Kløvervej 12 8000 Aarhus C

    11.200 kr/md. Rækkehus
    Reserved

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum.

    84 m² 3 rooms
    3 months dep.

  • Strandgade 7, 1. 5000 Odense C

    6.950 kr/md. Lejlighed
    New Coming soon

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.

    42 m² 1 room
    1 month dep.

  • Bredgade 44, 3. 5200 Odense V

    9.500 kr/md. Lejlighed
    Let

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet.

    63 m² 2 rooms
    2 months dep.

Hero

The page-leading block in the Juli brand layout (ADR 0014): a soft mint garden-tone panel — headline, a handwritten accent line, a lede and the green primary CTA — beside a contained feature photo. Editor-friendly: the photo is a plain contained block, so any image crops cleanly and the panel (not the photo) carries text contrast. Presentational — strings are pre-localized.

Koti joka antaa vapauden

syödä pizzaa aamiaiseksi

Juli tekee vuokra-asumisesta helpompaa ja laadukkaampaa kuin koskaan.

Vuokraa suoraan verkosta

Feature grid

A row of Feature items. Two-up by default; the odd trailing item spans the full row and flips to media-beside-text — count-driven CSS, not a per-item prop (ADR 0011). This sample has three items, so both layouts show. Resize narrow to see it collapse to a single column.

  • Helppo vuokraus tyytyväisyystakuulla

    Teemme asumisen helpoksi alusta alkaen. Koko vuokrausprosessimme hoituu nopeasti verkossa – tyytyväisyystakuulla.

    Lue lisää

  • Ympäristöystävällisyyden edelläkävijä

    Kaikkea toimintaamme ohjaa hiilineutraalius sekä rakentamis- että asumisvaiheessa.

    Lue lisää

  • Me olemme Juli Living

    Me Juli Livingillä haluamme tarjota sinulle erityisen laadukkaan kodin ja mukavan arjen. Olemme skandinaavinen brändi ja toimineet Suomessa vuodesta 2020 alkaen.

    Lue lisää

Process steps

An ordered "how it works" block (ADR 0018): a section heading + lede, then a vertical timeline of numbered steps. Real <ol> markup, so assistive tech gets the sequence; the numeral and the connecting spine present that order. Number-only by intent — no media — so it stays distinct from Feature. Shown in a data-tone="garden" band (the homepage placement): it reads only semantic tokens, so the surface, spine and green markers adapt to the tone (ADR 0013). Toggle the theme to check both modes.

Näin vuokraat Julilta, askel askeleelta

Ensimmäisestä klikkauksesta avaimiin – koko matka hoituu verkossa.

  1. Löydä kotisi

    Selaa vapaita asuntoja ja valitse omaan elämääsi sopiva.

  2. Hae verkossa

    Lähetä hakemus minuuteissa – koko prosessi hoituu verkossa, tyytyväisyystakuulla.

  3. Muuta sisään

    Allekirjoita sähköisesti, nouda avaimet ja asetu hiilineutraaliin kotiin.

Resident stories

The "meet our residents" block (ADR 0019): a heading + intro, then a responsive grid of resident-story cards — photo, name/story title, the property or area, an optional pull-quote, and a "read more" cue linking to that resident's interview. Card-as-link pattern from ListingCard (ADR 0009): the name holds the single <a>, its stretched ::after makes the whole card one tab stop, and the focus ring shows on the card. The third card omits its quote. Tab through to check focus; toggle the theme for both modes.

Mød vores beboere

Hør fra dem, der allerede kalder et Juli-hjem for deres.

FAQ

A frequently-asked-questions accordion (ADR 0020): an optional heading + intro, then a divided list of native <details>/<summary> disclosures — keyboard- and screen-reader-accessible with no JavaScript, and no swap-safe burden (unlike the Header's ARIA disclosures) since it's plain markup. Items open independently; the default marker is replaced with a CSS chevron that rotates on [open]. Tab to a question and press Enter/Space; toggle the theme for both modes.

Ofte stillede spørgsmål

Alt, hvad du har brug for at vide om at leje en bolig hos Juli Living.

Hvordan ansøger jeg om en bolig?

Gennemse de ledige boliger, åbn den, du kan lide, og ansøg online. Hele processen foregår digitalt og tager som regel kun få minutter.

Hvor stort et depositum skal jeg betale?

Depositummet vises ved hver bolig – typisk en til tre måneders husleje. Du finder det nøjagtige beløb på boligens side, før du ansøger.

Hvornår kan jeg flytte ind?

Hver bolig viser sin tidligste indflytningsdato. Boliger markeret “kommer snart” kan ikke lejes endnu – opret en boligagent, så giver vi dig besked, så snart en bliver ledig.

Upcoming homes

The "upcoming homes" block (ADR 0021): a list of large, editorial development teasers — a whole rental development, not a single home. A wide row (photo left, text right, same side every row) led by a teal "coming soon" status pill (from the ADR 0010 status family), then project name, location, a facts line (home count · rooms · move-in timeframe), a blurb and a "read more" cue. No price and no garden band; the pill's colour is what tells this apart from an available-property card at a glance. Card-as-link like ListingCard: the name holds the single <a>, the whole row is one tab stop. Tab through to check focus; resize narrow to see it stack, and toggle the theme to check the pill in both modes.

Kommende lejeboliger

Udforsk de projekter, der er på vej.

  • Udlejning starter i efteråret

    Solhusene

    Ørestad, København
    • 88 boliger
    • 2–6 rum
    • Indflytning efteråret 2025

    Lyse familieboliger omkring en fælles gårdhave, en kort gåtur fra metroen og det grønne ved Amager Fælled.

  • Udlejning starter foråret 2027

    Schade Studios

    Sydhavn, København
    • 247 boliger
    • 1–2 rum
    • Indflytning foråret 2027

    Kompakte, klimaneutrale studios designet til byliv, lige ved vandet og en ny station.

Header

Site chrome: brand wordmark + primary nav. Sub-menus use the W3C APG disclosure pattern (a <button aria-expanded> toggling a sibling list) — keyboard-operable, Escape-to-close, axe-clean (ADR 0006/0007). Open a sub-menu, then press Escape or click outside. Resize below 48rem to collapse the nav behind the menu toggle.

Site chrome: multi-column link grid + a utility row with copyright, the EAA-mandated Accessibility Statement link (ADR 0007), and the theme switcher. Each column is a <nav> landmark named by its heading. Presentational — strings are pre-localized by the caller.

Primitives

  • Button
  • Container
  • Faq
  • Feature
  • FeatureGrid
  • Footer
  • Gallery
  • Header
  • Heading
  • Hero
  • Image
  • Link
  • ListingCard
  • ListingDetail
  • ListingsCarousel
  • ListingsGrid
  • Logo
  • ProcessSteps
  • PropertiesBrowser
  • PropertyDetail
  • ResidentStories
  • SkipLink
  • Text
  • UnitsTable
  • UpcomingHomes