Section Headings

3 components in this section

Section Heading

Consistent section heading with multiple levels

<h2 class="dg-section-heading">Section Title</h2>
import { SectionHeading } from '@deepgram/styles/react';

<SectionHeading>Section Title</SectionHeading>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-section-heading>Section Title</dg-section-heading>

Section Heading with Context

Consistent section heading with multiple levels

<h2 class="dg-section-heading">
  Transcription Results
  <small>3 files processed</small>
</h2>
import { SectionHeading } from '@deepgram/styles/react';

<SectionHeading>
  Transcription Results
  <small>3 files processed</small>
</SectionHeading>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-section-heading>
  Transcription Results
  <small>3 files processed</small>
</dg-section-heading>

Item Title

Title for list items and small components

<h4 class="dg-item-title">Item Name</h4>
import { ItemTitle } from '@deepgram/styles/react';

<ItemTitle>Item Name</ItemTitle>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-item-title>Item Name</dg-item-title>

Prose

Body text component with responsive sizing

<p class="dg-prose">Body text content goes here.</p>
import { Prose } from '@deepgram/styles/react';

<Prose>Body text content goes here.</Prose>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-prose>Body text content goes here.</dg-prose>