Gradient System
A warm gradientMangoSunset wash over a plain .contentBox — background styling supplied entirely by the shared gradient preset.
Apply any gradient class.
Colour Schemes
A variables.
Theme any card with one class.
Gradient & Image
An gradientSunset card with a plain <img> placed directly inside no wrapper, no overlay.
Picture Scheme
A scheme-oceanMist tile showcasing an in-card photo and a hvr-float lift on hover.
Hover & Motion
An gradientMysticPurple backdrop that hvr-bob bobs gently on mouse-over.
Breakout Section 1
This section breaks out of the normal content width to create visual emphasis.
Max width is 1300px instead of the normal 1200px.
Content Box
Limited Time
Another overlapping element
Feature Tile
Plain <img> children keep the card layout intact and never clip the photo.
Photo Showcase
A clean in-card image with the gradientMangoSunset background preset behind the copy.
Stacked & Simple
Cards simply stack in row order on mobile and fan out across the desktop grid.
Font Sizes
Typography scales through the contract from compact captions to display headings.
Generic Cards
There is no fixed page layout here just plain .contentBox containers arranged by the framework grid.
Breakout Emphasis
Row 8 is the third breakout section, giving full-width room to highlight important content.
Berry Punch
A scheme-berryPunch card with a direct photo and a playful hover.
Dark Gradient
A gradientNight card for dark, moody emphasis.
Sun Rise Theme
A scheme-sunRise card another themed colour-scheme preset.
Mango Sunset
Gradient + hover + deep shadow all on one lightweight card.