Card - With Button

This featured card uses a layered approach where a slanted image overlays a solid color card. Note: This design uses sharp corners (no border-radius) and the image element is positioned on top of the card base.

Grants &
funding

We distribute funding to community clubs, volunteers, and athletes. Our grants team can support you with information.

Rugby Players

When to use this component

Use this featured card variant for high-impact sections on landing pages, such as the homepage or main service hubs. It is designed to draw the user's attention to a primary piece of content or a specific grant/funding opportunity.

How it works

This component uses a layered composition where an image with a signature brand slant is positioned on top of a solid background card. Follow these structural rules:

  • Sharp Corners: Unlike standard cards, this featured variant uses 0px border-radius (no rounded corners).
  • Z-Index Layering: The background card is z-0 and the slanted image overlay is z-10.
  • Text Protection: Text must be contained within the left 50-60% of the card to prevent it from being obscured by the overlapping image.
  • Brand Slant: The image overlay uses a specific CSS clip-path to create the sharp, angled edge.
  • Typography: Use Objektiv MK1 Bold for headings in uppercase to maintain a high-impact editorial feel.

Sport Wales Guidelines

  • Use the Sport Wales Teal (#299D91) for the background of featured cards.
  • Primary CTA buttons within these cards should use Sport Wales Red (#E32434).
  • Ensure image content is relevant and follows the "Active People" photography style.
  • Headings should be short (max 3-4 words) to fit the specific text container size.