Links card
The Links card in Seventh shows a list of large text links, each with an image that appears on hover, inside the Custom grid section.
Applies to: Seventh 4.0.0 and later. Added in: Seventh 1.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.
The Links card shows a heading over an image or video and reveals a list of links from a Shopify menu when a customer hovers over the card or taps it. A card is a block that holds content; the Links card takes its content from its own settings, not from inner blocks.
Where to find it: select Add block inside a Custom grid section, then choose Links card. The Link cards section is a Custom grid preset that adds several Links cards.
How it works
The card shows the Heading on top of the background media. On desktop, the links of the selected Menu slide in when the mouse is over the card. On touch screens, they open when the customer taps the card. Turn on Hide heading on hover to hide the heading while the links are open.
Each top-level item of the menu becomes one link. The links use the body font. The card grows taller when the menu has more links than fit in the Minimum height.
Setting up a Links card
Create the menu
Open Shopify admin → Content → Menus and create a menu with the links you want on the card, for example the subcategories of one collection.
Add the card
In the theme editor, select Add block inside a Custom grid section and choose Links card.
Select the menu and media
Type the Heading, select the menu in Menu, and choose an Image or Video in Links card → Background.
Common use cases
- Quick navigation menus: lists of important links, such as collections, pages or support resources.
- Brand directories: links to partner brands, stockists or external resources.
- Campaign landing pages: guide customers to specific pages during promotions or launches.
Does the Links card show submenus?
No. Seventh does not show nested menu items in the Links card. Only the top-level items of the menu appear. To show a second level, use a separate Links card per submenu, or a Menu block.
All Links card settings
Every setting in this group, with its type and default.
Heading (text field, default: "Menu title"): Sets the text shown on the card before the links open.
Hide heading on hover (checkbox, default: off): Hides the heading while the links are open, on hover or after a tap.
Menu (menu picker): Selects the Shopify menu whose top-level items become the card links. Submenus are not shown.
Links card: Heading typography
Where to find it: Custom grid → Links card → Heading typography
Font (dropdown, default: Headings). Options: Body, Headings, Accent.
Text size (dropdown, default: Heading 3). Options: Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6. Shown only when Font is not Body.
Text size (dropdown, default: XLarge). Options: Large, XLarge, XXLarge. Shown only when Font is Body.
Links card: Links typography
Where to find it: Custom grid → Links card → Links typography
Text size (dropdown, default: Medium). Options: Medium, Large, XLarge.
Reduced text opacity (checkbox, default: off): Shows the links with reduced opacity until a customer hovers over them.
Links card: Background
Where to find it: Custom grid → Links card → Background
Image (image).
Video (video): Plays a muted, looping video behind the card. When both are set, the video replaces the image.
Media overlay (dropdown, default: Color): Sets the overlay on top of the background media: a single color or a gradient. Options: Color, Gradient.
Overlay color (color with transparency, default: rgba(0,0,0,0.03)). Shown only when Media overlay is Color.
Overlay gradient (gradient, default: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%)). Shown only when Media overlay is Gradient.
Links card: Card style
Where to find it: Custom grid → Links card → Card style
Text alignment (alignment, default: Left).
Inner blocks spacing (dropdown, default: Small). Options: XXSmall, XSmall, Small, Regular, Large, XLarge.
Padding (dropdown, default: Regular): Sets the padding between the card edge and its background media. Options: XSmall, Small, Regular, Large, XLarge, XXLarge. Shown only when Add padding to media elements is on.
Add padding to media elements (checkbox, default: off): Adds padding between the card edge and its background media. Off by default, so the media fills the card.
Corner radius (dropdown, default: None). Options: None, Slighty rounded, Rounded, Fully rounded.
Color scheme (color scheme, default: Scheme 2).
Links card: Card height
Where to find it: Custom grid → Links card → Card height
Minimum height (dropdown, default: Medium): Sets the minimum card height as a share of the screen height: Small 25, Medium 35, Large 50 and XLarge 75 percent. The card grows when the links need more space. Options: Small, Medium, Large, XLarge.
Related pages
- Link cards section: the Custom grid preset made of Links cards.
- Custom grid section: the section that accepts the Links card.
- Menu block: shows a menu as a list of links inside any card.
- General section styling: the Section design and Cards arrangement settings of the parent section.