diff --git a/components/Caption/Caption.js b/components/Caption/Caption.js index 2b66ce9..ce0ed0f 100644 --- a/components/Caption/Caption.js +++ b/components/Caption/Caption.js @@ -1,13 +1,23 @@ import styles from './Caption.module.css'; +import classNames from 'classnames'; + /** * A reusable component for captions. + * + * @param {boolean} center - Whether the text should be centered or not. + * + * @example + *
{caption}
++ {caption} +
); } diff --git a/components/Caption/Caption.module.css b/components/Caption/Caption.module.css index 4bb9a54..73a54a0 100644 --- a/components/Caption/Caption.module.css +++ b/components/Caption/Caption.module.css @@ -3,3 +3,8 @@ margin: .5rem 0; line-height: 1.75; } + +.center { + text-align: center; + margin: .5rem auto; +} diff --git a/components/Title/Title.js b/components/Title/Title.js index 1a315e3..b50d810 100644 --- a/components/Title/Title.js +++ b/components/Title/Title.js @@ -1,11 +1,12 @@ import { createElement } from 'react'; +import classNames from 'classnames'; import styles from './Title.module.css'; /** * A reusable component for titles. * * @param {string} element - The element to render the title as (e.g. h1, h2, p, div). Defauts to h2. - * @param {string} style - Custom styles to apply to the title. + * @param {bool} center - Whether the text should be centered or not. * * @example *