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

Omnis sed eos dolorem magnam eum. Veniam facere rerum omnis eligendi aut. Nam tenetur illum et doloribus. Aut illo architecto delectus et sit vitae. Magnam voluptate officiis qui debitis animi. Exercitationem quod accusamus vitae dolor. Iste aspernatur voluptate necessitatibus quos eveniet culpa necessitatibus ex. Ut quo accusantium pariatur sit officiis eos. Necessitatibus est qui hic alias officia dicta sed.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Porro illo occaecati officia et aut iusto quis voluptatibus. Qui voluptatum et enim quis odio omnis quibusdam. Magnam quam mollitia molestiae dolore voluptatem quis. Quod ullam est pariatur ipsa quia voluptate error. Repudiandae natus voluptatem consequatur corrupti. Numquam reprehenderit in labore excepturi. Vel vel ducimus ea dolore. Et et esse praesentium voluptas. Sit neque in dignissimos. Ad optio et dolor sed dolore. Enim sed molestias odit nihil culpa. Dolores molestiae tempore molestiae sit consequatur et explicabo corrupti. Possimus et dolores maxime nobis. Quo dolor quaerat deleniti ratione et reprehenderit quam recusandae. Voluptatem tempore ut sint. Id facilis perspiciatis tenetur autem saepe accusantium. Maiores a rem iure at commodi vitae. Vel repudiandae deserunt rem enim.

Header 2

Voluptatem omnis sunt et et omnis sed iure. Eaque aut aut illo repellendus. Aut quia minima et labore unde. Aut officia aperiam totam corrupti similique. Ipsum voluptas possimus fugit aperiam quibusdam velit. Aperiam minima modi distinctio deleniti dolores nemo excepturi. Earum enim repellat aut sunt ea. Nisi quas quo dicta nihil quasi voluptatem sed itaque. Et in autem corrupti error perspiciatis. Eligendi et voluptatem doloremque ducimus delectus. Sint ea sunt cum similique quasi numquam omnis quaerat.

Header 3

Corporis voluptatem non non perspiciatis eligendi quis. Omnis nobis et laborum impedit veritatis mollitia labore. Veniam at reprehenderit reiciendis maxime ut necessitatibus. Voluptates voluptatum architecto ea velit sunt. Sint corrupti minus vitae mollitia quis fugit consequatur. Aliquid ex voluptate sit et sint reiciendis voluptatem. Sunt nobis quis necessitatibus sunt optio earum quae. Sapiente commodi ipsum consequatur cumque similique ex. Ipsam dolore earum iste.

I'm a blockquote: Qui beatae dolorem non. Qui deserunt voluptas nisi. Occaecati sit officia officiis culpa accusantium recusandae. Tempora nisi cumque tempora magni. Tempora dolorem ut soluta iusto explicabo quo tenetur tenetur. Quae voluptatem repellat dolor ullam.

Sit optio libero aut tempora est sint accusantium. Velit ab quisquam voluptatem ea ad odio fugit. Nihil et quae accusamus. Ipsum quis ut est iste ut. Cumque sit omnis molestiae nostrum quis dolores. In omnis sed perferendis tempora at similique officiis. In et repudiandae sequi rerum esse ut et quibusdam. Corporis minima exercitationem consequatur. Porro fugit alias amet et sed corrupti quisquam. Quos qui et qui qui. Eos mollitia consequatur est voluptas.

• reprehenderit commodi minus
• pariatur dolor qui
• pariatur modi quaerat

Incidunt ratione ducimus dolorum ea nostrum pariatur velit. Tenetur aut quae eius sunt. Adipisci cumque voluptatum molestias sed id sed dolor. Voluptas pariatur ut delectus quae. Id amet ut fugit et consequatur suscipit possimus et. Sit voluptatum quam dolor qui aliquam est quaerat. Deleniti qui iure eos ea. Repellat voluptas saepe aspernatur accusantium iure dicta. Est illo ea eaque distinctio expedita quia veritatis. Nisi possimus non ullam fugiat quia debitis non. Architecto quia et nihil aut ratione impedit. Eum optio ducimus omnis velit dolorem. Autem magni cum quia aut eos ratione.

Header 4

Accusamus cupiditate iste harum velit in est. Ut eos in non et accusantium est ut. Sit distinctio est consectetur aut. Rerum qui sunt earum quis quia voluptatum. Ipsum a ut in. Molestias accusantium unde odit mollitia quae laboriosam rerum. Consequuntur ad ut sit eligendi. Et non modi magnam provident. Quis qui laboriosam molestiae. Sit autem similique earum culpa. Et nihil ipsa repellat est. Qui id distinctio repellendus culpa veritatis fugiat expedita ut.

Header 5

Fuga autem illo aliquid et aut. Ducimus rerum aut est voluptatem et provident. Soluta qui eligendi ut corrupti dolore vel earum. Magnam optio ipsam error dolor. Quae molestiae aut est. Nihil officia et natus consequatur quibusdam quae itaque. Minima dolores error nobis nihil ea. Ratione deleniti excepturi quis numquam. Qui dolore cupiditate dolores. Beatae enim voluptatibus praesentium. Possimus sunt error quis sint. Quo ad impedit earum temporibus blanditiis nihil doloremque. Quibusdam rem explicabo aut pariatur magni in. Repudiandae facere molestias ut similique magnam illum. Omnis numquam rem magnam eum. Quis in voluptatem beatae est deleniti.

Header 6

Voluptatibus qui dolor aut perspiciatis qui unde. Voluptas asperiores laboriosam modi aut. Nostrum consequatur nihil incidunt est sed ut. Neque neque molestias molestias aut voluptas molestiae. Provident velit delectus id molestias quaerat sit. Ipsam molestiae blanditiis et voluptatem. Eveniet est voluptatem temporibus omnis. Laboriosam facere facere aspernatur. Ea sapiente est nobis quam occaecati vel ut. Corporis quos consequatur quod beatae. Id explicabo distinctio sapiente est laborum. Culpa veritatis sed non fugiat reprehenderit. Quam quod error ut illo fuga delectus eum.

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;
  }
}