Section header block

Section header block

The section header block helps organize content by displaying a header, description, and optional button. It makes the content easy to scan, contributing to a clear structure that users can understand

Contents:

    • Block customization options
    • Block examples:
      • 3 variations without a button
        • 2 Column layout
        • Left Aligned layout
        • Side-by-Side layout
      • 1 variation with button
        • Center Aligned layout

Block customization options: 

ELEMENT REQUIRED OPTIONS AVAILABLE
Layout variation Y

Drop Down

  • 2-Column
  • Left Aligned
  • Center Aligned
  • Side-by-Side
  • Piped
Background color N
  • Light blue
  • None 
Title N
  • Heading Text (Text Box)
  • Heading Element (Drop Down)
    • H2
    • H3
    • H4
    • H5
Header N
  • Heading Text (Text Box)
  • Heading Element (Drop Down)
    • H2
    • H3
    • H4
    • H5
Description N Text Box
Display button N Checkbox
Button size N
  • Default size
  • Small Size
Button style N
  • Primary button
  • Secondary button
  • Tetriary button
  • Ghost button
Button url N Checkbox
Button URL Y
  • Page
  • Categories
  • Media
  • E-mail
  • Phone number
  • External link
  • Remaining URL
  • External link
Display button icon N Checkbox

Layout variations containing a button

Title - Heading Text

Header - Heading Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consequat interdum varius sit amet mattis. Lorem ipsum dolor sit amet consectetur. Ornare aenean euismod elementum nisi. Enim sed faucibus turpis in.

BUTTON

Block above has these settings:

Layout variation 2-Column selected
Background color Not selected
Title - Heading Text Added
Title - Heading Element H2 - Type added
Header - Heading Text Added
Header - Heading Element H2 - Type added
Description Added
Display button Checked
Button size Default size
Button style Secondary button

Title - Heading Text

Header - Heading Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet blandit dignissim. Fusce rutrum est sit amet eleifend mollis. Suspendisse maximus at velit nec volutpat. Cras dictum, enim nec euismod malesuada, diam nibh accumsan nunc, in accumsan neque est nec elit. Maecenas iaculis ipsum a dapibus interdum.

BUTTON

Block above has these settings:

Layout variation Left Aligned selected
Background color Light blue
Title - Heading Text Added
Title - Heading Element H3 - Type added
Header - Heading Text Added
Header - Heading Element H4 - Type added
Description Added
Display button Checked
Button size Default size
Button style Default button



Title - Heading Text

Header - Heading Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet blandit dignissim. Fusce rutrum est sit amet eleifend mollis. Suspendisse maximus at velit nec volutpat. Cras dictum, enim nec euismod malesuada, diam nibh accumsan nunc, in accumsan neque est nec elit. Maecenas iaculis ipsum a dapibus interdum.

Button

Block above has these settings:

Layout variation Side-by-Side selected
Background color Not selected
Title - Heading Text Added
Title - Heading Element H2 - Type added
Header - Heading Text Added
Header - Heading Element H2 - Type added
Description Added
Display button Checked
Button size Default size
Button style Default button

Centered layout variation

Title - Heading Text

Header - Heading Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet blandit dignissim. Fusce rutrum est sit amet eleifend mollis. Suspendisse maximus at velit nec volutpat.

Button (Opens in a new window)

Block above has these settings:

Layout variation Center Aligned selected
Background color Light Blue
Title - Heading Text Added
Title - Heading Element H4 - Type added
Header - Heading Text Added
Header - Heading Element H5 - Type added
Description Added
Display button Checked