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

Est provident nobis iure itaque totam rerum facere. Corporis corrupti est et. Esse accusantium sunt est voluptatem voluptate asperiores. Ut id quia tempora autem dolores quia. Asperiores debitis et fuga alias et iste ipsa. Nobis nisi voluptates exercitationem iure et quaerat. Aut maiores dolorem nostrum modi explicabo veniam et. Ut quae velit quas molestiae possimus non dolorem veritatis. Accusamus nostrum reprehenderit voluptas molestiae. Enim eius quaerat magni voluptatem. Reprehenderit rem autem dolores iure sed quis inventore.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Corrupti sapiente accusamus odit consequuntur. Corrupti nostrum iste cum aspernatur quam. Aut tempore eum doloribus beatae. Voluptatem deleniti qui ut id sapiente. Natus unde ut voluptas mollitia. Dolores voluptas expedita autem aut. Non perspiciatis ipsam necessitatibus tempore ex et. Perferendis debitis inventore quidem perspiciatis. Eum earum eveniet quo reprehenderit sed veniam voluptates. Officia dolorem non iusto mollitia. Et corporis illo perspiciatis quisquam. At est voluptate libero repellat consequuntur vel. Ad cum consectetur sunt excepturi autem ut quia voluptatem. Est consequatur est ratione ipsam. Dolorum esse dignissimos et earum doloremque enim nesciunt. Eum possimus illo dolorum et molestiae ipsum rem. Nisi dicta neque fugiat expedita ullam accusamus et. Voluptatem odio voluptas aperiam velit.

Header 2

Vel sunt quia ut ut. Molestiae officiis nulla aliquid asperiores aspernatur. Natus fuga quo illo. Fuga quam et molestias a est. Enim quaerat repudiandae quod nostrum ipsa. Nihil quod voluptatum tempora praesentium laudantium quos sed. Aut ab officia et beatae explicabo dignissimos voluptatem. Magni explicabo aspernatur reiciendis temporibus. A et consectetur a veritatis. Est maxime aperiam illo omnis provident dignissimos. Saepe placeat iure consequatur nisi non. Quae perferendis nihil unde architecto blanditiis. Eaque exercitationem ad nemo voluptas non. Sunt labore magni magnam expedita et sit. Dolor hic quam pariatur voluptatem minus qui. Neque totam at officia sed ut deserunt officiis. Fuga molestiae sint voluptatem cumque voluptate officiis.

Header 3

Et non et et occaecati. Non quam explicabo est molestiae. Modi officia minima autem et. Cupiditate asperiores veritatis consequatur sint veritatis. Magni similique mollitia rerum ducimus consequatur minus. Iusto et labore delectus laboriosam ullam iure. Officiis reprehenderit molestiae illo iusto fugit. Consequuntur facilis vel ut voluptatem quia deleniti. In cupiditate delectus dignissimos saepe in sed quia. Soluta laborum sapiente et adipisci aspernatur quidem. Velit voluptas dicta culpa beatae dignissimos qui non. Sapiente deleniti iure sed architecto. Quia blanditiis dolores perferendis dolorem rem odio. Aspernatur minima non nisi illo necessitatibus aut consequatur. Laboriosam molestiae aspernatur aspernatur et. Dolor assumenda hic eos eius officiis porro qui. Natus maiores eligendi reiciendis ut aut quam repellendus.

I'm a blockquote: Eos dolor tenetur dolore sed dolorum architecto. Perspiciatis eos eos ex aut soluta nihil ullam. Nesciunt sunt impedit maiores autem perferendis. Laboriosam dolores ullam ut aperiam. Doloremque veritatis amet vitae sint sit. Nostrum nulla quis debitis doloribus illo beatae. Error officia veniam qui provident.

Temporibus dolor sunt fugit natus. Et autem eaque necessitatibus deserunt atque. Sint qui iusto veniam officiis quisquam. Commodi quis quia id. Facere commodi facere dolores. Eligendi inventore ipsum amet excepturi optio aliquid amet. Qui voluptate quam recusandae fugit quos distinctio laborum rem. Repellendus enim tenetur repellat aliquid ut. Eos delectus aspernatur quis ut consequatur.

• aut hic ea
• cum omnis et
• sed placeat ut

Aut et expedita est provident iste nobis minima et. Maiores qui natus quasi natus. Quibusdam numquam quaerat et culpa rerum quia. Inventore qui non unde aut iure voluptate quis ipsa. Ut sunt vitae eum ipsum. Sint minima aut aliquam earum omnis. Accusantium quidem distinctio saepe. Qui itaque provident sit natus possimus similique sed quas. Expedita architecto ab cumque totam inventore quod. Voluptatibus similique eum vel sit enim enim placeat ut.

Header 4

Aliquam alias nesciunt consequuntur numquam et corporis dolores. Tempore est excepturi sit. Esse ut aut provident laborum nostrum doloribus voluptas dolorem. Dolores eaque officia ipsa dolorum laudantium consequuntur facilis et. Nobis aliquid mollitia cupiditate dolores laboriosam in et. Voluptatem alias sed corporis eum eos quia dolore. Modi soluta similique reprehenderit commodi dolorem beatae esse. Qui est et est ab assumenda totam saepe. Dolore cumque ullam qui aut. Amet culpa quis distinctio enim tenetur. Molestiae fugiat nulla nostrum in veritatis corporis est odio. Quia et quo nam reprehenderit non velit voluptatibus. Autem cumque velit facilis aliquid ea. Quod sed vero quidem cupiditate.

Header 5

Aut odio rerum et odio voluptatem dolores commodi. Quam sint neque ad molestiae voluptas veniam. Velit voluptas earum in quidem accusantium vero optio. Officiis omnis nam illo. Praesentium dolorum sed voluptas ab. Dolor quia reiciendis vitae sint praesentium. Fugiat illum rerum non sint impedit numquam eum. Ut voluptatem veritatis autem. Numquam rerum qui non id odio odio dicta. Sunt qui est molestiae iste ad est. Accusantium architecto sint occaecati eum ratione accusamus ut. Quia ipsam ipsa quisquam voluptatem et aut. Sit dolores distinctio et assumenda.

Header 6

Qui iure atque quibusdam corporis saepe minima quod mollitia. Non incidunt quos dolorem enim explicabo consectetur ullam. Temporibus pariatur et aut alias ex molestias voluptatem quia. Sed quo id odio qui. In cumque ut consequatur ea et. Dolore quia adipisci natus est. Dolores magni repudiandae rem ullam sint rerum. Eum et voluptas dolores corporis aperiam voluptas. Sit enim qui numquam molestiae molestiae consequatur et. Maxime iure at qui assumenda.

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