Resident stories

The meet-our-residents grid of card-as-link stories.

The "meet our residents" block (ADR 0019): a heading and intro, then a responsive grid of resident-story cards — photo, name or story title, the property or area they live in, an optional pull-quote, and a "read more" cue linking to that resident's interview page.

Card-as-link, the 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 rather than around the text. Tab through the preview to check it. The third card omits its quote, so the optional-field shape is visible.

Not "testimonials": these link out to a story rather than standing as pull-quotes, and the layout is a static grid rather than a carousel.

The story grid

Tone

Mød vores beboere

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

Props

packages/primitives/src/ResidentStories.astro
PropTypeRequired
headingstringyes
body

Optional intro under the section heading.

string
storiesResidentStory[]yes
headingLevel1 | 2 | 3 | 4 | 5 | 6
storyHeadingLevel

Heading level for each resident's name, defaults one below the section.

1 | 2 | 3 | 4 | 5 | 6
ResidentStory — referenced by a prop above
FieldTypeRequired
imageSrcstringyes
imageAltstring
name

Resident name or story title, e.g. "Meet Christine — a resident in UN17".

stringyes
location

The property or area they live in, e.g. "UN17 Village, Ørestad".

stringyes
quote

Optional pull-quote teaser.

string
linkHref

Link to the resident's interview page; omit to render the card inert.

string
linkLabel

Visible "read more" cue (the whole card is the link).

stringyes