Page Headings

2 components in this section

Simple Page Heading

Simple page heading with title and optional description

HTML

React

Web Components

<div class="dg-page-heading">
  <h1 class="dg-page-heading__title">Dashboard</h1>
</div>

import { PageHeading, PageHeadingTitle } from '@deepgram/styles/react';

<PageHeading>
  <PageHeadingTitle>Dashboard</PageHeadingTitle>
</PageHeading>

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

<dg-page-heading>
  <h1 class="dg-page-heading__title">Dashboard</h1>
</dg-page-heading>

Page Heading with Description

Simple page heading with title and optional description

HTML

React

Web Components

<div class="dg-page-heading">
  <h1 class="dg-page-heading__title">Transcription</h1>
  <p class="dg-page-heading__description">Upload audio files or record live to get accurate transcriptions powered by Deepgram.</p>
</div>

import { PageHeading, PageHeadingDescription, PageHeadingTitle } from '@deepgram/styles/react';

<PageHeading>
  <PageHeadingTitle>Transcription</PageHeadingTitle>
  <PageHeadingDescription>Upload audio files or record live to get accurate transcriptions powered by Deepgram.</PageHeadingDescription>
</PageHeading>

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

<dg-page-heading>
  <h1 class="dg-page-heading__title">Transcription</h1>
  <p class="dg-page-heading__description">Upload audio files or record live to get accurate transcriptions powered by Deepgram.</p>
</dg-page-heading>

Simple Page Heading with Actions

Page heading with title and two action buttons

HTML

React

Web Components

<div class="dg-page-headings">
  <div class="dg-page-headings__title-wrapper">
    <h2 class="dg-page-headings__title">Back End Developer</h2>
  </div>
  <div class="dg-page-headings__actions">
    <div class="dg-action-group">
      <button type="button" class="dg-btn dg-btn--ghost dg-btn--sm">Edit</button>
      <button type="button" class="dg-btn dg-btn--primary dg-btn--sm">Publish</button>
    </div>
  </div>
</div>

import { ActionGroup, Btn, PageHeadings, PageHeadingsActions, PageHeadingsTitle, PageHeadingsTitleWrapper } from '@deepgram/styles/react';

<PageHeadings>
  <PageHeadingsTitleWrapper>
    <PageHeadingsTitle>Back End Developer</PageHeadingsTitle>
  </PageHeadingsTitleWrapper>
  <PageHeadingsActions>
    <ActionGroup>
      <Btn ghost sm type="button">Edit</Btn>
      <Btn primary sm type="button">Publish</Btn>
    </ActionGroup>
  </PageHeadingsActions>
</PageHeadings>

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

<dg-page-headings>
  <div class="dg-page-headings__title-wrapper">
    <h2 class="dg-page-headings__title">Back End Developer</h2>
  </div>
  <div class="dg-page-headings__actions">
    <dg-action-group>
      <dg-btn ghost sm type="button">Edit</dg-btn>
      <dg-btn primary sm type="button">Publish</dg-btn>
    </dg-action-group>
  </div>
</dg-page-headings>

Page Heading Title Only

Page heading with just a title, no action buttons

HTML

React

Web Components

<div class="dg-page-headings">
  <div class="dg-page-headings__title-wrapper">
    <h2 class="dg-page-headings__title">Dashboard Overview</h2>
  </div>
</div>

import { PageHeadings, PageHeadingsTitle, PageHeadingsTitleWrapper } from '@deepgram/styles/react';

<PageHeadings>
  <PageHeadingsTitleWrapper>
    <PageHeadingsTitle>Dashboard Overview</PageHeadingsTitle>
  </PageHeadingsTitleWrapper>
</PageHeadings>

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

<dg-page-headings>
  <div class="dg-page-headings__title-wrapper">
    <h2 class="dg-page-headings__title">Dashboard Overview</h2>
  </div>
</dg-page-headings>

Page Heading with Single Action

Page heading with title and a single primary action button

HTML

React

Web Components

<div class="dg-page-headings">
  <div class="dg-page-headings__title-wrapper">
    <h2 class="dg-page-headings__title">API Keys</h2>
  </div>
  <div class="dg-page-headings__actions">
    <button type="button" class="dg-btn dg-btn--primary dg-btn--sm">Create New Key</button>
  </div>
</div>

import { Btn, PageHeadings, PageHeadingsActions, PageHeadingsTitle, PageHeadingsTitleWrapper } from '@deepgram/styles/react';

<PageHeadings>
  <PageHeadingsTitleWrapper>
    <PageHeadingsTitle>API Keys</PageHeadingsTitle>
  </PageHeadingsTitleWrapper>
  <PageHeadingsActions>
    <Btn primary sm type="button">Create New Key</Btn>
  </PageHeadingsActions>
</PageHeadings>

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

<dg-page-headings>
  <div class="dg-page-headings__title-wrapper">
    <h2 class="dg-page-headings__title">API Keys</h2>
  </div>
  <div class="dg-page-headings__actions">
    <dg-btn primary sm type="button">Create New Key</dg-btn>
  </div>
</dg-page-headings>