Citation

Default density Compact density Restart from the initial state Show the copyable source

Tidal turbines generate on a timetable set by the moon energy.example, so grid operators can plan storage weeks in advance Grid storage notes.

Usage

A Citation sits in running text after the statement it supports. Its label names the source, and with an href it is a link to it. Use one style per passage: labelled chips like the one above, or numbered markers that point to a Citation list. A number and a label can be combined in one citation, but mixing both styles in a passage makes it harder to scan.

Labels and icons

The default slot is the label, such as a site name or a source title; long labels end in an ellipsis. src adds a site icon, which keeps its space while it loads. Without src, or when the image fails, the icon slot is used, else a generic web mark. Put a tp-icon in the icon slot to show an icon without an image.

Default density Compact density Restart from the initial state Show the copyable source

energy.example Coastal survey 2025 Grid storage notes Interview with the site engineer

A site address, one that starts with http:// or https://, opens in a new tab unless you set target. While a labelled site citation is hovered or focused, an external-link mark fades in over the end of the label without changing its width, so the surrounding text never moves. Without an accepted href the citation is plain text and takes no tab stop. Relative addresses, #fragment addresses and http, https, mailto and tel addresses are accepted. Any other address, or no address, renders plain text that is not focusable, unless a preview needs a focus target.

Source preview

A description adds a preview card that opens after a short hover or on keyboard focus. It shows the site icon, the host, source-title and the description. Use source-title for the full title when the label is only the site name. The preview slot takes extra content for the card.

Default density Compact density Restart from the initial state Show the copyable source

Turbine blades now last about twenty years underwater energy.example.

The preview is supplementary. The citation still activates its link normally, and the destination page should carry everything a reader needs.

Numbered references

For footnote-style references, list the sources in a tp-citation-list and point to them from the text. The list numbers its entries in document order from start. An in-text citation names an entry by its id with source and takes its number, address, title and preview from it, so an empty source citation renders as a plain number. superscript raises it like a footnote marker. A citation that shows only a number is a compact round chip; with a label, the number leads the chip. A citation that shows only a number keeps a small space from the word it follows, so markers can be written directly after the word.

Default density Compact density Restart from the initial state Show the copyable source

Output is predictable and storage needs stay small, though flow varies with the season.

Blade wear in fast tidal streams Grid storage notes Coastal survey 2025

Give each marker its entry’s fragment as href, as above: activating the marker moves focus to the entry, and the entry opens the site. Without its own href, a marker links straight to the source. Editing an entry updates every citation that names it.

List layout

orientation="horizontal" lets the entries wrap in rows, which suits a compact source strip under a generated answer. Set index on a citation to override its position.

Default density Compact density Restart from the initial state Show the copyable source

energy.example northwind.example marine.example

Variants

Citations use the Badge treatments through variant. The default outline is a border with muted text, so it reads below the surrounding copy; switch only when a citation needs more or less weight than the text around it.

Default density Compact density Restart from the initial state Show the copyable source

Outline Secondary Ghost Default

Accessibility

A citation’s accessible name is the citation word, its number and its label, else its source title, else the address host, for example “Citation 1: Blade wear in fast tidal streams”. When the link opens in a new tab, the name ends with “(opens in a new tab)”. Numbers follow the locale of the nearest lang. A plain citation is announced as a note with the same name. The preview is supplementary: its text describes the citation without replacing its name, and the destination page must carry everything a reader needs. The list is announced as a list named by label.

API Reference

Every element also accepts motion-policy.

<tp-citation-list>