Class CenteredContentLayout


public class CenteredContentLayout extends StyledElement<CenteredContentLayout>
A narrow centered content column optimized for reading and long-form content.

CenteredContentLayout creates a horizontally centered column with a comfortable reading width. It's commonly used for article pages, blog posts, documentation, and any long-form text content.

Width Presets:

Use Cases:

  • Blog posts and articles
  • Documentation pages
  • Terms of service, privacy policy
  • Reading-focused content
  • Email-style layouts

Usage:


 // Default prose width
 CenteredContentLayout article = new CenteredContentLayout();
 article.addElement(articleTitle);
 article.addElement(articleBody);

 // Narrow width for focused reading
 CenteredContentLayout narrow = new CenteredContentLayout(CenteredContentLayout.Width.NARROW);
 narrow.addElement(content);

 // With padding
 CenteredContentLayout blog = new CenteredContentLayout();
 blog.setPadding("2rem");
 blog.addElement(blogPost);
 
Since:
2025
Version:
1.0
Author:
Marvin P. Warble Jr.
See Also:
  • Constructor Details

    • CenteredContentLayout

      public CenteredContentLayout()
      Constructs a CenteredContentLayout with the default PROSE width.
    • CenteredContentLayout

      public CenteredContentLayout(CenteredContentLayout.Width width)
      Constructs a CenteredContentLayout with the specified width preset.
      Parameters:
      width - the width preset
    • CenteredContentLayout

      public CenteredContentLayout(String maxWidth)
      Constructs a CenteredContentLayout with a custom maximum width.
      Parameters:
      maxWidth - the maximum width (e.g., "800px", "60rem", "70ch")
  • Method Details

    • setWidth

      Sets the content width using a preset.
      Parameters:
      width - the width preset
      Returns:
      this CenteredContentLayout for method chaining
    • setPaddingX

      public CenteredContentLayout setPaddingX(String padding)
      Sets horizontal padding (left and right).

      This adds gutters to prevent content from touching screen edges on mobile devices.

      Parameters:
      padding - the padding value (e.g., "1rem", "16px")
      Returns:
      this CenteredContentLayout for method chaining
    • setPaddingX

      public CenteredContentLayout setPaddingX(int padding)
      Sets horizontal padding (left and right) in pixels.
      Parameters:
      padding - the padding in pixels
      Returns:
      this CenteredContentLayout for method chaining
    • setPaddingY

      public CenteredContentLayout setPaddingY(String padding)
      Sets vertical padding (top and bottom).
      Parameters:
      padding - the padding value (e.g., "2rem", "32px")
      Returns:
      this CenteredContentLayout for method chaining
    • setPaddingY

      public CenteredContentLayout setPaddingY(int padding)
      Sets vertical padding (top and bottom) in pixels.
      Parameters:
      padding - the padding in pixels
      Returns:
      this CenteredContentLayout for method chaining
    • withGutters

      public CenteredContentLayout withGutters()
      Adds standard responsive gutters for mobile-friendly display.

      Applies padding of 1rem on the sides to ensure content doesn't touch screen edges on mobile devices.

      Returns:
      this CenteredContentLayout for method chaining
    • setLineHeight

      public CenteredContentLayout setLineHeight(String lineHeight)
      Sets line height for improved readability.
      Overrides:
      setLineHeight in class StyledElement<CenteredContentLayout>
      Parameters:
      lineHeight - the line height value (e.g., "1.6", "1.75")
      Returns:
      this CenteredContentLayout for method chaining
    • withReadableTypography

      public CenteredContentLayout withReadableTypography()
      Applies optimal reading typography (line-height 1.6, readable font size).
      Returns:
      this CenteredContentLayout for method chaining