Rich text.

src/stories/Library/rich-text/RichText.stories.tsx

@@ -0,0 +1,20 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import { RichText } from "./RichText";
+
+export default {
+  title: "Library / Rich Text",
+  component: RichText,
+  decorators: [withDesign],
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7880-59101&mode=design&t=dMcJmvsouH6erxzA-4",
+    },
+    layout: "centered",
+  },
+} as ComponentMeta<typeof RichText>;
+
+const Template: ComponentStory<typeof RichText> = () => <RichText />;
+
+export const Default = Template.bind({});

src/stories/Library/rich-text/RichText.tsx

@@ -0,0 +1,44 @@
+export interface RichTextProps {
+  text: string;
+}
+
+export const RichText = () => {
+  return (
+    <div className="rich-text">
+      <h2>Tad survive ensnare joy mistake courtesy Bagshot Row.</h2>
+      <p>
+        Ligulas step drops both? You shall not pass! Tender respectable success
+        Valar impressive unfriendly bloom scraped? Branch hey-diddle-diddle pony
+        troublell sleeping during jump Narsil.
+      </p>
+      <h3>North valor overflowing sort Iáve mister kingly money?</h3>
+      <p>
+        Curse you and all the halflings! Deserted anytime Lake-town burned caves
+        balls. Smoked lthilien forbids Thrain?
+      </p>
+      <ul>
+        <li>Adamant.</li>
+        <li>Southfarthing!</li>
+        <li>Witch-king.</li>
+        <li>Precious.</li>
+        <li>Gaffers!</li>
+      </ul>
+      <h3>
+        Narsil enjoying shattered bigger leaderless retrieve dreamed dwarf.
+      </h3>
+      <p>
+        Ravens wonder wanted runs me crawl gaining lots faster! Khazad-dum
+        surprise baby season ranks. I bid you all a very fond farewell.
+      </p>
+      <ol>
+        <li>Narsil.</li>
+        <li>Elros.</li>
+        <li>Arwen Evenstar.</li>
+        <li>Maggots?</li>
+        <li>Bagginses?</li>
+      </ol>
+    </div>
+  );
+};
+
+export default RichText;

src/stories/Library/rich-text/rich-text.scss

@@ -0,0 +1,29 @@
+.rich-text {
+  @include typography($typo__body-placeholder);
+
+  ul > li {
+    $_dash-width: 21px;
+    $_dash-width--wide: 33px;
+    $_padding: $s-sm;
+
+    position: relative;
+    padding-left: $_dash-width + $_padding;
+
+    &::before {
+      content: "";
+      position: absolute;
+      width: $_dash-width;
+      height: 1px;
+      left: 0;
+      background-color: black;
+    }
+  }
+
+  h2 {
+    @include typography($typo__h3);
+  }
+
+  h3 {
+    @include typography($typo__h4);
+  }
+}