Created cards.mdx (#1870)

* Created cards.mdx

New docs page for the Docs Theme on the Cards component

* fix

* prettier

* more

* more

* more

* more

---------

Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>

docs/pages/docs/guide/built-ins/cards.mdx

@@ -1,8 +1,19 @@
-import { CardsIcon, OneIcon, WarningIcon } from '@components/icons'
+import { CardsIcon, OneIcon, WarningIcon, BoxIcon } from '@components/icons'
 import { Cards, RemoteContent } from 'nextra/components'
 import { buildDynamicMDX } from 'nextra/remote'
 
+# Cards Component
+
+A built-in component that allows you to display content in a visually appealing card format. It
+includes options for adding an icon, title, link and an image to related content.
+
 export async function getStaticProps() {
+ const mdx2 = `<Cards.Card
+ icon={<BoxIcon />}
+ title="About Nextra"
+ href="/about"
+ arrow
+/>`
  const mdx = `
 <Cards>
  <Cards.Card
@@ -22,25 +33,44 @@ export async function getStaticProps() {
  />
 </Cards>`
  const props = await buildDynamicMDX(`
-# Cards Component
+## Grouped Cards
 
-## Example
-
-A built-in component to embed a link in a card with an icon.
+### Example
 
 ${mdx}
 
-## Usage
+### Usage
+
+Import the \`<Cards>\` component to your page, which includes the \`<Card>\` component.
 
-First, import the \`Card\` and \`Cards\` components. Then, import the icons that you
-want to use. To create a set of cards, follow the example below.
+Then, _optionally_ import the icons that you want to use. To create a set of cards, follow the
+example below where the \`<Cards.Card>\` component is used to create a card and the \`<Cards>\`
+component is used to group multiple cards together.
 
 ~~~mdx filename="MDX"
 import { Cards } from 'nextra/components'
 import { CardsIcon, OneIcon, WarningIcon } from '../path/with/your/icons'
 ${mdx}
+~~~
+
+## Single Card
+
+A \`<Card>\` not wrapped in a \`<Cards>\` component will not be grouped with other cards. This can
+be useful if you want to display a single card in a different format than the other cards on the
+page.
+
+### Example
+
+<br/>
+
+${mdx2}
+
+### Usage
+
+~~~mdx filename="MDX"
+${mdx2}
 ~~~`)
  return { props }
 }
 
-<RemoteContent components={{ Cards, CardsIcon, OneIcon, WarningIcon }} />
+<RemoteContent components={{ Cards, CardsIcon, OneIcon, WarningIcon, BoxIcon }} />