{"componentChunkName":"component---src-templates-post-js","path":"/create-typography-components-react","result":{"data":{"markdownRemark":{"html":"

In this post we will create a couple of typography components that we will use throughout the App for all of our Typography.

\n

First create a folder in the components directory called typography. And create a file called HeadingOne.js and add the following:

\n
import React from \"react\"\nimport PropTypes from \"prop-types\"\nconst HeadingOne = ({ className, children }) => {\n  return (\n    <h1 className={`${className} text-4xl text-black text-bold font-display`}>\n      {children}\n    </h1>\n  )\n}\n\nHeadingOne.propTypes = {\n  className: PropTypes.string,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n}\n\nHeadingOne.defaultProps = {\n  className: \"\",\n}\nexport default HeadingOne
\n

🛩️ We are creating a H1 component that will allow us to add additional content inside it via the children prop.

\n

🛩️ Then we've given it some styles.

\n

Then next up create a HeadingTwo.js file with the following:

\n
import React from \"react\"\nimport PropTypes from \"prop-types\"\nconst HeadingTwo = ({ className, children }) => {\n  return (\n    <h1 className={`${className} text-xl text-black text-bold font-display`}>\n      {children}\n    </h1>\n  )\n}\n\nHeadingTwo.propTypes = {\n  className: PropTypes.string,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n}\n\nHeadingTwo.defaultProps = {\n  className: \"\",\n}\nexport default HeadingTwo
\n

Then create a HeadingThree.js component with the following:

\n
import React from \"react\"\nimport PropTypes from \"prop-types\"\nconst HeadingThree = ({ className, children }) => {\n  return (\n    <h1 className={`${className} text-2xl text-black text-bold font-display`}>\n      {children}\n    </h1>\n  )\n}\n\nHeadingThree.propTypes = {\n  className: PropTypes.string,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n}\n\nHeadingThree.defaultProps = {\n  className: \"\",\n}\nexport default HeadingThree
\n

Next up create a BodyOne.js file and add the following:

\n
import React from \"react\"\nimport PropTypes from \"prop-types\"\nconst BodyOne = ({ className, children }) => {\n  return (\n    <p className={`${className} text-sm text-black text-bold font-display`}>\n      {children}\n    </p>\n  )\n}\n\nBodyOne.propTypes = {\n  className: PropTypes.string,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n}\n\nBodyOne.defaultProps = {\n  className: \"\",\n}\nexport default BodyOne
\n

Last lets create an index.js file so we can import the components in one line through out the app:

\n
import HeadingOne from \"./HeadingOne\"\nimport BodyOne from \"./BodyOne\"\nimport HeadingTwo from \"./HeadingTwo\"\nimport HeadingThree from \"./HeadingThree\"\n\nexport { HeadingOne, BodyOne, HeadingTwo, HeadingThree }
","frontmatter":{"date":"July 16, 2020","path":"/create-typography-components-react","title":"Create Typography Components","postnumber":37}}},"pageContext":{"previous":{"node":{"frontmatter":{"path":"/create-red-block-button-react","postnumber":38}}},"next":{"node":{"frontmatter":{"path":"/create-nav-and-header-react","postnumber":36}}}}},"staticQueryHashes":["3207677222","3649515864","63159454"]}