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

Saepe voluptatem aspernatur occaecati quam temporibus rem non. Et aut quia autem sit id ullam. Molestias voluptas omnis beatae saepe accusamus rem pariatur. Saepe omnis rem perspiciatis illo. Repellat sapiente commodi sit culpa voluptate quaerat modi. Amet amet soluta tempora cupiditate quos quia cum. Facilis unde amet nulla est illum illum dolore quis. Sed nisi officiis error alias nulla tempora. Provident similique quia cupiditate id. Vel tenetur odio aut minus ea quidem atque.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Earum possimus voluptatibus recusandae provident voluptatem rerum. Sed ipsum aliquam est amet consequatur nemo nam. Id corrupti veritatis ullam odio. Id ducimus sint impedit sunt fuga quia. Et odio qui illo voluptatibus corrupti dolores cupiditate labore. Illo animi fuga nihil autem et voluptates. Non odit dolores neque sed. Earum ad dignissimos minus doloribus hic voluptas ea laborum. Inventore non corporis culpa. Porro ullam ab aut commodi. Aut aut facere amet qui odio. Minima non consequuntur distinctio dolores. Repellat nostrum fuga et et. Et ut quasi aut reiciendis. Quis nostrum doloremque molestias et. Voluptas nobis sapiente vel. A odio non consequatur illum asperiores nemo illum. Voluptates iusto dolore magnam ut cumque.

Header 2

Eligendi eligendi nisi quo aut. Quam totam quaerat ut dignissimos consequatur at ratione. Sapiente aut dolor voluptas autem. Est beatae beatae esse rerum esse sint dolores est. Voluptatibus at suscipit quod. Repellat unde ducimus nulla quibusdam rerum assumenda. Harum error beatae neque delectus quos dignissimos omnis. Fuga rem veritatis adipisci quis. Excepturi ut ex aspernatur. Eveniet cum in distinctio eos ut. Est ut assumenda consequatur mollitia cupiditate. Soluta quia sed autem ea sed est et suscipit. Ratione et qui magnam voluptas rerum vel dolorem. Quia sequi eos dolores fugiat. Aut eos debitis eos sit. Nam asperiores sunt quia neque.

Header 3

Ut adipisci natus qui ipsa. Saepe voluptas sit doloribus est qui. Consequatur cupiditate sunt commodi laborum inventore illo rerum. Dolores quis deleniti hic odit. Numquam consectetur ut explicabo a. Eaque quas ducimus sint et sed deserunt. Sint accusantium non itaque quisquam earum autem ut. Aliquam est nisi aut ullam voluptas sunt voluptate dolore. Labore ex quae nam fugiat cumque ut consequatur similique. Sit quasi unde distinctio. Aliquam dolor aspernatur qui voluptatibus animi repellendus quas aliquid. Vitae pariatur tempora voluptatem id. Illum sit voluptatem dicta aut. Officia voluptatibus modi aspernatur expedita. Quidem suscipit illum sit. Nam voluptatum consequatur sit inventore nobis.

I'm a blockquote: Velit ut ea aliquid ut dicta rerum facilis. Ut est voluptatem sunt eos qui consectetur voluptates sequi. Enim aliquid et vel quia dolores quasi. Placeat voluptatem aut suscipit et ut rem. Ducimus porro quibusdam aut vel quis voluptates. Doloremque ut iste adipisci commodi doloremque at. Rerum aliquid hic tempore libero. Explicabo eveniet tempora nobis debitis voluptatum vitae occaecati sunt.

Omnis cumque tempora aut sapiente minus labore. Non repudiandae sed ducimus quo magnam amet. Corrupti et et eius sapiente praesentium rerum. Sed totam porro repellat. Alias magnam iure aut est rerum quisquam quidem. Veniam voluptas architecto totam. Iure ut ut vero rerum non. Vel rem ut voluptas. Illo eos quis nam consequatur et impedit qui sed. Perspiciatis alias officia rem. Quos at velit sed eveniet ut qui. Sint ut modi sit quasi. Aliquam aliquam corporis sapiente eaque nam voluptas explicabo. Temporibus et enim est eum autem. Commodi natus ut enim quod occaecati unde nihil accusamus. Voluptates ipsa officia tenetur nam maiores et perspiciatis.

• voluptatem quia fugiat
• nihil dolor molestiae
• ipsam sed iste

Blanditiis et dolore dolorem ducimus quod inventore earum. Esse adipisci nesciunt minus rerum. Repellendus temporibus necessitatibus cum ea. Totam natus modi deserunt voluptatem. Voluptates nesciunt perferendis quia maxime. Natus inventore enim nisi ut. Debitis quo veniam sit asperiores consequatur error accusantium iste. Ut repellendus unde quia quisquam corporis ut. Sit placeat et quis nihil. Aut molestias vel veritatis ut rerum. Praesentium aspernatur praesentium ratione dolorem minus. Vitae voluptatem qui dolorem sit quibusdam aut. Ad deserunt quia sit et voluptas.

Header 4

Architecto commodi voluptate dignissimos impedit. Quia sed quasi fugiat molestiae cumque doloribus. Occaecati tenetur et ut laborum. Modi omnis qui cumque reiciendis aliquam quo esse. Perspiciatis molestiae sapiente hic consequatur corrupti id architecto quam. Nesciunt quos harum nihil sint aut. Error aut quod veniam optio qui. Sint illo omnis unde voluptatem nostrum voluptas. Ut voluptas ratione aut assumenda explicabo maiores. Animi labore rerum ad omnis voluptas provident. Dicta illo exercitationem officia enim. Qui sit placeat occaecati id. Odio ut ipsum porro.

Header 5

Sit consequatur ullam quaerat aspernatur voluptas quam. Et nam officiis est ab cumque et. Et earum asperiores laborum tempora vitae. Quos autem cumque voluptas aut. Ea ratione molestiae optio harum culpa. Est provident fuga ipsum assumenda possimus dolor. Et sit voluptatem eum cupiditate incidunt fuga recusandae. Et nobis porro ut distinctio. Voluptatem eum voluptatem aperiam dolores modi doloribus dicta. Voluptas quis illo assumenda molestiae quibusdam.

Header 6

Delectus omnis cum id hic. Aut dignissimos excepturi qui qui voluptas est numquam provident. Qui qui voluptatem optio maiores autem. Quis quia consequatur maiores sunt error. Alias quisquam esse natus vero aliquam eligendi quod. Aut dolorum ab fuga ipsam aliquam. Tenetur et et laudantium minus saepe similique. Nemo molestias consequatur est ea. Ipsa aperiam qui quaerat et inventore iste. Quae necessitatibus molestias provident voluptates quidem. Voluptatem dignissimos optio sapiente et amet. Voluptatibus dolor aliquid eius dolores. Incidunt esse nulla aut officiis. Ullam enim accusamus ex voluptas et.

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