src/component/card/index.css

@@ -0,0 +1,3 @@
+.card-height > div {
+  flex-direction: row !important;
+}

src/component/card/index.tsx

@@ -0,0 +1,115 @@
+import * as React from "react";
+import "./index.css";
+import {
+  makeStyles,
+  Button,
+  Caption1,
+  Body1,
+  Subtitle1,
+} from "@fluentui/react-components";
+import {
+  MoreHorizontal20Regular,
+  Open16Regular,
+  Share16Regular,
+} from "@fluentui/react-icons";
+import {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardPreview,
+  CardProps,
+} from "@fluentui/react-components";
+
+const resolveAsset = (asset: string) => {
+  const ASSET_URL =
+    "https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/stories/src/assets/";
+
+  return `${ASSET_URL}${asset}`;
+};
+
+const useStyles = makeStyles({
+  main: {
+    display: "flex",
+    flexWrap: "wrap",
+    flexDirection: "column",
+    columnGap: "16px",
+    rowGap: "36px",
+  },
+
+  title: { margin: "0 0 12px" },
+
+  description: { margin: "0 0 12px" },
+
+  card: {
+    width: "400px",
+    maxWidth: "100%",
+    height: "fit-content",
+  },
+
+  text: { margin: "0" },
+});
+
+
+const CardExample = (props: CardProps) => {
+  const styles = useStyles();
+
+  return (
+    <Card className={styles.card} {...props}>
+      <CardPreview>
+        <img
+          src={resolveAsset("sales_template.png")}
+          alt="Sales Presentation Preview"
+        />
+      </CardPreview>
+
+      <CardHeader
+        image={
+          <img
+            src={resolveAsset("pptx.png")}
+            width="32px"
+            height="32px"
+            alt="Microsoft PowerPoint logo"
+          />
+        }
+        header={
+          <Body1>
+            <b>App Name</b>
+          </Body1>
+        }
+        description={<Caption1>Developer</Caption1>}
+        action={
+          <Button
+            appearance="transparent"
+            icon={<MoreHorizontal20Regular />}
+            aria-label="More options"
+          />
+        }
+      />
+
+      <p className={styles.text}>
+        Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw.
+        Marshmallow pastry jujubes toffee sugar plum.
+      </p>
+    </Card>
+  );
+};
+
+export const FocusMode = () => {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.main}>
+      <section>
+        <CardExample />
+      </section>
+
+      <section>
+        <CardExample focusMode="no-tab" />
+      </section>
+
+      <section>
+        <CardExample focusMode="tab-exit" />
+      </section>
+    </div>
+  );
+};

src/pages/home/index.tsx

@@ -1,10 +1,24 @@
-import React, { Component } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
+import {FocusMode as Card} from '../../component/card';
 
 function MyNavlink() {
     const { t } = useTranslation();
     return (
-        <div>{t('menu.home')}</div>
+        <div className="layout-main">
+            <div className="layout-row">
+                <div className="layout-col-12 card-height">
+                    <Card></Card>
+                </div>
+            </div>
+            <div className="layout-row">
+                <div className="layout-col-4 tree-height"></div>
+                <div className="layout-col-8 list-height"></div>
+            </div>
+            <div className="layout-row">
+                <div className="layout-col-12 form-height"></div>
+            </div>
+        </div>
     );
 }