Skip to main content

Decorative Section

Introduction​

A section component with a selection of decorations.

This component only works on browsers that support :has() pseudo-class. This covers all modern browsers, but is not supported in Firefox 120 or earlier, including the current ESR version as of 2024/03/06

A block-end decorative sections must be followed by another .rpf-decorative-section with a different background as the cutout is actually applied to the following .rpf-decorative-section for rendering reasons.

A block-start decorative section should be preceded by another .rpf-decorative-section with a different background because decorations add the required padding to preceding element to ensure content is not cut off.

Block-end decorations will override the block-start decoration of the next sibling if both are set.

This component does not apply any padding or margin, other than the additional padding and negative margin needed for the decoration. As a result, you should not modify the padding or margin of this component and instead wrap your content in another element.

No padding variant is to be used for wrapping images that are designed to be full bleed.

Live demo​

Implementation:​