Component to create a card that displays some information. The card may be composed by divs with specially prepared classes title and/or content. You can also add your own content as you please.



Use the ons-card component to get a highlighted box in which you can insert any type of content you wish.

Special classes title and content allow you to have predefined styles’ separation.

Attributes are added directly to the element. You can do this in HTML or JS.

HTML: <ons-card someAttribute="true" anotherAttribute><ons-card>
JS: document.querySelector('ons-card').setAttribute('someAttribute', 'true')

Name Type Description
modifier String The appearance of the card. Optional.

Modifiers are set in the modifier attribute. To use more than one, separate them by spaces. For example:
<ons-card modifier="material modifier2"><ons-card>.

Name Description
material A card with material design.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.