Template:Card

Description

Individual large feature card supporting background photo or brand pattern, icon badge, description, and animated CTA button.

Usage

Dark Theme with Background Photo

{{Card
|title = Coaches
|image = Coach_Picture.jpg
|icon = sports_soccer
|description = Training materials, drill libraries, and administrative resources.
|link = Category:Coaches
|action = Explore Resources
}}

Dark Theme with Geometric Pattern

{{Card
|title = Parents & Volunteers
|icon = volunteer_activism
|description = Board roles, safe haven information, and regional administration.
|link = Category:Volunteers
|action = Explore Resources
}}

Light Variant (For White-Background Photos & Editorial Layouts)

{{Card
|variant = light
|title = Referees
|image = referee.jpg
|icon = sports_handball
|description = Laws of the game, certification paths, and match reporting.
|link = Category:Referees
|action = Explore Resources
}}

Parameters

title: Card heading.
image: (Optional) photo filename (e.g. coach.jpg). If omitted, renders a decorative geometric brand pattern. See image guidelines below.
icon: (Optional) icon name (e.g. sports_soccer, sports_handball, volunteer_activism).
description: Summary text.
link: Target page or URL (e.g. Category:Coaches).
action: CTA text (defaults to Explore Resources).
variant: (Optional) Card color theme — dark (default, blue-to-navy brand gradient with white text) or light (clean white card surface with brand blue heading and dark charcoal text; recommended for photos with white backgrounds or transparent graphics).
fit: (Optional) Image scaling behavior — contain (default, top-anchored with zero cropping) or cover (full bleed edge-to-edge).
ratio: (Optional) Card aspect ratio — 2:3 (default, 340×510 standard portrait), 3:4 (smartphone sensor ratio), or 1:1 (square).

Image Guidelines

Aspect Ratio: Standard portrait (2:3, ~340 × 510 px) is the default card proportion, matching standard 35mm DSLR cameras and 4×6 photo prints. Smartphone sensor photos (3:4) or square photos (1:1) can also be specified via |ratio=3:4 or |ratio=1:1.
Top-Anchored Photo (Zero Cropping): By default (fit=contain), photos sit flush with the top edge of the card and scale to full card width without cutting off heads, feet, or soccer balls. Any extra space below the photo smoothly flows into the card's background under the title and text.
White-Background Photos: For photos or graphics with a solid white background (or transparent product cutouts), set |variant=light so the image seamlessly blends into the card's clean white surface without creating a jarring rectangular box.
Resolution & File Size: Recommended minimum resolution is 800 × 1200 px (for 2:3) or 800 × 1000 px (for 3:4) to ensure sharpness on Retina/HiDPI screens. Keep file sizes under ~250–300 KB for optimal page load speed.

Examples

Dark Theme with Photo:

Coaches

Training materials, drill libraries, and administrative resources.

Explore Resources

Dark Theme with Pattern:

Parents & Volunteers

Board roles, safe haven information, and regional administration.

Explore Resources

Light Variant (White Card):

Referees

Laws of the game, certification paths, and match reporting.

Explore Resources