Buttons
Outline Buttons
Fill Buttons
Row Shortcode Examples
1. Default Row (Full Width)
This is a default full-width row with no background utility classes applied.
2. Row with Container Width
This row uses the container width (max-width: 1200px).
3. Row with Compact Width
This row uses the compact width (max-width: 800px).
4. Primary Gradient Background
Primary Gradient Row
A container-sized section using the primary → primary-light gradient.
5. Light Gradient Background
Light Gradient Row
This shows the white → light gradient background.
6. Solid Primary Background
Primary Background
This row uses .bg-primary and applies white text automatically.
7. Light Gray Background
Light Gray Background
Useful for subtle section separation.
8. Dark Background (Auto White Text)
Dark Background Row
Automatically swaps text colors for readability.
9. Row with Custom Text Utility
Primary-Colored Text
This row uses .text-primary for headlines or highlights.
10. Mixed Utilities + Compact Layout
Compact Dark Row
This row is narrower and great for storytelling or callouts.
11. Gradient Row with Buttons Inside
Row with Button Components
This demonstrates real usage inside a gradient row.
12. Row Showing Columns (Real-Life Layout)
Left Column
Useful for text, features, or lists.
Right Column
Great for icons, stats, or small images.