split surface
Introduces a layered surface for distinct content sections, smoothing the transition from one page section to another
Use the split surface container to introduce a new surface layer, creating strong visual impact that implies a smooth delineation in content.
When to use
- Introducing a section of content that is entirely distinct from preceding page content
When not to use
- Containing unrelated information within the split surface
- Previewing bite-sized information about an article or activity, such as a class or event. Instead, use a card
- Linking the container to a destination
- Displaying search results
Use the vertical split surface component when you need to create a separation between different content sections on a page. It’s effective for scenarios where you want to showcase an image alongside a heading, ensuring a clear and visually engaging transition between disparate content.
If your new section is transitioning from the base layer to a new flat or elevated layer:
Place your media content in the top section and text content in the bottom surface.
If your new section is transitioning from an elevated or flat layer to a lower elevation or base layer:
Place your content in the top section with your media content in the bottom section.
Development responsibilities
When using this component, here's what you are responsible for:
Use of the tag prop should semantically match the layout of your page. In general, the default tag value div will work for most use cases.
CdrSplitSurface
Props
| Name | Type | Default |
|---|---|---|
surface Sets the orientation of the surface to the top or bottom slot Possible values: top, bottom | union | 'bottom' |
tag Sets the HTML tag for the split-surface element | string | 'div' |
Slots
| Name |
|---|
top top slot |
bottom bottom slot |