|
| 1 | +--- |
| 2 | +'@primer/react-brand': minor |
| 3 | +--- |
| 4 | + |
| 5 | +New pricing cards component now generally available |
| 6 | + |
| 7 | +```jsx |
| 8 | +<PricingCards> |
| 9 | + <PricingCards.Item> |
| 10 | + <PricingCards.Label>Recommended</PricingCards.Label> |
| 11 | + <PricingCards.Heading>Copilot</PricingCards.Heading> |
| 12 | + <PricingCards.Description>Copilot in the coding environment.</PricingCards.Description> |
| 13 | + <PricingCards.Price currencySymbol="$" trailingText="per month / $100 per year"> |
| 14 | + 10 |
| 15 | + </PricingCards.Price> |
| 16 | + <PricingCards.FeatureList> |
| 17 | + <PricingCards.FeatureListItem>Everything in Copilot Business plus:</PricingCards.FeatureListItem> |
| 18 | + <PricingCards.FeatureListItem>Chat in IDE and Mobile</PricingCards.FeatureListItem> |
| 19 | + <PricingCards.FeatureListItem>CLI assistance</PricingCards.FeatureListItem> |
| 20 | + <PricingCards.FeatureListItem>Code completions</PricingCards.FeatureListItem> |
| 21 | + </PricingCards.FeatureList> |
| 22 | + <PricingCards.PrimaryAction href="/buy">Buy now</PricingCards.PrimaryAction> |
| 23 | + <PricingCards.SecondaryAction href="/contact">Contact sales</PricingCards.SecondaryAction> |
| 24 | + </PricingCards.Item> |
| 25 | + <PricingCards.Item> |
| 26 | + <PricingCards.Label>Recommended</PricingCards.Label> |
| 27 | + <PricingCards.Heading>Copilot Business</PricingCards.Heading> |
| 28 | + <PricingCards.Description> |
| 29 | + Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub |
| 30 | + Enterprise Cloud. |
| 31 | + </PricingCards.Description> |
| 32 | + <PricingCards.Price currencySymbol="$" trailingText="per user / month"> |
| 33 | + 39 |
| 34 | + </PricingCards.Price> |
| 35 | + <PricingCards.FeatureList> |
| 36 | + <PricingCards.FeatureListItem>Everything in Copilot Business plus:</PricingCards.FeatureListItem> |
| 37 | + <PricingCards.FeatureListItem>Chat in IDE and Mobile</PricingCards.FeatureListItem> |
| 38 | + <PricingCards.FeatureListItem>CLI assistance</PricingCards.FeatureListItem> |
| 39 | + <PricingCards.FeatureListItem>Code completions</PricingCards.FeatureListItem> |
| 40 | + </PricingCards.FeatureList> |
| 41 | + <PricingCards.PrimaryAction href="/waitlist">Join waitlist</PricingCards.PrimaryAction> |
| 42 | + </PricingCards.Item> |
| 43 | +</PricingCards> |
| 44 | +``` |
| 45 | + |
| 46 | +:link: [Read the documentation for more examples](https://primer.style/brand/components/PricingCards) |
0 commit comments