accent-card

You can use the accent-card as a callout. Here’s how:

Code

<div data-custom-element="accent-card" accent-color="light-blue" image-src="https://webcomponents.psu.edu/styleguide/elements/accent-card/demo/images/image6.jpg" style="max-width:600px;">
<span slot="content">This is the body of the card.</span>
</div>

Code

<div data-custom-element="accent-card" accent-color="red" horizontal image-src="https://webcomponents.psu.edu/styleguide/elements/accent-card/demo/images/image5.jpg" style="max-width:600px;">
<span slot="heading">Card Heading</span>
<span slot="subheading">Card Subheading</span>
<span slot="content">This is the body of the card.</span>
<span slot="footer">This is the the card footer.</span>
</div>

Learn more about how to customize it at https://webcomponents.psu.edu.