Mozilla SUMO Styleguide
  • 0Overview
  • 1Utilities
  • 2Typography
  • 3Colors
  • 4Grid
  • 5Forms
  • 6Buttons
  • 7Tables
  • 8Cards
  • 9Pagination
  • 10Progress Bar
  • 11Banners
  • 12Breadcrumbs
  • 13Social Links
  • 14Tabs
  • 15Containers
  • 16Navigation
  • 17Document Vote
  • 18Footer
  • 19Layout Examples

13 social-links Social Links

Open in new window

This component is designed to display HTML content over an image, typically at the beginning of a document. This component can be used on its own, or as an item within a carousel.

Examples
Default styling
  • Twitter (@mozilla)
  • Instagram (@mozilla)
Markup: ../../../../../styleguide/styleguide-examples/social-links.njk
<div class="knockout" style="padding: 10px;">
  <ul class="social-links">
    <li><a class="twitter" href="https://twitter.com/mozilla">Twitter<span> (@mozilla)</span></a></li>
    <li><a class="instagram" href="https://www.instagram.com/mozilla/">Instagram<span> (@mozilla)</span></a></li>
  </ul>
</div>
Source: ../kitsune/sumo/static/sumo/scss/components/_social-links.scss, line 3