Skip to content

README.md

Latest commit

 

History

History
94 lines (61 loc) · 4.21 KB

README.md

File metadata and controls

94 lines (61 loc) · 4.21 KB

Card & CTA Patterns Overview

This directory contains reusable card and call-to-action (CTA) patterns for the ASNZ Block Theme. Each pattern is designed for a specific template or listing context.

Card Patterns

1. Tour Card (tour-card.php)

  • Usage: Tour archive template, related/featured tours.
  • Features: Featured image, title, price, duration, experiences, destinations, excerpt, CTA button.
  • Context: Used for listing tours in grid or archive views.

2. Blog Card (blog-card.php)

  • Usage: Blog index/archive template, related/recent posts.
  • Features: Featured image, post title, author, date, categories, tags, excerpt, CTA button.
  • Context: Used for blog post listings and recent/related post sections.

3. Destination Card (destination-card.php)

  • Usage: Destination archive template, displaying regions.
  • Features: Featured image, title, tagline (post meta), excerpt, CTA button.
  • Context: Used for listing travel destinations or regions.

4. Archive Card (archive-card.php)

  • Usage: General archives, travel experiences, search results template.
  • Features: Featured image, title, excerpt, CTA button.
  • Context: Used for generic archive listings, experience grids, and search results.

CTA Patterns

5. Full Width Cover CTA (full-width-cover-cta.php)

  • Usage: Hero/banner sections, landing pages, or any full-width CTA area.
  • Features: Full width cover image (user-supplied), right-aligned heading, supporting text, and CTA button.
  • Context: Flexible hero/CTA for any page; overlay color matches design tokens.

6. Full Width CTA (Mountains) (full-width-cta-mountains.php)

  • Usage: Prominent CTA section with mountain background.
  • Features: Full width cover image, heading, supporting text, right-aligned CTA button.
  • Context: Used for high-impact CTAs, typically on landing or archive pages.

7. Full Width CTA (Sunset) (full-width-cta-sunset.php)

  • Usage: CTA section with sunset background.
  • Features: Full width cover image, heading, supporting text, right-aligned CTA button.
  • Context: Used for visually engaging CTAs, often at the end of content or in feature sections.

8. Full Width CTA (Lion) (full-width-cta-lion.php)

  • Usage: CTA section with lion background.
  • Features: Full width cover image, heading, supporting text, right-aligned CTA button.
  • Context: Used for thematic CTAs, especially in wildlife or adventure contexts.

9. Full Width CTA (Desert) (full-width-cta-desert.php)

  • Usage: CTA section with desert background.
  • Features: Full width cover image, heading, supporting text, right-aligned CTA button.
  • Context: Used for thematic CTAs, especially in travel or adventure contexts.

10. Website CTA (website-cta.php)

  • Usage: General call to action section, often at the end of pages or posts.
  • Features: Centered heading, dividers, supporting text, and primary CTA button.
  • Context: Used for site-wide CTAs, contact prompts, or enquiry banners.

Header & Footer Patterns

11. Header (header.php)

- **Usage:** Site-wide header, included in all templates via template part.
- **Features:** Full-width wrapper, top utility bar (book appointment, travel agents), primary navigation, optional social links, light background, border accent.
- **Context:** Provides unified site navigation and branding, supports accessibility and responsive layouts.

12. Footer (footer.php)

- **Usage:** Site-wide footer, included in all templates via template part.
- **Features:** Full-width wrapper, brand/logo column, partner images, pricing notes, multi-column navigation, social/contact links, styled for accessibility and clarity.
- **Context:** Provides site-wide navigation, legal, and contact info, supports accessibility and responsive layouts.

Standards

  • All patterns use block-based markup and section card/cta styles.
  • Spacing, color, and typography are managed via theme tokens and block supports.
  • Patterns are designed for accessibility, performance, and easy customization.

Extending

  • Add screenshots or Figma references for visual documentation.
  • Update usage notes as new templates or contexts are added.