App Gallery Shortcode#
Display clickable app cards in a responsive grid layout.
Usage#
{{< app-gallery cols="3" >}}
{{< app-item title="Swim Tracker" description="Track your swimming workouts" link="/swim-tracker" >}}
{{< app-item title="Another App" description="Another great app" link="/apps/another" >}}
{{< /app-gallery >}}
Parameters#
App Gallery#
| Parameter | Default | Description |
|---|
cols | 3 | Number of columns |
App Item#
| Parameter | Required | Description |
|---|
title | Yes | App title |
description | Yes | Brief description of the app |
link | Yes | URL to the app |
Features#
- Responsive grid: Auto-fit layout with minimum width of 280px per card
- Hover effects: Box shadow and blue border appear on hover
- External links: Opens in new tab with security attributes
- Icon: External link icon appears in each card
- Styled cards: Professional card design with padding and rounded corners
Notes#
- Links open in new tabs automatically
- Grid automatically adjusts number of columns based on screen width
- Minimum card width is 280px
- 2rem gap between cards