<h1 class="gi-heading-xl">This is an h1</p>
<h2 class="gi-heading-lg">This is an h2</p>
<h3 class="gi-heading-md">This is an h3</p>
<h4 class="gi-heading-sm">This is an h4</p>
<h5 class="gi-heading-xs">This is an h5</p>
<h6 class="gi-heading-2xs">This is an h6</p>

{{ govieHeading({ "as": "h1", "text": "This is an h1" }) }}
{{ govieHeading({ "as": "h2", "text": "This is an h2" }) }}
{{ govieHeading({ "as": "h3", "text": "This is an h3" }) }}
{{ govieHeading({ "as": "h4", "text": "This is an h4" }) }}
{{ govieHeading({ "as": "h5", "text": "This is an h5" }) }}
{{ govieHeading({ "as": "h6", "text": "This is an h6" }) }}

import { Paragraph } from '@govie-ds/react';

<Heading as='h1'>This is an h1</Heading>
<Heading as='h2'>This is an h2</Heading>
<Heading as='h3'>This is an h3</Heading>
<Heading as='h4'>This is an h4</Heading>
<Heading as='h5'>This is an h5</Heading>
<Heading as='h6'>This is an h6</Heading>

<span className="gi-text-gray-500">This is a caption</span>
<h1 class="gi-heading-xl">This is a heading</p>

{{ 
  govieHeading({
    "content": "This is a heading", 
    "caption": "This is a caption"
  }) 
}}

import { Paragraph } from '@govie-ds/react';

<Heading as='h1' caption="This is a caption">This is a heading</Heading>