Default horizontal card Image alt. Image alt.

This is an eyebrow

This Is a Headline

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

 This is a button
The media container will crop the image and video is not supported.
Advanced usage: manually override horizontal media size To finely control the width of the card media based on your use case, set inline style of min-width to the card media. Please use your best judgment when doing this, because absolute units such as px, em, and rem will break responsive layouts. % is the recommended unit to use. media: { image: image, attributes: { style: "min-width: 25%", } } Image alt. Image alt.

This card's media is 80px wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

 This is a button
Image alt. Image alt.

This card's media is 150px wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

 This is a button
Image alt. Image alt.

This card's media is 25% wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

 This is a button
Image alt. Image alt.

This card's media is 50% wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

 This is a button
DIY horizontal card Utilize the custom body content to create a custom card that has horizontal content. A grid is used to create the content with an image on the side. body: { content: customContentWithGrid, } Design recommendations: 1) use a square image or video; 2) make the headline and/or the whole card clickable; 3) set spacing prop to small.
Visit the Pega website
Image alt

This card's media is 80px wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.
Visit the Pega website
Image alt

This card's media is 150px wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.
Visit the Pega website
Image alt

This card's media is 25% wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.
Visit the Pega website
Image alt

This card's media is 50% wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.