Default horizontal card Image alt text

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 text

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 text

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 text

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 text

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.