Skip to main content
Normal UI

Organism Navigation <TableOfContents>

Live example

How to return

Open Your orders, choose the order and select Return items. Show the QR code at any drop-off point.

Keep the receipt until your refund arrives.

Return windows

30 days for clothing and home items, 14 days for electronics. Food cannot be returned.

The window starts on the day the parcel is delivered.

Refunds

We refund to the way you paid within 5 working days of receiving the item.

Bank transfers can take 2 more days to appear.

Damaged items

Choose Arrived damaged and add a photo. We refund straight away.

You do not need to send the item back.

Table of contents

An “On this page” list of links that highlights the section in view, with no script: scroll-target-group: auto turns the links into scroll markers, and :target-current styles the current one.

Consumer provides: the section headings with ids and a <nav class="pd-toc" aria-label="On this page"> with an <ol> of links.

  • Everywhere, it is an ordered list of in-page links.
  • Where supported, the link for the section being read is canvas-text, bold, with a 2px underline.
  • The highlight is visual only; it does not set aria-current. That is fine for a reading aid, because every link still works and names its section.
  • Support: scroll-target-group and :target-current are Chromium only (Chrome 140+) and experimental. Other browsers show the plain list.

Composition

Made of
Link (atom)

React

import { TableOfContents } from '@imsus/normal-ui-react';

<TableOfContents items={[{ href: '#how', label: 'How to return' }]} />