Corner Ribbon Card
A card with a diagonal ribbon pinned to one corner for a short label. Use it to flag New, Sale, or Featured items in a product or listing grid.
A card with a diagonal ribbon pinned to one corner for a short label. Use it to flag New, Sale, or Featured items in a product or listing grid.
Search blocks by description or jump to a page.
Corner Ribbon Card is a standard card with a diagonal banner pinned to its top right corner. The ribbon carries a short label ("New Feature" in the demo) and sits inside a clipping container so it never bleeds outside the card boundary. Below it, the card has a header with a title and a one line description, a content area for a short paragraph, and a footer row with two buttons on opposite ends.
Every section is independent. You can update the ribbon label, rewrite the header copy, swap out the body paragraph, or relabel the footer buttons without affecting the others. The ribbon itself can be removed entirely if you only need it on a subset of cards in a grid.
This card fits any grid where individual items need a short status flag without a separate badge component floating above the layout. In a healthcare scheduling product it works well for a services list where one option is newly available, a recent addition to a care plan, or a promoted appointment slot. It is a better fit than a separate badge overlay because the ribbon is clipped inside the card frame and never disrupts the grid alignment around it.
A natural flow around it on a Components page:
Before
After
The ribbon label is the main decision. A few directions that work well:
Tip: keep the ribbon label to one or two words so the rotated text stays fully readable at the small size the corner allows.