Expanding Link Shelf

Quick start

Copy the .dls section, assets/style.css, assets/interaction.js and the local images in assets/img/ into your site:

Code snippet omitted: it ships with the download.

The extractable section begins at <section class="dls"> in index.html. The body margin and the Photo/Type preview controls are demo context only. The buyer download contains the styles for both treatments; it does not include the preview picker.

Choose a treatment

Set data-variant on the section root:

Code snippet omitted: it ships with the download.

Use data-variant="type" for the solid-color, typographic doors. Both treatments use the same editable markup and links. The Photo version is the default in the preview.

Make it yours

Edit the intro in .dls__intro, then edit each <li class="dls__door"> in the labelled navigation list:

• Replace its href, route tab, context line, heading and link cue with your destination. The same route tab works in both visual treatments.
• Replace that route’s <img src> with your landscape photograph. The supplied concepts are 1536×1024 WebPs. Its object-position control lives on the matching .dls__door--... style modifier; adjust it to frame your subject. Photos appear in the Photo treatment only.
• alt="" is suitable when the route name already describes the linked destination. Write a concise photo alt if your replacement image adds useful information.
• Reorder list items to change route order. The first item opens wide at rest; after removal, the next item takes that place. Copy a <li> to add a destination and choose a matching style modifier. Three to five items are intended; check narrow previews if you add more.

The root tokens at the top of assets/style.css control paper, ink, content width, gutters, rail height, spacing, font roles and motion. Each route modifier groups its accent color, foreground, type role and photo crop. The route text is set on solid surfaces with at least 6.63:1 contrast in the supplied set; recheck foreground/background pairs after recoloring.

Interaction and accessibility

At a wide desktop size, the first route is open at rest. Hover or keyboard focus expands a route while its neighbors remain visible. With assets/interaction.js included, the last hovered route stays open after the pointer leaves until another route is hovered. Each card is an ordinary anchor, and keyboard focus has a clear inset outline. If the pointer remains over another card while focus moves, the focused link wins.

The Photo caption uses a width tied to the section, not to the panel that is expanding. Its title keeps the same line breaks while the image panels move. The copy waits briefly as a panel opens, then fades in without a vertical shift. The Type treatment uses the same stable content width and fade.

Touch devices and narrow host columns show a short stack of complete destinations. The Photo treatment places the image above its copy; Type shows its color field and copy. Without JavaScript, every route stays readable and CSS hover/focus still expands a route; the first route returns when the pointer leaves. Reduced-motion preferences remove transitions.

The standalone demo adds a small Photo/Type picker. On the product page, the existing preview tabs control the embedded demo. The picker is excluded from the ZIP; the two styles ship in assets/style.css, so a buyer chooses one on the section root.

Photos and dependencies

The five bundled images are fictional concept photography for Morrow House, a fictional neighbourhood arts venue in Bristol. They do not depict a real venue or client result. Each sample link uses href="#"; replace those targets with pages on your own site.

The section uses HTML, CSS, a small local pointer-memory script and local WebP images. It has no external fonts, hosted images or frameworks. The demo-only preview script is not part of the buyer download.