Spacing Sizes

How to use

.class {
  margin-bottom: bolt-spacing(NAME);
}

Typography is the voice of a brand. This set of typefaces best represent Pega’s brand attributes and personality. They should be used across all digital and print applications.

See more in "Styleguide > Typography"

• Lists
• Headings
• Blockquotes

Nam rerum sint sunt illum et. Mollitia rem aut at nesciunt. Id libero qui mollitia non ut. Ratione sunt iusto nesciunt labore. Et earum tempore dicta eos modi repellendus sit. Alias sint repellat eius numquam et.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Ea cumque ut repellat. Debitis voluptatem fugiat enim id. Numquam explicabo eum voluptatem vitae asperiores omnis ea. Corrupti laborum ea ut et sed qui vel est. Fugit reiciendis ut possimus ad autem. Non fuga ad cum adipisci molestiae a. Nihil quia voluptates deleniti. Doloremque sed et nesciunt dolores. Et ratione rerum et vero id. Iure occaecati iure ea nam ipsum ratione. Qui delectus quae est rerum similique nihil quia nesciunt. Neque debitis corrupti beatae sequi. Id iste aliquam quod quod et consequuntur dolorem. Illum laboriosam id quia dolor. Totam doloribus nam in voluptatem dolores quis provident. Et rerum magnam illum repellat assumenda temporibus. Est ullam recusandae est ut. Est est quam delectus.

Header 2

Ut non architecto ullam repellendus est ipsa porro. Enim perspiciatis ab ipsam qui officiis repellat. Minima vel quia praesentium voluptates esse. Et est dolor quasi consequatur et natus. Ut et dolores id odit. Odit consequatur adipisci facere dicta totam. Sit et nobis eligendi consectetur et ipsa. Sunt quisquam quibusdam temporibus voluptatem non doloribus dolores quaerat. Voluptatum labore laboriosam qui quisquam repudiandae exercitationem voluptatem autem. A quidem consectetur molestiae et et laborum dolore.

Header 3

Aut libero porro aperiam quas. Quibusdam odio inventore qui. Velit doloribus vel enim minus aliquid eius. Et expedita ut corporis dicta. Dicta explicabo est corrupti inventore ab quo sit. Eos est beatae deserunt. Commodi enim recusandae quae eos autem aut. Aliquid asperiores repudiandae ipsum ea et impedit. Iusto exercitationem laudantium libero neque autem cupiditate. Omnis non omnis exercitationem quae et et. Veniam est sed autem veniam animi odio. Asperiores vero sunt voluptate quia.

I'm a blockquote: Id facilis culpa aspernatur non repudiandae. Dolor quo molestias voluptatem similique mollitia. Laudantium harum aut totam recusandae repudiandae quo laborum. Neque nihil et inventore illo. Error sed dignissimos praesentium voluptatibus voluptatem suscipit ipsum. Quia autem mollitia iusto odio. Dolor quia molestiae quia magnam. Eos quo magni dolor qui quis qui. Eveniet enim natus odit iste sit perferendis. Perspiciatis ut hic voluptatum minima.

Voluptas consequuntur voluptatem officiis eius quod rerum iste sunt. Suscipit labore enim architecto soluta qui ab. Mollitia eligendi maxime fuga voluptatem minima nihil est. Tempora natus accusamus qui quisquam dolor magnam odit. Et sapiente velit facere facere odit. Sunt dolor eos omnis omnis aliquid id repellendus. Corrupti dolor adipisci asperiores praesentium. Nesciunt est provident nulla odit quidem. Enim aut nostrum corporis voluptatem et ut recusandae. Quidem autem delectus non aut dignissimos. Non et laudantium dolore. Ducimus optio et eos enim. Ullam accusantium dicta explicabo quasi rerum provident. Voluptatem odio provident voluptatibus rerum sit perspiciatis. Quia sit magnam tempora et minima odio accusamus. At sed et cumque impedit.

• quod quisquam et
• id reiciendis in
• eveniet harum ea

Placeat id est eum omnis sit quis sequi repellat. Quo et voluptate omnis. Molestiae laborum ratione nostrum vitae. Repudiandae corrupti cumque at et. Voluptatem optio non exercitationem consequatur ut. Ipsam sunt laborum quod accusamus in. Sint est quos quisquam in et quasi. Modi et doloribus asperiores veritatis. Et possimus autem quam. Sunt corporis earum dignissimos est facilis itaque et. Eos accusantium quod voluptatibus. Aperiam pariatur aliquid sint velit ut iste. Quia corrupti sit delectus magnam. Voluptates provident rerum aut sit alias recusandae dolorem in. Dolor vero explicabo eaque aut.

Header 4

Libero perferendis architecto vero fugit. Cupiditate omnis fugit vitae sit sint odio voluptate molestiae. Saepe incidunt rem dolor et repellendus necessitatibus. Dolor nihil qui commodi fugiat consequatur molestiae voluptas. Soluta unde non labore sunt vero ad. Est sint sapiente est fugiat doloribus exercitationem ea ut. Reiciendis mollitia non nam consequatur. Eum adipisci necessitatibus omnis laborum. Alias libero dolor et et voluptatem. Debitis quia rerum in et. Exercitationem dolorem non corporis odio repellat temporibus tempora. Dicta qui vitae est in natus fuga. Aut mollitia voluptatum aut nihil est. Nostrum voluptas quae rerum ad fugit deleniti voluptatem sunt.

Header 5

Molestiae voluptatibus saepe cum odit. Corrupti dolores esse aut illum. Officia voluptas neque accusamus est natus consectetur fugit. Rerum officiis qui sed. Aut temporibus suscipit quibusdam voluptatem rem. Laboriosam officiis exercitationem debitis rem aperiam. Modi et est aliquam adipisci est assumenda. Sunt molestiae necessitatibus saepe aut. Cumque architecto dicta impedit quos natus harum sint quis. Omnis sunt enim sint dolorum dignissimos at quae. Voluptas laboriosam ratione non ipsam qui voluptatem aperiam. Animi quaerat illo totam sed dolores possimus. Dolorum id culpa ad nam neque. Cumque fuga incidunt quia sit eum nihil.

Header 6

Porro minima soluta qui eius. Quasi fugiat aut perferendis sapiente. Enim accusantium eligendi ut aut. Nostrum et est doloribus et et consequuntur. Quasi facilis ut et autem impedit. Inventore id nihil quia voluptas rerum eaque sapiente. Qui dolor sint optio et aut repellendus. Laborum voluptatem qui ipsa ad ea sequi. Aut in minima in molestiae eveniet debitis et perspiciatis.

How to use

  .c-component-name {
  // Setting a min (mobile first)
  @include bolt-mq(xsmall) {
    background-color: red;
  }

  // Setting a max (desktop first)
  @include bolt-mq($until: xsmall) {
    background-color: blue;
  }

  // Setting a range (adaptive)
  @include bolt-mq($from: medium, $until: xlarge) {
    background-color: yellow;
  }

  // Setting orientation or other media queries
  @include bolt-mq($from: xlarge, $until: xxxlarge, $and: '(orientation: portrait)') {
    background-color: green;
  }
}