Ping Pong¶
Placeable in Canvas
Image on one side, text on the other, alternating down the page and stacking on mobile.
Usage
Loading…Props¶
| Prop | Required | Type | Description | Example |
|---|---|---|---|---|
title |
Optional | string | Title | Our Services |
body |
Optional | string | The main text. | <p>We provide outstanding solutions for your business needs.</p> |
image_object |
Optional | object | The image to show. | |
video_url |
Optional | string | A YouTube or Vimeo link, or a link to a video file. | |
poster_image |
Optional | object or string | Image shown before the video plays. | |
mobile_image |
Optional | object or string | Optional image shown on phones instead of the video. | |
link_url |
Optional | string | Link URL | /services |
link_text |
Optional | string | Link text | Learn More |
color_scheme |
Optional | enum | Dark puts this on a dark background with light text. Defaults to light. |
light, dark |
reversed |
Optional | boolean | Swap the sides. Alternate on back-to-back Ping Pongs, up to 4 in a row. | false |
media_in_modal |
Optional | boolean | Open the image or video in a pop-up when clicked. | false |
Slots¶
| Slot | Description |
|---|---|
links |
Buttons or links shown below the text. See the Links tab. |
Built on the shared Video Facade partial.
image_object 4:3 on phones (--ping-pong-media-mobile-ratio), the column's height on desktop · poster_image match video
Add alt text on image_object unless it's decorative. → Full accessibility guidelines
The links slot takes Button or Link components from Bootstrap Components — as many as the section needs, laid out in a wrapping row.
Anything in the slot replaces the single link entirely: link_url and link_text are only used while the slot is empty.
Tokens used by this component
| Token | Default |
|---|---|
--ping-pong-bg |
transparent |
--ping-pong-border-color |
var(--theme-color-border, var(--bs-border-color, #dee2e6)) |
--ping-pong-border-width |
0 |
--ping-pong-column-min-height |
280px |
--ping-pong-column-min-height-desktop |
460px |
--ping-pong-content-padding |
clamp(1.75rem, 3.4vw, 4rem) |
--ping-pong-measure |
var(--theme-measure, 44rem) |
--ping-pong-media-mobile-ratio |
4 / 3 |
--ping-pong-placeholder-min-height |
240px |
--ping-pong-radius |
0 |
--ping-pong-shadow |
none |