"})," tag by default."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`I'm a Heading `})}),` `,(0,n.jsx)(e.h3,{id:"changing-visual-size",children:"Changing visual size"}),` `,(0,n.jsxs)(e.p,{children:["To increase the visual size of the heading, use the ",(0,n.jsx)(e.code,{children:"size"}),` props. This property ensures that the heading size automatically adjusts for smaller screens.`]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` (4xl) In love with React & Next (3xl) In love with React & Next (2xl) In love with React & Next (xl) In love with React & Next (lg) In love with React & Next (md) In love with React & Next (sm) In love with React & Next (xs) In love with React & Next `})}),` `,(0,n.jsx)(e.h3,{id:"truncate-heading",children:"Truncate heading"}),` `,(0,n.jsxs)(e.p,{children:[`If you'd like to truncate the heading after a specific number of lines, pass the `,(0,n.jsx)(e.code,{children:"noOfLines"}),` prop. This will render an ellipsis when the heading exceeds the width of the viewport or `,(0,n.jsx)(e.code,{children:"maxWidth"})," prop."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Basic text writing, including headings, body text, lists, and more. `})}),` `,(0,n.jsx)(e.h3,{id:"override-style",children:"Override style"}),` `,(0,n.jsxs)(e.p,{children:["You can override the size of the Heading component by passing the ",(0,n.jsx)(e.code,{children:"fontSize"}),` prop. No need to write `,(0,n.jsx)(e.code,{children:"css"})," or ",(0,n.jsx)(e.code,{children:"styled()"}),"."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` I'm overriding this heading `})}),` `,(0,n.jsx)(e.h2,{id:"composition",children:"Composition"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Modern online and offline payments for Africa Paystack helps businesses in Africa get paid by anyone, anywhere in the world `})})]})}function w(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(l,i)})):l(i)}var v=w;return y(N);})(); ;return Component;

Heading