Table mobile card

Applying the class .p-table--mobile-card will give any table a new responsive card view when on smaller screens. Each cell will require an [aria-label] to describe the cell on a mobile screen. We use the content to create a pseudo element and keep it line with the content.

The <thead> element is completely hidden from view on a smaller screen and if the table holds a .p-contextual-menu pattern all the children elements will be visible and be interactive.

View example of the patterns table mobile card