# Blog Articles Section > **What You'll Learn** > > * How to display blog articles in a customizable card layout with advanced styling options > * Configuration options for article alignment, colors, dates, and animation effects > * How to create engaging blog article grids with fade-in animations and custom styling > * Best practices for blog page layout optimization and content presentation *** ## 🎯 What is the Blog Articles Section? The **Blog Articles Section** is a sophisticated article display system designed specifically for blog pages that showcases blog posts in a visually appealing card-based grid layout. Unlike the simple Blog Feed Section, this section provides extensive customization options for card styling, animations, alignment, and visual effects to create a professional, magazine-style blog presentation. **Key Features:** * Customizable article card layouts with rounded corners * Advanced alignment options for titles and dates * Fade-in animations with adjustable duration * Comprehensive color customization for cards, headers, and dates * Responsive design optimized for blog browsing * Automatic article pagination (up to 600 articles) * Integration with article images, titles, and creation dates * Professional card-based layout system Available in: * βœ… Plain Jane v3.1+ * βœ… Plain Jane Interactive v2+ > πŸ’‘ **Note**: This section is specifically designed for blog template pages and automatically pulls articles from the current blog context. *** ## πŸ”§ How to Add Blog Articles Section 1. Go to **Online Store > Themes > Customize** 2. Navigate to **Blog posts > \[Your Blog]** or create a blog template page 3. Click **Add section** 4. Select **Blog Articles** section 5. Configure the styling, colors, and animation options 6. Position the section where you want articles to appear > ⚠️ **Important**: This section only works on blog template pages and requires existing blog articles to display content. *** ## πŸ“„ Article Display & Layout ### **Automatic Article Loading** **Article Source** * Automatically loads articles from the current blog * Displays up to 600 articles with built-in pagination * Shows article images, titles, and creation dates * Links each article card to the full article page **Article Card Structure** * **Article Image**: Featured image from each blog post * **Article Title**: Customizable alignment and color * **Creation Date**: Optional display with custom color and alignment * **Card Background**: Customizable background color and corner radius **Grid Layout** * Responsive grid layout that adapts to screen size * Automatic spacing and alignment for professional appearance * Touch-friendly cards optimized for mobile browsing * Hover effects for better user interaction *** ## 🎨 Alignment & Typography ### **Article Title Alignment** **Title Positioning Options** * **Left**: Traditional left-aligned titles with left margin * **Center**: Centered titles for balanced appearance * **Right**: Right-aligned titles for alternative layout **Title Styling** * **Article Header Color**: Custom color for article titles * Text automatically adjusts position based on alignment choice * Consistent typography across all article cards * Responsive text sizing for mobile devices ### **Date Display Options** **Creation Date Settings** * **Display Article Created Date**: Toggle to show/hide publication dates * **Article Date Color**: Custom color for date text * **Date Alignment**: Coordinated with title alignment for consistency * **Date Format**: Uses Shopify's abbreviated date format (e.g., "Jan 15, 2024") *** ## 🎨 Card Styling & Colors ### **Article Card Customization** **Card Background** * **Article Card Color**: Background color for each article card * Default: White (#FFF) for clean, readable appearance * Supports any hex color or theme colors * Consistent background across all cards **Card Shape & Corners** * **Card Curve**: Adjustable border radius (0-10px) * Range from sharp rectangular cards to rounded modern cards * Default: 0px for clean, professional appearance * Creates consistent visual style across blog layout ### **Color Scheme Options** **Comprehensive Color Control** * **Article Header Color**: Title text color (default: Black #000) * **Article Date Color**: Date text color (default: Black #000) * **Article Card Color**: Card background color (default: White #FFF) * All colors support transparency and custom hex values **Visual Hierarchy** * Color choices create clear information hierarchy * High contrast options for accessibility compliance * Consistent color application across all article cards *** ## ✨ Animation & Effects ### **Fade-In Animation** **Animation Configuration** * **Fade-In Duration**: Adjustable from 0-8 seconds * Default: 2 seconds for smooth, noticeable effect * Creates professional page loading experience * Applies to entire article grid simultaneously **Animation Behavior** * CSS-based fade-in animation for performance * Triggers when section becomes visible * Smooth transition from transparent to full opacity * No impact on page load speed or SEO **Animation Timing** * 0 seconds: Instant display (no animation) * 1-3 seconds: Quick, subtle animation * 4-6 seconds: Slow, dramatic animation * 7-8 seconds: Very slow, cinematic effect *** ## πŸ“± Mobile Optimization ### **Responsive Design** **Mobile Layout** * Article cards automatically resize for mobile screens * Touch-friendly card size and spacing * Optimized image loading for mobile performance * Consistent typography scaling across devices **Mobile-Specific Features** * Fast loading article images * Touch-optimized card interactions * Responsive grid layout adaptation * Mobile-friendly date and title formatting **Performance Considerations** * Optimized image loading for mobile bandwidth * Efficient CSS animations that don't impact scrolling * Fast card rendering for smooth mobile browsing * Minimal JavaScript for better mobile performance *** ## πŸ”„ Integration with Blog System ### **Shopify Blog Integration** **Automatic Content Pulling** * Seamlessly integrates with Shopify's blog system * Automatically displays published articles * Respects article publication dates and status * Links directly to individual article pages **Article Metadata** * Displays article featured images * Shows article titles with custom styling * Includes publication dates with formatting options * Maintains article URL structure for SEO ### **Content Management** **Blog Management** * Works with any blog created in Shopify Admin * Automatically updates when new articles are published * Respects article visibility settings * Maintains proper SEO structure for blog content **Article Requirements** * Articles need featured images for optimal appearance * Article titles display automatically * Publication dates show creation time * All published articles appear in chronological order *** ## πŸŽ›οΈ Advanced Customization ### **Design Strategy** **Professional Blog Layouts** * Use left alignment for traditional blog appearance * Choose center alignment for modern, magazine-style layout * Apply subtle corner radius (2-4px) for contemporary feel * Use high contrast colors for better readability **Color Coordination** * Match card colors with overall blog theme * Ensure title colors have sufficient contrast * Use consistent date colors across all cards * Consider brand colors for cohesive appearance ### **Animation Strategy** **Loading Experience** * Use 2-3 second fade-in for professional feel * Avoid very long animations (>4 seconds) for user experience * Consider no animation (0 seconds) for content-heavy blogs * Test animation timing on actual devices **Performance Balance** * Shorter animations reduce perceived loading time * Longer animations can create dramatic effect but may feel slow * Consider your audience and content style when choosing duration *** ## πŸ”§ Troubleshooting ### **Articles Not Displaying** **Common Issues** * No published articles in the current blog * Section added to non-blog template page * Blog articles missing featured images * Section settings need to be configured **Solutions** * Ensure blog has published articles with featured images * Verify section is added to correct blog template * Check article publication status in Shopify Admin * Configure section colors and settings properly * Test section on actual blog page, not in theme editor ### **Card Styling Issues** **Potential Problems** * Cards appearing with no background or borders * Text colors too light to be visible * Corner radius not applying correctly * Inconsistent card appearance **Solutions** * Set card color to contrast with page background * Increase color contrast for title and date text * Adjust corner radius settings and save changes * Clear browser cache after making style changes * Test card appearance with actual blog content ### **Animation Problems** **Common Problems** * Fade-in animation not working * Animation too slow or too fast * Animation causing performance issues * Animation not displaying on mobile **Solutions** * Verify fade duration is set above 0 seconds * Adjust animation timing for better user experience * Test animation on different devices and browsers * Consider reducing duration if performance issues occur * Check for CSS conflicts with custom code ### **Mobile Display Issues** **Potential Issues** * Cards too small on mobile devices * Text not readable on mobile screens * Images not loading properly on mobile * Layout breaking on different screen sizes **Solutions** * Test section on actual mobile devices * Ensure sufficient color contrast for mobile viewing * Verify article images are high-quality and properly sized * Check mobile layout in different orientations * Test loading speed on mobile connections *** ## πŸ“Š Performance Impact ### **Loading Efficiency** **Optimized Performance** * CSS-based animations for smooth performance * Efficient article loading with pagination * Optimized image loading for featured images * Minimal JavaScript overhead **SEO Benefits** * Proper article linking structure * Clean HTML markup for search engines * Semantic article markup for better indexing * Fast loading times support SEO rankings **User Experience** * Smooth animations enhance perceived performance * Quick card interactions improve engagement * Responsive design ensures accessibility * Professional appearance builds trust *** ## 🎯 Best Practices Summary ### **Setup Checklist** ``` βœ… Ensure blog has published articles with featured images βœ… Add section to blog template page (not homepage) βœ… Configure article title alignment for your blog style βœ… Set card colors with sufficient contrast for readability βœ… Choose appropriate corner radius for your brand aesthetic βœ… Configure fade-in duration for good user experience (2-3 seconds recommended) βœ… Test article date display and formatting βœ… Verify mobile appearance and touch interactions βœ… Check color contrast for accessibility compliance βœ… Test loading performance with multiple articles βœ… Ensure article links work properly βœ… Verify animation performance on different devices ``` ### **Content Strategy** **Article Optimization** * Use high-quality featured images for all blog articles * Write compelling article titles that work with your chosen alignment * Maintain consistent publishing schedule for fresh content * Optimize article images for fast loading **Visual Consistency** * Use consistent color scheme across all blog articles * Maintain uniform image dimensions for better grid appearance * Apply consistent corner radius settings throughout blog * Create cohesive visual experience with other blog sections *** ## πŸš€ Advanced Use Cases ### **Magazine-Style Blogs** **Professional Publishing** * Use center alignment for modern magazine layout * Apply subtle corner radius (3-5px) for contemporary feel * Choose sophisticated color schemes for professional appearance * Implement moderate fade-in animation (2-3 seconds) for elegance ### **Content-Heavy Blogs** **Information-Dense Layouts** * Use left alignment for traditional reading patterns * Minimize animation duration for faster content access * Ensure high contrast colors for optimal readability * Focus on clean, efficient card layouts ### **Brand-Focused Blogs** **Brand Integration** * Coordinate card colors with brand color palette * Use brand fonts through theme typography settings * Apply brand-appropriate corner radius styling * Create cohesive experience with other site sections *** The Blog Articles Section provides sophisticated article display capabilities that transform basic blog listings into engaging, professional content presentations with extensive customization options for alignment, styling, and animation effects. ### **Need Help?** * πŸ’¬ **Join our community on Discord:** * πŸ“§ **Email us at:** * πŸ’» **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.openspaces.design/readme-1/sections-and-features/blog-articles-section.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.