Recent Articles Grid

What It Does

Displays a customizable grid of article cards, each with an image, optional label, heading, body text, and a call-to-action button.

When to Use It

• Showcasing recent blog posts or news articles on a landing page
• Creating a featured content section with multiple related articles
• Building a resources or insights grid to highlight key content
• Displaying case studies or portfolio items in a card format

How to Add This Module

1. In the page builder, find "Recent Articles Grid" in the module list
2. Drag it to where you want it on the page
3. Click on it to open the settings panel

Settings Explained

Content Tab

The Content tab contains the Article Cards section where you add and configure each card.

Article Cards (Repeater)

You can add between 1 and 6 article cards. Click "Add" to create a new card, or use the drag handles to reorder them.

Image Settings

Setting	What It Does	Options
Image	The main image for the card	Upload or select from file manager
Alt Text	Description for screen readers and SEO	Enter descriptive text
Image Fit	How the image fills its container	Cover (fills, may crop), Contain (fits entirely), Fill (stretches), None (original size), Scale Down
Fit to Container	Makes image fill container completely	On/Off toggle

Content Stack Settings

Setting	What It Does	Default
Show Icon Heading	Display a small label above the main heading	On
Show Main Heading	Display the article title	On
Show Body Content	Display the description text	On

Icon Heading (Label) Settings

Setting	What It Does	Options
Heading Text	The label text (e.g., "Featured", "News")	Text field, default: "Featured"
Heading Level	HTML tag for accessibility	H1 through H6, or Paragraph
Visual Size	How large the text appears	Default, H1 Size through H4 Size
Font Weight	How bold the text appears	Light (300) through Black (900)
Heading Color	Text color	Black, White
Icon Type	Type of icon to display	Font Awesome Icon, Custom SVG
Icon	Select a Font Awesome icon	Icon picker (shows when Font Awesome selected)
Custom SVG Icon	Upload your own icon	File upload (shows when Custom SVG selected)
Icon Position	Where the icon appears	Left of heading, Right of heading
Icon Color	Color of the icon	Black, White, Primary Color, Secondary Color
Alignment	Text and icon alignment	Left, Center, Right
Uppercase Text	Display label in all caps	Checkbox, default: On

Main Heading Settings

Setting	What It Does	Options
Heading Text	The article title	Text field
Heading Level	HTML tag for accessibility	H1 through H6, or Paragraph
Visual Size	How large the text appears	Default, H1 Size through H4 Size
Uppercase Text	Display in all caps	Checkbox, default: Off
Heading Color	Text color	Black, White

Body Content Settings

Setting	What It Does	Options
Content	The article description/excerpt	Rich text editor with formatting options
Text Color	Body text color	Black, White
Text Size	How large the body text appears	Extra Small, Small, Medium, Large, Extra Large

Call-to-Action Button Settings

Setting	What It Does	Options
Button Text	Text displayed on the button	Text field, default: "Learn More"
Button Link	Where the button goes	URL, page, file, email, phone, or CTA
Button Style	Visual appearance	Gradient, Gradient (Black on Hover), Gradient Fill, Primary, Secondary, White, Black, Ghost, Ghost (On Black)
Button Size	How large the button is	Small, Medium, Large

Button Accessibility Settings (in Accessibility sub-section)

Setting	What It Does	When to Use
ARIA Label	Screen reader text	When button text alone is not descriptive enough
Disabled State	Makes button non-clickable	For coming soon features

Stack Gap

Setting	What It Does	Options
Stack Gap	Space between elements within each card	None, Extra Small, Small, Medium, Large, Extra Large, 2X Large

Style Tab

Grid Settings

Setting	What It Does	Options
Grid Gap	Space between article cards	None, Extra Small, Small, Medium, Large (default), Extra Large, 2X Large

Example Setups

Example 1: Blog Highlights Section

Display your three most recent blog posts with a clean, professional look.

1. Add the Recent Articles Grid module to your page
2. For each of the 3 cards:
   • Upload a featured image from the blog post
   • Set Icon Heading Text to the category (e.g., "Marketing Tips")
   • Enter the blog post title in Main Heading
   • Add a 2-3 sentence excerpt in Body Content
   • Set Button Text to "Read Article"
   • Link the button to the full blog post
3. In the Style tab, set Grid Gap to "Large" for comfortable spacing

Example 2: Case Studies Grid

Showcase client success stories in a visually appealing grid.

1. Add the Recent Articles Grid module
2. Click "Add" to create 4 total cards
3. For each card:
   • Upload a client logo or project image
   • Set Icon Heading Text to the industry (e.g., "Healthcare", "Technology")
   • Set Icon Type to "Custom SVG" and upload an industry-relevant icon
   • Enter the case study title in Main Heading
   • Add key results in Body Content
   • Set Button Style to "Primary"
   • Set Button Text to "View Case Study"
4. Set Grid Gap to "Medium" for a tighter grid

Example 3: Featured Resources with Dark Theme

Create a resources section on a dark background.

1. Add the Recent Articles Grid module
2. For each card:
   • Upload resource thumbnail images
   • Set Icon Heading Color to "White"
   • Set Icon Color to "Primary Color"
   • Set Heading Color to "White"
   • Set Text Color to "White"
   • Set Button Style to "Ghost (On Black)"
3. Ensure the section background is set to a dark color

Tips

• Keep article card content concise - the grid works best with short excerpts (2-3 sentences)
• Use consistent image dimensions across all cards for a professional look
• The "Featured" label is great for highlighting important content, but can be hidden if not needed
• For blog content, consider using category names as the Icon Heading text
• Test your grid on mobile devices - it will automatically stack cards vertically on smaller screens
• Use 3 cards for a balanced row, or 4 cards for a denser grid layout
• When using on dark backgrounds, remember to update all text and icon colors to White