Case Study
VenturaNomadica.com
The Ventura Nomadica company website. Built end-to-end using Trail.
# Intent 004
Homepage Card Sizing and Contact Icon Standardization
---
# Objective
Refine the Ventura Nomadica website layout to ensure homepage cards remain visually consistent and to standardize the presentation of contact links using icons.
This intent corrects card height, enforces consistent card sizing, and simplifies the Contact page by replacing venture logos with standardized icons.
---
# Inputs
Current website implementation located at:
site/
Icon assets located at:
trail/meta/files/icons/
Icons available for use:
- email.svg
- linkedin.svg
- youtube.svg
- link.svg
---
# Scope
This intent modifies only:
- the homepage card layout
- the Contact page presentation
No other pages, navigation structure, or site architecture should change.
---
# Required Changes
## 1. Home Page Card Layout
Correct card sizing and image usage.
### Card Dimensions
- Card width remains unchanged.
- Maximum card height must be **250px**.
- All homepage cards must render at the **same size** regardless of image orientation.
### Image Handling
Images should no longer dominate the card.
The layout must adjust depending on image orientation.
#### Vertical Images
If the image is vertical:
- Card layout splits **left and right**
- Image occupies **1/3 of the card width (left side)**
- Text occupies **2/3 of the card width (right side)**
#### Horizontal Images
If the image is horizontal:
- Card layout splits **top and bottom**
- Image occupies **1/3 of the card height (top)**
- Text occupies **2/3 of the card height (bottom)**
Image placement must not cause cards to exceed the maximum height.
---
## 2. Contact Page
Simplify the presentation of contact information.
### Remove Venture Logos
Remove all venture logos currently displayed next to venture links.
### Add Contact Icons
Add icons to contact links.
Icons must appear directly to the left of the link text.
Icons must be **16px × 16px**.
Icons must not exceed the height of the surrounding text.
Icons should be vertically aligned with the link text.
Icons should inherit the link text color.
### Icon Mapping
Use the following icons:
| Contact Type | Icon |
|---|---|
| Email | email.svg |
| LinkedIn | linkedin.svg |
| YouTube | youtube.svg |
| Links without a dedicated icon | link.svg |
---
# Success Criteria
This intent is complete when:
- homepage cards render at consistent size
- card height does not exceed **250px**
- card layout adjusts correctly based on image orientation
- images no longer dominate card layout
- venture logos are removed from the Contact page
- contact links include the correct icons
- icons render at **16px × 16px**
- icons align visually with the link text
- the website renders correctly and remains fully functional