Template:LinkCard
A fully clickable navigation card with an optional icon, heading, and supporting text. Uses a stretched link on the title for screen reader accessibility. Colours adapt to the wiki's light and dark themes.
Usage
Internal wiki link
{{LinkCard
|icon=home
|title=Getting Started
|content=Essential guides and first steps for new users.
|link=Getting Started
}}
Essential guides and first steps for new users.
External link
{{LinkCard
|icon=globe
|title=Explore Swarthmore
|content=Visit the college website for news, events and information.
|url=https://www.swarthmore.edu/
}}
Visit the college website for news, events and information.
Parameters
| Parameter | Default | Description |
|---|---|---|
title |
— | Heading text. Serves as the accessible link label when link or url is provided.
|
1 / content |
— | Supporting content. Supports wikitext, including paragraphs and lists. Use 1= or content= when the text contains an equals sign.
|
link |
— | Internal wiki page name, without link brackets. |
url |
— | External URL, including https://. Takes precedence over link when both are supplied.
|
icon |
— | Any name from Template:Icon. Shown large, in the brand colour, to the left of the heading. |
Notes
- Provide both title and either link or url to make the card interactive.
- The link is placed semantically on the title and stretched across the card via CSS (::after), preventing screen readers from reading the entire card body as the link label.
- Avoid placing secondary links inside content, as the stretched link overlays the entire card.