30/70 Panel Block

Overview

This layout provides a visually appealing balance between the main and secondary content, ensuring that neither overwhelms the other. It’s a common choice in web design for establishing a clear content hierarchy.

The 30% section is ideal for action items such as headlines and primary buttons, ensuring they are easily accessible to users.

The larger 70% section can be used to display a brief introduction to the article content, which links to the detailed article page.

This 30/70 layout is responsive, adjusting seamlessly to different screen sizes to ensure a consistent user experience across devices.

Block customization options
Block examples:
- 30/70 block without background color
- 30/70 block with light blue background color
- 30/70 block containing 1 rich text block
- 30/70 block containing 3 rich text blocks
- 30/70 block with light blue background color containing 2 rich text blocks
- 30/70 block containing 1 borderless card block
- 30/70 block with light blue background color containing borderless card block with an illustrative icon

Block Customization Options

Element	Required	Options Available
Background color	N	None Light blue
Main Content (30%)	Y	Text Editor
Content Area (70%)	N	Rich Text Block Borderless Card Block

30/70 Block without Background Color

Heading

Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Block above has these settings:

Element	Option Selected
Background color	Not selected
Main Content 30%	Rich text area
Content Area 70%	Borderless Card block

30/70 Block with Light Blue Background Color

Lorem ipsum dolor sit amet

Consectetur adipiscing elit. Proin consectetur ornare consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam mi odio, faucibus a nunc at, tristique sollicitudin arcu. Nam lectus velit, gravida nec tempor non, vestibulum ac ex. Duis hendrerit est quis rutrum pulvinar. Sed neque neque, congue ut suscipit nec, volutpat sed nulla. Etiam vitae dui urna. In quis metus sollicitudin

Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Block above has these settings:

Element	Option selected
Background color	Light Blue
Main Content 30%	Rich text area
Content Area 70%	Borderless Card block

30/70 Block with 1 Rich Text Block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ornare consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ornare consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam mi odio, faucibus a nunc at, tristique sollicitudin arcu. Nam lectus velit, gravida nec tempor non, vestibulum ac ex. Duis hendrerit est quis rutrum pulvinar. Sed neque neque, congue ut suscipit nec, volutpat sed nulla. Etiam vitae dui urna.

Block above has these settings:

Element	Option Selected
Background color	No
Main Content 30%	Yes
Content Area 70%	Yes
Right Text block	Yes (multiple)
Borderless Card block	No

30/70 Block with 3 Rich Text Blocks

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ornare consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Block above has these settings:

Element	Option Selected
Background color	No
Main Content 30%	Yes
Content Area 70%	Yes
Right Text block	Yes
Borderless Card block	No

30/70 Block with Light Blue Background with 2 Rich Text Blocks

Block above has these settings:

Element	Option Selected
Background color	Yes
Main Content 30%	Yes
Content Area 70%	Yes
Rich Text block	Yes (multiple)
Borderless Card block	No

30/70 Block with 1 Borderless Card Block

Block above has these settings:

Element	Option Selected
Background color	No
Main Content 30%	Yes
Content Area 70%	Yes
Rich Text block	No
Borderless Card block	Yes
Borderless Card Heading	H2
Borderless Card Heading Link	Selected

30/70 Block with Light Blue Background, Borderless Card Block and Illustrative Icon

Block above has these settings:

Element	Option Selected
Background color	No
Main Content 30%	Yes
Content Area 70%	Yes
Rich Text block	No
Borderless Card block	Yes
Borderless Card - Display Image or Icon	Yes (Illustrative Icon)
Borderless Card Heading Element	H4
Borderless Card Heading Link	No

30/70 Panel Block

Overview

Contents:

Block Customization Options

30/70 Block without Background Color

Heading

Heading

Heading

Heading

Heading

30/70 Block with Light Blue Background Color

Lorem ipsum dolor sit amet

Header

Header

Header

Header

30/70 Block with 1 Rich Text Block

30/70 Block with 3 Rich Text Blocks

30/70 Block with Light Blue Background with 2 Rich Text Blocks

30/70 Block with 1 Borderless Card Block

Title - Heading Text (Opens in a new window)

30/70 Block with Light Blue Background, Borderless Card Block and Illustrative Icon

Title - Heading Text