Complete Block Showcase – OLD

🎓 Complete Block Guide - FlexibleContentPage

Comprehensive demonstration of ALL available block variations

📚 Guide Contents

• Hero Blocks - 8 variations with explanations
• Grid System - All column layouts
• Card Grids - With/without images, different links
• Content Blocks - Text, buttons, quotes, images
• Multimedia - Videos, maps, tables
• Custom Blocks - Paragraph, heading, list, divider

Each example includes an explanation of its configuration and recommended usage.

🎨 1. Hero Blocks – Featured Sections

Hero Blocks are visually impactful sections that occupy most or all of the screen. Perfect for headers, calls to action, or featured content.

Hero 1: Solid Color

Configuration:

• fluid: True – Full screen
• background_color: "#055354" – Brand primary color
• foreground_color: "#ffffff" – White text
• Inner row with fluid: True to remove margins

Best for: Simple and direct messages, primary CTAs

Hero 2: CSS Gradient

Configuration:

• background_color: "linear-gradient(135deg, #799a02 0%, #cad89c 100%)"
• Use brand palette colors for consistency
• Diagonal gradient (135°) for added dynamism

Best for: Modern designs, secondary sections with visual impact

Hero 6: Centered Content with Margins

Configuration:

• hero.fluid: True – Background is full width
• row.fluid: False – Content has lateral margins
• Creates visual breathing room around the content

Best for: Long-form content, when you want to limit reading width

Hero 7: Two-Column Layout

Configuration:

• Row with two columns col-md-6
• One column for text, another for CTA or image
• Responsive: on mobile they stack vertically

Best for: Landing pages, when you have plenty of content to explain

Hero 8: With Internal CardGrid

Configuration:

• Hero contains a CardGrid instead of a Row
• Great for showcasing features or highlighted services
• Cards use a white background that contrasts against the hero

Best for: Services pages, main features, comparisons

📐 2. Grid System – Responsive Layouts

Bootstrap uses a 12‑column grid. Combine widths to create any layout. Breakpoints (sm, md, lg, xl) adapt layouts to screen sizes automatically.

Grid 1: Single Column (100%)

Code: col-12

Use: Content that should span the full width

Grid 2: Two Equal Columns (50/50)

Code: col-md-6

Responsive: Stack on mobile (100% each), side‑by‑side on tablet+

Grid 3: Three Equal Columns (33% each)

Code: col-md-4

Math: 4 + 4 + 4 = 12 ✓

Grid 4: Four Columns (25% each)

Code: col-sm-6 col-lg-3

Advanced responsive:

• Mobile (xs): 100% each (stacked)
• Tablet (sm): 50% each (2x2)
• Desktop (lg): 25% each (all inline)

Grid 5: Asymmetric Layout (70/30)

Code: col-md-8 + col-md-4

Math: 8 + 4 = 12 ✓

Common use: Main content + sidebar

Grid 6: With Offset (Spacing)

Code: col-md-6 offset-md-3

Effect: Centers a 6‑unit column with 3‑unit space on each side

Math: 3 (offset) + 6 (content) + 3 (auto) = 12 ✓

🃏 CardGrid Block — All Variations

CardGrid creates responsive card layouts. Cards auto-flow and stack on mobile.

CardGrid 1: Basic Cards (Text Only)

Configuration:

• fluid: False – Contained within container
• 3 cards with title, subtitle, and description only
• No images, no links — pure informational

Best for: Feature highlights, service descriptions, benefits

CardGrid 2: Four Cards Grid

Configuration:

• Four cards automatically wrap and stack responsively
• Mix of content lengths shows how cards adapt
• Cards maintain consistent height in each row

Best for: Service offerings, feature highlights, team members

CardGrid 3: Cards with Images

Configuration:

• Cards with header images
• Images appear at top of card
• Great for visual storytelling

Best for: Blog previews, team members, portfolio items, product showcases

CardGrid 4: Full-Width CardGrid

Configuration:

• fluid: True – Full browser width
• Cards stretch edge-to-edge on wide screens
• Creates dramatic visual impact

Best for: Landing page sections, hero features, portfolio showcases

🧩 CodeRed Content Blocks — Additional Components

FlexibleContentPage includes 20 additional CodeRed CMS content blocks.

Text & Typography Blocks

• Text Block — Rich text editor with full formatting: headings, bold, italic, lists, links, images, alignment
• Button Block — Styled buttons with all Bootstrap variants (primary, secondary, success, danger, outlines) linking to pages, documents, or external URLs
• Quote Block — Styled blockquotes for testimonials and important statements with author attribution

Media Blocks

• Image Block — Wagtail images with captions, responsive sizing, and optional links
• Image Link Block — Clickable images that link to pages or URLs
• Embed Video Block — YouTube/Vimeo embedding with responsive aspect ratios
• Download Block — Styled download buttons for PDFs and documents with tracking
• Image Gallery Block — Multi-image lightbox galleries
• Film Strip Block — Horizontal scrolling image strip
• Carousel Block — Sliding image carousel with controls

Interactive & Structural Blocks

• Accordion Block — Collapsible content sections for FAQs and long content
• Modal Block — Popup dialogs triggered by buttons
• Table Block — Drag-and-drop table builder with headers and styling
• Google Map Block — Embedded maps with address search and zoom control

Advanced Blocks

• Page List Block — Automatically displays lists of child pages
• Page Preview Block — Shows preview cards for selected pages
• Price List Block — Pricing tables with features and calls-to-action
• Reusable Content Block — Insert snippets of content that can be shared across pages
• Raw HTML Block — Insert custom HTML/JavaScript for advanced customization

💡 Pro Tip: All CodeRed blocks support advanced settings including custom CSS classes, IDs, and tracking attributes. This makes them incredibly flexible for any design need.

Using Multimedia Blocks

The CodeRed multimedia blocks mentioned above can be added directly in the Wagtail editor:

• Embed Video: Paste any YouTube/Vimeo URL for responsive video embedding
• Google Map: Enter an address to generate an interactive embedded map
• Table: Use the drag-and-drop table builder to create data tables
• Image Gallery: Upload multiple images for lightbox galleries
• Carousel: Create sliding image carousels with navigation controls

All multimedia blocks are fully responsive and work seamlessly across all devices.

⚡ Custom Basic Blocks — Simple & Fast

Lightweight custom blocks for quick content creation (defined in flexible_blocks.py).

Custom Block Examples

In addition to CodeRed's blocks, this project includes 5 custom basic blocks for simpler, faster content creation:

1. Heading Block — CharBlock for simple section titles
2. Paragraph Block — RichTextBlock for formatted text (what you're reading now!)
3. List Block — ListBlock of RichTextBlocks for bulleted/numbered lists
4. Divider Block — StaticBlock for horizontal rules
5. Image Block — ImageChooserBlock for simple images without captions

When to use custom blocks vs CodeRed blocks:

• Custom blocks: Faster to add, simpler interface, great for basic content
• CodeRed blocks: More features (captions, links, tracking), advanced styling options

None

The heading above was created with the custom heading block — just a simple text field, no formatting needed.

⬆️ The line above is a divider block — instant visual separation.

List Block Example

The custom list block creates structured lists with rich text support:

• First item — can include formatting
• Second item — can include links
• Third item — plain text also works

Use the list block when you need more control than a simple bulleted list in a paragraph.

✅ Summary — Complete Block System

This showcase demonstrated all 34 available blocks in FlexibleContentPage:

• Layout Blocks (4): hero, row, cardgrid, html
• CodeRed Content Blocks (20): text, button, image, quote, table, video, maps, and more
• Custom Basic Blocks (5): paragraph, heading, image, list, divider

Key Takeaways:

• Use fluid: True on both hero and inner row for true full-width
• Pass only numbers to column_size (not full class names like "col-md-6")
• Layout blocks (hero, row, cardgrid, html) render without container wrapper
• Content blocks get automatic container wrapper for consistent spacing
• Mix and match CodeRed blocks with custom blocks for maximum flexibility

Happy building! 🚀