Membership Plans Plugin (Django CMS)

Source: Jira DJAN-6
Parent: DJAN-6
Goal: Implement a flexible Membership Plans plugin for DjangoCMS.org that displays pricing tiers, membership levels, or subscription plans using a combination of standard plan cards and custom horizontal cards.

Integration via Bootstrap Theme.

---

Problem Statement

The website requires a reusable Membership Plans module for showcasing different membership tiers, pricing plans, or subscription levels in a visually appealing and comparison-friendly layout.

Instead of hardcoding membership content, the Membership Plans must be a composed container for multiple plan card plugins, allowing editors to build flexible pricing sections using standard CMS tools while preserving strict layout and design rules.

The Membership Plans must:

• Display section eyebrow and headline
• Support multiple plan cards in a responsive grid
• Include standard vertical plan cards (Platinum, Gold, Silver, Bronze)
• Include a special horizontal card variant for custom/enterprise plans
• Each card includes headline, sub-headline, description text, pricing, and CTA button
• Be fully responsive (grid on desktop, stacked on mobile)
• Follow the design system and theme colors
• Remain accessible and semantically correct
• Be extensible and maintainable

---

Composed Plugin Architecture (Data Layout)

The Membership Plans uses a Parent/Child plugin structure for flexible content management.

Parent Plugin: MembershipPlansPlugin

Responsible for:

• Section eyebrow text
• Section headline
• Overall layout configuration
• Grid column settings
• Background color options

Child Plugins

1. Standard Plan Card: PlanCardPlugin

Represents a standard vertical membership tier card:

• Card headline (e.g., "Platinum", "Gold", "Silver", "Bronze")
• Sub-headline (tier description or tagline)
• Description text (features/benefits)
• CTA button
• Tier-specific styling/color

2. Horizontal Plan Card: HorizontalPlanCardPlugin

Represents a special horizontal card (e.g., Enterprise/Custom plan):

• Optional image
• Card headline
• Sub-headline
• Multiple text columns (typically 3)
• Pricing information (e.g., dollar amount)
• CTA button
• Custom layout and styling

---

Content Fields

Parent Plugin Fields

Content

• Eyebrow Text

  • Implemented using the Django CMS Frontend Heading Plugin
  • Semantic heading level typically H5 or H6
  • Used for section label (e.g., "MEMBERSHIP PLANS", "PRICING")

• Section Headline

  • Implemented using the Django CMS Frontend Heading Plugin
  • Semantic heading level configurable (e.g., H2, H3)
  • Main heading for the membership section

Layout & Styling

• Background Color

  • Uses djangocms-frontend Background mixin
  • Options:
    • White (default)
    • Light Grey
    • Dark Green
  • Background for entire section

• Grid Columns (Desktop)

  • Options:
    • 2 columns
    • 3 columns
    • 4 columns (default)
  • Controls card layout on desktop

• Content Alignment

  • Options:
    • Center (default)
    • Left
  • Controls alignment of section eyebrow and headline

Accessibility

• Section Label (optional)
  • Optional aria-label for the membership plans section
  • Improves screen reader context

---

Child Plugin: Standard Plan Card Fields

• Card Headline

  • Implemented using the Django CMS Frontend Heading Plugin
  • Semantic heading level configurable (e.g., H3, H4)
  • Tier name (e.g., "Platinum", "Gold", "Silver", "Bronze")

• Sub-headline / Tagline

  • Implemented using the Django CMS Frontend Heading Plugin or Text Plugin
  • Smaller text for tier description or tagline
  • Examples: "For professionals", "Best value", "Getting started"

• Description Text

  • Implemented using a Text Plugin via Django CMS Text
  • Rich text content describing features and benefits
  • Supports multiple paragraphs, lists

• CTA Button

  • Implemented using Django CMS Frontend Link/Button Plugin as described here Link/Button Plugin
  • Call-to-action for the plan
  • Examples: "Select Plan", "Get Started", "Sign Up"

• Tier Style / Color

  • Options:
    • Platinum (e.g., dark/premium styling)
    • Gold (e.g., gold/yellow accent)
    • Silver (e.g., grey/silver accent)
    • Bronze (e.g., bronze/copper accent)
    • Custom
  • Applies tier-specific styling to card

• Featured / Highlighted

  • Boolean toggle
  • If enabled, card displays with "Featured" or "Most Popular" badge
  • May have distinct styling to stand out

---

Child Plugin: Horizontal Plan Card Fields

• Optional Image

  • Implemented using the Django CMS Frontend Image Plugin as described here Image Picture Plugin
  • Responsive Image Handling:
    • Thumbnailing model generates multiple sizes for different viewports
    • Use of srcset attribute for responsive image delivery
    • Use of sizes attribute to specify image dimensions per breakpoint
  • SEO Optimization:
    • Alt-text rendered in HTML for accessibility and SEO
    • Image title attribute rendered for additional context

• Card Headline

  • Implemented using the Django CMS Frontend Heading Plugin
  • Semantic heading level configurable (e.g., H3, H4)
  • Plan name (e.g., "Enterprise", "Custom Plan")

• Sub-headline

  • Implemented using the Django CMS Frontend Heading Plugin or Text Plugin
  • Description or tagline

• Text Column 1

  • Implemented using a Text Plugin via Django CMS Text
  • First column of feature description

• Text Column 2

  • Implemented using a Text Plugin via Django CMS Text
  • Second column of feature description

• Text Column 3 / Pricing

  • Implemented using a Text Plugin via Django CMS Text
  • Third column, typically for pricing information
  • Examples: "$999/month", "Contact for pricing"

• CTA Button

  • Implemented using Django CMS Frontend Link/Button Plugin as described here Link/Button Plugin
  • Call-to-action for the custom plan
  • Examples: "Contact Sales", "Get Quote", "Learn More"

---

Frontend Requirements

Layout Behavior

Desktop Layout

• Grid layout with configurable columns (2, 3, or 4)
• Standard vertical cards distributed across grid
• Horizontal card spans full width (all columns) or dedicated row
• Equal card heights within a row for standard cards
• Section eyebrow and headline centered or left-aligned above grid
• Adequate spacing between cards

Mobile Layout

• Single-column stacked layout
• All cards stacked vertically
• Standard cards maintain vertical layout
• Horizontal card adapts to mobile (content stacks)
• Full-width cards
• Touch-friendly buttons

Standard Card Styling

• Vertical card layout
• Card headline at top
• Sub-headline below headline
• Description text in card body
• Button at bottom of card
• Tier-specific colors/styling (Platinum, Gold, Silver, Bronze)
• Optional "Featured" badge
• Card border or shadow
• Adequate internal padding

Horizontal Card Styling

• Horizontal layout (image + content columns)
• Optional image on left side
• Three text columns side-by-side
• Pricing column prominently displayed
• Button below content columns or at right
• Distinct styling to differentiate from standard cards
• Adequate spacing between columns

Visual Hierarchy

• Section eyebrow in smaller, uppercase style
• Section headline large and prominent
• Card headlines bold
• Sub-headlines/taglines distinct style
• Description text readable
• Pricing information prominent
• Buttons visually consistent

Technical Implementation

• Compatible with Bootstrap theme
• Grid uses Bootstrap grid system or CSS Grid
• Semantically clean HTML structure
• Accessibility-compliant markup (ARIA roles, semantic headings)
• No hardcoded content in templates
• Background colors use theme system

---

User Stories & Acceptance Criteria

1. Membership Plans as Parent/Child Plugin Structure

User Story
As a content editor
I want a Membership Plans plugin with separate child plugins for each plan
So that I can easily add, remove, or reorder membership tiers.

Acceptance Criteria

• Parent plugin (MembershipPlansPlugin) exists as container
• Standard card plugin (PlanCardPlugin) represents vertical plan cards
• Horizontal card plugin (HorizontalPlanCardPlugin) represents custom plans
• Parent stores configuration; children store plan content
• Cards can be reordered via drag-and-drop in CMS
• Empty panel (no cards) renders gracefully or is hidden

---

2. Section Eyebrow and Headline

User Story
As a content editor
I want to add an eyebrow and headline to the membership section
So that I can introduce the plans with proper context.

Acceptance Criteria

• Eyebrow uses Heading Plugin (H5/H6)
• Section headline uses Heading Plugin (H2/H3)
• Content alignment configurable (center, left)
• Typography follows design system

---

3. Standard Vertical Plan Cards

User Story
As a content editor
I want to create standard plan cards with headline, description, and button
So that I can display common membership tiers clearly.

Acceptance Criteria

• Card headline uses Heading Plugin (H3/H4)
• Sub-headline uses Heading or Text Plugin
• Description uses Text Plugin
• CTA button uses Django CMS Frontend Link/Button Plugin
• Tier style/color configurable (Platinum, Gold, Silver, Bronze, Custom)
• Optional "Featured" badge toggle
• All elements render in correct order

---

4. Horizontal Custom Plan Card

User Story
As a content editor
I want to create a horizontal card for enterprise/custom plans
So that I can display special pricing with additional details.

Acceptance Criteria

• Horizontal card layout spans full width
• Optional image uses Django CMS Frontend Image Plugin
• Card headline uses Heading Plugin
• Sub-headline uses Heading or Text Plugin
• Three text columns supported via Text Plugins
• CTA button uses Django CMS Frontend Link/Button Plugin
• Card adapts to mobile layout

---

5. Tier-Specific Styling

User Story
As a designer
I want each plan tier to have distinct visual styling
So that tiers are easily differentiated.

Acceptance Criteria

• Tier style options available (Platinum, Gold, Silver, Bronze, Custom)
• Each tier has distinct color/styling from theme
• Featured/highlighted cards have special styling
• Styling applied consistently
• All styles use theme system

---

6. Configurable Grid Layout

User Story
As a content editor
I want to control how many columns the plan cards display in
So that I can adjust the layout based on number of plans.

Acceptance Criteria

• Grid columns configurable: 2, 3, or 4 columns
• Default: 4 columns
• Cards distribute evenly across columns
• Horizontal card spans full width or dedicated row
• Adequate spacing between cards

---

7. Responsive Layout

User Story
As a site visitor on any device
I want the membership plans to display correctly on mobile and desktop
So that I can compare plans regardless of screen size.

Acceptance Criteria

Desktop:

• Grid layout with 2, 3, or 4 columns
• Standard cards in grid
• Horizontal card spans full width
• Equal card heights within row

Mobile:

• Single-column stacked layout
• All cards stacked vertically
• Horizontal card content stacks
• Touch-friendly buttons (minimum 44px)
• No horizontal scrolling

---

8. Responsive Image Handling (Horizontal Card)

User Story
As a site visitor
I want images in horizontal cards to load optimally
So that performance is good on all devices.

Acceptance Criteria

• Image uses Django CMS Frontend Image Plugin
• Responsive image handling with thumbnailing and srcset
• Alt-text and image title rendered for accessibility/SEO
• Image optional per horizontal card
• Layout adapts when image absent

---

9. Accessibility Compliance

User Story
As a user with assistive technology
I want the membership plans to be fully accessible
So that I can understand all plan information.

Acceptance Criteria

• Proper heading hierarchy maintained
• Card content readable by screen readers
• Buttons have accessible labels
• Featured badges announced by screen readers
• Sufficient color contrast for all tier styles
• Keyboard navigation works for all buttons

---

10. Design System Compliance

User Story
As a designer
I want the Membership Plans to follow the design system
So that visual consistency is maintained.

Acceptance Criteria

• Typography uses design system tokens
• Spacing follows design system scale
• Card styling matches design system
• Tier colors use exact theme colors
• Button styles follow design system
• No hardcoded breakpoints or colors

---

11. Maintainability & Extensibility

User Story
As a developer
I want the Membership Plans to be well-structured
So that it can be maintained and extended easily.

Acceptance Criteria

• Clear separation of content, layout, and styling
• Grid layout uses Bootstrap grid or CSS Grid
• Compatible with Bootstrap theme
• Templates are readable and documented
• New plan tiers can be added easily
• Tier styles defined in theme system

---

Definition of Done

• Parent/Child plugin structure implemented (MembershipPlansPlugin / PlanCardPlugin / HorizontalPlanCardPlugin)
• All configuration fields functional
• Section eyebrow and headline use Heading Plugins

Standard Plan Card:

• Card headline uses Heading Plugin
• Sub-headline uses Heading or Text Plugin
• Description uses Text Plugin
• CTA button uses Django CMS Frontend Link/Button Plugin
• Tier style/color options work (Platinum, Gold, Silver, Bronze, Custom)
• Featured badge toggle functional

Horizontal Plan Card:

• Optional image uses Django CMS Frontend Image Plugin
• Card headline uses Heading Plugin
• Sub-headline uses Heading or Text Plugin
• Three text columns supported
• CTA button uses Django CMS Frontend Link/Button Plugin
• Spans full width or dedicated row

Layout Options:

• Grid columns configurable (2, 3, 4)
• Section background options work (White, Light Grey, Dark Green)
• Content alignment options work (Center, Left)

Responsive:

• Desktop: Grid layout with proper column distribution
• Mobile: Single-column stacked layout
• Horizontal card adapts to mobile
• Touch-friendly buttons (minimum 44px)

Image Handling:

• Responsive image handling with thumbnailing and srcset/sizes
• SEO optimization: alt-text and image title rendered in HTML

General:

• Background colors use djangocms-frontend Background mixin
• Fully accessible (proper heading hierarchy, keyboard navigation, screen reader)
• Design system fully respected
• Compatible with Bootstrap theme
• No hardcoded content in templates
• Plugin is maintainable and extensible

---

Design Reference

Desktop: membership_plans.png
Mobile: membership panel_mobile.png

Figma: Django CMS Design System 2025 - Membership Plans

---