Package com.oorian.html.layout

Class FeatureGridLayout

java.lang.Object
com.oorian.html.Element<FeatureGridLayout>
com.oorian.html.VisualElement<FeatureGridLayout>
com.oorian.html.StyledElement<FeatureGridLayout>
com.oorian.html.layout.PageLayout<FeatureGridLayout>
com.oorian.html.layout.FeatureGridLayout
public class FeatureGridLayout extends PageLayout<FeatureGridLayout>
A layout for product feature pages with headline, feature cards grid, and CTA section.

FeatureGridLayout provides a structure optimized for showcasing product features, service offerings, or capabilities. It features a headline area, a grid of feature cards, and an optional call-to-action section.

Structure:

 ┌──────────────────────────────────────┐
 │           Headline Area              │
 │     "Amazing Features"               │
 │     "Subtitle description..."        │
 ├──────────────────────────────────────┤
 │  ┌────────┐ ┌────────┐ ┌────────┐    │
 │  │Feature │ │Feature │ │Feature │    │
 │  │   1    │ │   2    │ │   3    │    │
 │  └────────┘ └────────┘ └────────┘    │
 │  ┌────────┐ ┌────────┐ ┌────────┐    │
 │  │Feature │ │Feature │ │Feature │    │
 │  │   4    │ │   5    │ │   6    │    │
 │  └────────┘ └────────┘ └────────┘    │
 ├──────────────────────────────────────┤
 │         Call to Action               │
 │     [Get Started] [Learn More]       │
 └──────────────────────────────────────┘

Features:

  • Headline area for title and subtitle
  • Flexible grid of feature cards
  • Configurable column count
  • Optional CTA section at bottom
  • Centered content with max width

Usage:


 // Basic feature grid
 FeatureGridLayout features = new FeatureGridLayout();
 features.headline(title, subtitle)
         .addFeature(featureCard1)
         .addFeature(featureCard2)
         .addFeature(featureCard3)
         .cta(ctaButtons);

 // Custom column count
 FeatureGridLayout features = new FeatureGridLayout();
 features.setColumns(4)
         .headline(heading)
         .addFeature(card1)
         .addFeature(card2);

 // With multiple features at once
 features.features(card1, card2, card3, card4, card5, card6);

 // Centered with max width
 features.setMaxWidth(1200)
         .setContentPadding("48px");
Since:
2025
Version:
1.0
Author:
Marvin P. Warble Jr.
See Also:

  • Constructor Details

    • FeatureGridLayout

      public FeatureGridLayout()
      Constructs a FeatureGridLayout with default configuration.

  • Method Details

    • initialize

      protected void initialize()
      Builds the element tree for the layout.
      Overrides:
      initialize in class StyledElement<FeatureGridLayout>

    • headline

      public FeatureGridLayout headline(Element<?> title)
      Sets the headline content (title and optional subtitle).
      Parameters:
      title - the title element (H1, H2, etc.)
      Returns:
      this FeatureGridLayout for method chaining

    • headline

      public FeatureGridLayout headline(Element<?> title, Element<?> subtitle)
      Sets the headline content with title and subtitle.
      Parameters:
      title - the title element (H1, H2, etc.)
      subtitle - the subtitle element (Paragraph, Span, etc.)
      Returns:
      this FeatureGridLayout for method chaining

    • headlineContent

      public FeatureGridLayout headlineContent(Element<?> content)
      Sets custom headline content.
      Parameters:
      content - the headline content element
      Returns:
      this FeatureGridLayout for method chaining

    • addFeature

      public FeatureGridLayout addFeature(Element<?> feature)
      Adds a feature card to the grid.
      Parameters:
      feature - the feature card element
      Returns:
      this FeatureGridLayout for method chaining

    • features

      public FeatureGridLayout features(Element<?>... features)
      Sets multiple feature cards at once.
      Parameters:
      features - the feature card elements
      Returns:
      this FeatureGridLayout for method chaining

    • cta

      public FeatureGridLayout cta(Element<?> content)
      Sets the CTA (call-to-action) section content.
      Parameters:
      content - the CTA content (buttons, links, etc.)
      Returns:
      this FeatureGridLayout for method chaining

    • ctaButtons

      public FeatureGridLayout ctaButtons(Element<?>... elements)
      Sets multiple CTA elements (buttons).
      Parameters:
      elements - the CTA elements
      Returns:
      this FeatureGridLayout for method chaining

    • setColumns

      public FeatureGridLayout setColumns(int columns)
      Sets the number of columns in the feature grid.
      Parameters:
      columns - the number of columns
      Returns:
      this FeatureGridLayout for method chaining

    • setGridGap

      public FeatureGridLayout setGridGap(int gap)
      Sets the gap between feature cards.
      Parameters:
      gap - the gap in pixels
      Returns:
      this FeatureGridLayout for method chaining

    • setGridGap

      public FeatureGridLayout setGridGap(String gap)
      Sets the gap between feature cards.
      Parameters:
      gap - the gap value (e.g., "32px", "2rem")
      Returns:
      this FeatureGridLayout for method chaining

    • setMaxWidth

      public FeatureGridLayout setMaxWidth(int maxWidth)
      Sets the maximum width of the content area.
      Overrides:
      setMaxWidth in class StyledElement<FeatureGridLayout>
      Parameters:
      maxWidth - the max width in pixels
      Returns:
      this FeatureGridLayout for method chaining

    • setMaxWidth

      public FeatureGridLayout setMaxWidth(String maxWidth)
      Sets the maximum width of the content area.
      Overrides:
      setMaxWidth in class StyledElement<FeatureGridLayout>
      Parameters:
      maxWidth - the max width value (e.g., "1200px", "80%")
      Returns:
      this FeatureGridLayout for method chaining

    • setContentPadding

      public FeatureGridLayout setContentPadding(int padding)
      Sets padding for the content area.
      Parameters:
      padding - the padding in pixels
      Returns:
      this FeatureGridLayout for method chaining

    • setContentPadding

      public FeatureGridLayout setContentPadding(String padding)
      Sets padding for the content area.
      Parameters:
      padding - the padding value (e.g., "48px", "3rem")
      Returns:
      this FeatureGridLayout for method chaining

    • setHeadlineSpacing

      public FeatureGridLayout setHeadlineSpacing(int spacing)
      Sets spacing between the headline and feature grid.
      Parameters:
      spacing - the spacing in pixels
      Returns:
      this FeatureGridLayout for method chaining

    • setHeadlineSpacing

      public FeatureGridLayout setHeadlineSpacing(String spacing)
      Sets spacing between the headline and feature grid.
      Parameters:
      spacing - the spacing value (e.g., "48px", "3rem")
      Returns:
      this FeatureGridLayout for method chaining

    • setCtaSpacing

      public FeatureGridLayout setCtaSpacing(int spacing)
      Sets spacing between the feature grid and CTA.
      Parameters:
      spacing - the spacing in pixels
      Returns:
      this FeatureGridLayout for method chaining

    • setCtaSpacing

      public FeatureGridLayout setCtaSpacing(String spacing)
      Sets spacing between the feature grid and CTA.
      Parameters:
      spacing - the spacing value (e.g., "48px", "3rem")
      Returns:
      this FeatureGridLayout for method chaining

    • setCtaGap

      public FeatureGridLayout setCtaGap(int gap)
      Sets the gap between CTA buttons.
      Parameters:
      gap - the gap in pixels
      Returns:
      this FeatureGridLayout for method chaining

    • setCtaGap

      public FeatureGridLayout setCtaGap(String gap)
      Sets the gap between CTA buttons.
      Parameters:
      gap - the gap value (e.g., "16px", "1rem")
      Returns:
      this FeatureGridLayout for method chaining

    • alignHeadlineLeft

      public FeatureGridLayout alignHeadlineLeft()
      Aligns the headline to the left instead of center.
      Returns:
      this FeatureGridLayout for method chaining

    • alignHeadlineRight

      public FeatureGridLayout alignHeadlineRight()
      Aligns the headline to the right.
      Returns:
      this FeatureGridLayout for method chaining

    • alignCtaLeft

      public FeatureGridLayout alignCtaLeft()
      Aligns the CTA to the left instead of center.
      Returns:
      this FeatureGridLayout for method chaining

    • alignCtaRight

      public FeatureGridLayout alignCtaRight()
      Aligns the CTA to the right.
      Returns:
      this FeatureGridLayout for method chaining

    • getContainer

      public Div getContainer()
      Returns the container for advanced customization.
      Returns:
      the container div

    • getHeadlineArea

      public Div getHeadlineArea()
      Returns the headline area for advanced customization.
      Returns:
      the headline area div

    • getFeatureGrid

      public Div getFeatureGrid()
      Returns the feature grid for advanced customization.
      Returns:
      the feature grid div

    • getCtaArea

      public Div getCtaArea()
      Returns the CTA area for advanced customization.
      Returns:
      the CTA area div

    • twoColumnGrid

      public FeatureGridLayout twoColumnGrid()
      Configures a two-column feature grid.
      Returns:
      this FeatureGridLayout for method chaining

    • threeColumnGrid

      public FeatureGridLayout threeColumnGrid()
      Configures a three-column feature grid (the default).
      Returns:
      this FeatureGridLayout for method chaining

    • fourColumnGrid

      public FeatureGridLayout fourColumnGrid()
      Configures a four-column feature grid.
      Returns:
      this FeatureGridLayout for method chaining

    • singleColumn

      public FeatureGridLayout singleColumn()
      Configures a single-column feature list.
      Returns:
      this FeatureGridLayout for method chaining

    • compactSpacing

      public FeatureGridLayout compactSpacing()
      Applies compact spacing (smaller gaps between elements).
      Returns:
      this FeatureGridLayout for method chaining

    • spaciousSpacing

      public FeatureGridLayout spaciousSpacing()
      Applies spacious spacing (larger gaps between elements).
      Returns:
      this FeatureGridLayout for method chaining

    • narrowContent

      public FeatureGridLayout narrowContent()
      Applies a narrow content width (960px) - suitable for focused feature displays.
      Returns:
      this FeatureGridLayout for method chaining

    • normalContent

      public FeatureGridLayout normalContent()
      Applies a normal content width (1200px).
      Returns:
      this FeatureGridLayout for method chaining

    • wideContent

      public FeatureGridLayout wideContent()
      Applies a wide content width (1440px) - suitable for many features.
      Returns:
      this FeatureGridLayout for method chaining

    • fullWidth

      public FeatureGridLayout fullWidth()
      Applies full width content (no max width constraint).
      Returns:
      this FeatureGridLayout for method chaining