Footers

1 component in this section

Simple Footer

Simple footer for page layouts

HTML

React

Web Components

<footer class="dg-footer">
  <div class="dg-section">
    <p class="dg-text-tagline">© 2024 Deepgram. All rights reserved.</p>
  </div>
</footer>

import { Footer, Section } from '@deepgram/styles/react';

<Footer>
  <Section>
    <p className="dg-text-tagline">© 2024 Deepgram. All rights reserved.</p>
  </Section>
</Footer>

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

<dg-footer>
  <dg-section>
    <dg-text-tagline>© 2024 Deepgram. All rights reserved.</dg-text-tagline>
  </dg-section>
</dg-footer>

Footer with Links

Simple footer for page layouts

HTML

React

Web Components

<footer class="dg-footer">
  <div class="dg-section">
    <div class="dg-footer__social-links">
      <a href="#" class="dg-footer__social-link">
        <i class="fab fa-github"></i>
      </a>
      <a href="#" class="dg-footer__social-link">
        <i class="fab fa-twitter"></i>
      </a>
    </div>
    <p class="dg-text-tagline">© 2024 Deepgram. All rights reserved.</p>
  </div>
</footer>

import { Footer, FooterSocialLink, FooterSocialLinks, Section } from '@deepgram/styles/react';

<Footer>
  <Section>
    <FooterSocialLinks>
      <FooterSocialLink href="#">
        <i className="fab fa-github" />
      </FooterSocialLink>
      <FooterSocialLink href="#">
        <i className="fab fa-twitter" />
      </FooterSocialLink>
    </FooterSocialLinks>
    <p className="dg-text-tagline">© 2024 Deepgram. All rights reserved.</p>
  </Section>
</Footer>

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

<dg-footer>
  <dg-section>
    <div class="dg-footer__social-links">
      <a href="#" class="dg-footer__social-link">
        <i class="fab fa-github"></i>
      </a>
      <a href="#" class="dg-footer__social-link">
        <i class="fab fa-twitter"></i>
      </a>
    </div>
    <dg-text-tagline>© 2024 Deepgram. All rights reserved.</dg-text-tagline>
  </dg-section>
</dg-footer>