# Pricing
> A row of plan cards with a price, a feature list and a button, where one card can be marked as featured.
Show your plans side by side with the pricing component. Each card has a title, a price, a feature list and a button. Mark one card as featured to raise it above the others.
Source: https://docs.tabler.io/ui/components/pricing
---
## Default markup
Put the plans in a `.pricing` container, one `.pricing-card` per plan. Each card holds a `.pricing-title`, a `.pricing-price`, a `.pricing-features` list and a `.pricing-btn`. On small screens the cards stack. From the `md` breakpoint up they sit in a row and share their borders, so the group reads as one table.
Add `.featured` to the main plan. The card gets a primary border and a shadow, and on wide screens it is a bit taller than its neighbors, so it stands out. On small screens it moves to the top of the stack. A `.pricing-label` with a [badge](/ui/components/badge) sits on the top edge of the card.
```html
```
## Price
The `.pricing-price` row holds the amount. Put the currency sign in a `.pricing-price-currency` in front of it, and the billing period in a `.pricing-price-description` after it. The description is smaller and uses the secondary text color, so the amount stays the strongest part of the card.
```html
$49
per user
per month
```
## Features
`.pricing-features` is a plain list with no bullets, aligned to the start of the card. Put an icon in front of each item to show what the plan includes. Use a margin utility such as `.my-4` to space the list from the price and the button.
```html
Up to 10 users
All components
Dedicated support
```
## Accessibility
- Use a heading for `.pricing-title`, with the level that fits the page, so users of a screen reader can jump between plans.
- Say in the button text or in an `aria-label` which plan the button belongs to when several buttons share the same text.
- Do not rely on the border color alone to mark the featured plan. The `.pricing-label` badge names it in text.