feat: add typography component

src/_includes/components/typography/README.md

@@ -0,0 +1,3 @@
+# Typography
+
+TODO.

src/_includes/components/typography/typography.config.js

@@ -0,0 +1,52 @@
+module.exports = {
+    title: "Typography",
+    context: {
+        level: "p",
+        text: "It is the responsibility of inclusive designers to be aware of the context and broader impact of any design and strive to effect a beneficial impact beyond the intended beneficiary of the design."
+    },
+    variants: [
+        {
+            title: "Header Level 1",
+            context: {
+                level: "h1",
+                text: "We Count"
+            }
+        },
+        {
+            title: "Header Level 2",
+            context: {
+                level: "h2",
+                text: "Challenges"
+            }
+        },
+        {
+            title: "Header Level 3",
+            context: {
+                level: "h3",
+                text: "Research Team"
+            }
+        },
+        {
+            title: "Header Level 4",
+            context: {
+                level: "h4",
+                text: "Participation"
+            }
+        },
+        {
+            title: "Subhead",
+            context: {
+                level: "p",
+                levelClass: "subhead",
+                text: "Explore We Count project activities"
+            }
+        },
+        {
+            title: "Paragraph",
+            context: {
+                level: "p",
+                text: "We Count is a community-driven project to address the inherent bias against small minorities and outliers in artificial intelligence and data analytics. Disability often places you at the margins of a data set. More and more critical decisions are made and automated using data. Current artificial intelligence can automate and amplify existing discrimination."
+            }
+        }
+    ]
+};

src/_includes/components/typography/typography.njk

@@ -0,0 +1,3 @@
+<div class="prose {{ params.variantClass }}">
+    <{{ params.level }}{% if params.levelClass %} class="{{ params.levelClass }}"{% endif %}>{{ params.text }}</{{ params.level }}>
+</div>