Index Tab Footer

Quick Start

1. Copy assets/style.css, assets/script.js and assets/img/ into your project.
2. Load the font, the stylesheet, GSAP and the script:

Code snippet omitted: it ships with the download.

3. Copy the markup between the copy from here and copy to here comments in index.html. The root is <footer class="itf" data-index-tab-footer>. Everything outside it in the demo (the page background) is demo furniture.

GSAP is optional: without it the tabs still work and the file reorders instantly. Without the script, every card shows in full as an ordinary list.

Make it yours

Text and links

• Heading and intro: .itf__title (an h2) and .itf__lede. Change the heading tag freely; styles hang on the class.
• Cards: each <section class="itf__card"> in the nav is one card. Its <h3 class="itf__card-title"> is also the tab label (or set data-itf-label="Shorter" on the card for a shorter tab). The links are an ordinary <ul class="itf__links">; add, remove or edit <li><a> items.
• Card colour: the inline style="--itf-card: #efe5d6" on each card. The tab takes the same colour automatically.
• Practical details: .itf__facts holds four plain blocks: address, opening hours, phone and email, and social links. Edit or remove any.
• Newsletter: "The Lune letter" is just a link; point it at your signup page. No form ships with this section.
• Base line: .itf__mark is the wordmark in type; replace it with an <img> or SVG logo if you have one. .itf__legal holds the small print.

Opening hours and the "open now" line

Each hours row is an <li> with:

• data-days: weekday numbers, 0 Sunday to 6 Saturday; ranges and lists work (1-5, 0,6).
• data-open and data-close: 24-hour times (10:00, 20:00). Leave data-open empty for a closed day.

The visible text of each row is yours to write. The status line ([data-itf-status]) reads these rows in the time zone on the root, data-itf-tz="Europe/Copenhagen" (any IANA name, e.g. Europe/London), and updates every minute. Its text before the script runs is the no-JS fallback. To translate it, set any of these on the status element:

Code snippet omitted: it ships with the download.

Remove the status element if you do not want a live line.

Photos

Each card has one photo in .itf__photo:

Card	File	Size
Shop	assets/img/shop.webp	1200 x 900
Help	assets/img/help.webp	1200 x 900
Visit	assets/img/visit.webp	1200 x 900
About	assets/img/about.webp	1200 x 900

To replace one, change the src, the width/height to your file's size and the alt text, and rewrite the figcaption. Any landscape photo works; the frame crops it to 4:3 on wide screens and 16:10 on phones. Move the crop with the inline --itf-focus (an object-position, e.g. 50% 30% to keep faces near the top). Change the frame ratio for every card with --itf-photo-ratio on the root. No animation code refers to the photos' content. To drop a photo, delete the figure; the links then take the card.

Adding, removing or reordering cards

Add, delete or move <section class="itf__card"> elements inside the nav. Tabs are built from the cards in order, so there is nothing else to update. Two to five cards fit comfortably at desktop width; on phones four short tab labels fit, so keep labels to one short word. With a single card no tabs are built and it shows as a plain card.

A link to a card's id (for example #itf-help) or to anything inside it opens that card.

Brand variables

Set these on .itf (or a class you add to it):

Variable	Default	Controls
--itf-ground	#c8a18b	The clay field
--itf-ink	#2b211c	Type on field and cards
--itf-ink-soft	#3f3029	Secondary type
--itf-line	ink at 22%	Rules
--itf-font	Figtree	All type
--itf-max	1440px	Content width including padding
--itf-pad	clamp(16px, 4vw, 64px)	Side padding
--itf-radius	clamp(18px, 2.2vw, 30px)	Card corners

Example, a sage shop in a different face:

Code snippet omitted: it ships with the download.

Check contrast if you change the ground or card colours: the defaults keep secondary text above 4.5:1 on every card and on the field.

Behaviour and options

• --itf-lift (default 0.22): how far a card rises, as a share of its height, limited by --itf-room. The card's contents fade out while it rises and back in as it settles, so only a clean coloured card shows above the file.
• --itf-room (default clamp(64px, 8vw, 120px)): space kept between the heading and the file so a rising card never covers anything above it. The rise is always limited to the space actually there.
• --itf-step (default 7px): how much of each card behind the front one shows above it.
• Rapid choices always settle on the last one. Choosing the card that is still on top while another is rising sends the rising card back.

Script API, per root:

Code snippet omitted: it ships with the download.

Each root on the page mounts independently.

Accessibility and integration

• The directory is a nav labelled "Site directory"; with the script it becomes a tab list whose tabs control the cards (role="tab" and role="tabpanel"). Arrow keys, Home and End move between tabs; Tab moves into the front card's links. Cards behind the front one are aria-hidden and inert.
• Without JavaScript all cards are shown in full, one after another.
• Reduced motion (including a change while the page is open) or missing GSAP makes changes instant.
• The status line is a polite live region; it only changes when the shop opens or closes.
• The section does not install smooth scrolling, pin, or change the page's scroll. A rising card stays inside the space reserved above the file and never overlaps the heading.
• It uses a named container query, so it recomposes in a narrow column as well as on a narrow screen.

Dependencies and credits

• GSAP 3.15.0 (optional; free for all uses).
• Figtree from Google Fonts, SIL Open Font License.
• Photographs are AI-generated concept images made for this demo, provided for use with this section. Lune, its shop, address, phone number and email are fictional.