feat: themed card component

packages/tester/docs/test/extra.mdx

@@ -1,4 +1,4 @@
-import { LinkCard, PackageManagerTabs, Tabs, Tab } from '@theme';
+import { Card, LinkCard, PackageManagerTabs, Tabs, Tab } from '@theme';
 
 # Hello World!
 
@@ -123,3 +123,18 @@ This loader uses `flow-remove-types` under the hood. You can learn more about it
   title="Programmatic API"
   description="I want to use the core functionalities but adjust the presentation of the license report, or process the data in a different way."
 />
+
+## Cards
+
+<Card
+  title="React Native"
+  content="I'm using React Native, either bare (RN CLI) or with Expo and want to display a licenses screen in my app."
+/>
+<Card
+  title="Node.js CLI"
+  content="I'm building a Node.js app or a non-React-Native project and want to generate license reports for my dependencies."
+/>
+<Card
+  title="Programmatic API"
+  content="I want to use the core functionalities but adjust the presentation of the license report, or process the data in a different way."
+/>

packages/theme/src/plugin/theme.ts

@@ -1,6 +1,7 @@
 import {
   Announcement,
   Button,
+  Card,
   HomeBanner,
   HomeFeature,
   HomeFooter,
@@ -46,6 +47,7 @@ export {
   // components
   Announcement,
   Button,
+  Card,
   HomeBanner,
   HomeFeature,
   HomeFooter,

packages/theme/src/theme/components/card/index.module.scss

@@ -0,0 +1,34 @@
+.card {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  color: var(--rp-c-text-1);
+  border: 1px dashed var(--rp-c-divider);
+  border-radius: var(--rp-radius-small);
+  margin: 1rem 0;
+  padding: 32px;
+}
+
+.cardContentContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.cardTitle {
+  font-family: var(--ck-header-font-family);
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.cardContent {
+  font-family: var(--rp-font-family);
+  color: var(--rp-c-text-2);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: -0.32px;
+  text-align: left;
+  margin-bottom: 0;
+}

packages/theme/src/theme/components/card/index.tsx

@@ -0,0 +1,30 @@
+import type * as React from 'react';
+import styles from './index.module.scss';
+
+interface CardProps {
+  /**
+   * The title of the card.
+   */
+  title: React.ReactNode;
+  /**
+   * The content to display inside the card.
+   */
+  content?: React.ReactNode;
+  /**
+   * The style of the card.
+   */
+  style?: React.CSSProperties;
+}
+
+export function Card(props: CardProps) {
+  const { title, content, style } = props;
+
+  return (
+    <div className={styles.card} style={style}>
+      <div className={styles.cardContentContainer}>
+        <span className={styles.cardTitle}>{title}</span>
+        {content && <span className={styles.cardContent}>{content}</span>}
+      </div>
+    </div>
+  );
+}

packages/theme/src/theme/components/index.ts

@@ -1,5 +1,6 @@
 export { Announcement } from './announcement';
 export { Button } from './button';
+export { Card } from './card';
 export { HomeBanner } from './home-banner';
 export { HomeFeature } from './home-feature';
 export { HomeFooter } from './home-footer';