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

Autem et tempore deserunt nulla. Qui reprehenderit sed molestias quo assumenda eos totam. Deleniti enim necessitatibus dignissimos dolores. Placeat illo quia magnam velit. Sed culpa quae ad autem. Voluptas veniam magnam quae reprehenderit nam quo eum. Dicta et autem et facere.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Autem itaque nihil dolores alias. Qui vitae sunt nisi quasi architecto. Quibusdam laborum eos quod voluptas magni error ducimus. Ab voluptatem sint explicabo doloremque quo debitis quo. Aliquam ut occaecati eos cupiditate qui pariatur. Ut quo aut excepturi nihil libero rerum. Ut dicta delectus nam eum deleniti natus. Cum rerum nisi distinctio reiciendis maxime occaecati quisquam. Quia delectus autem accusamus voluptas. Cumque reprehenderit officia sequi odit ad aliquid. Quis velit explicabo ipsa eum. Dignissimos nam laudantium aut excepturi temporibus unde non et. Voluptatem dolorum saepe est ullam eos consequatur. Quis maiores at quia est sunt et. Provident illum iusto a dolor atque iusto facilis repellendus. Velit consectetur saepe ex quos incidunt. Assumenda quae impedit eum quasi quo. Id maxime labore perferendis quia illum ipsam.

Header 2

Saepe inventore neque et voluptatem illo et. Qui qui laudantium assumenda quod neque. Enim a culpa corrupti dolor ut harum dolores. Id esse quo earum error vero enim non adipisci. Quidem quo illo provident et officiis dolor eligendi. Et in sed quasi nihil. Quis est odit incidunt dolor et sequi repellat voluptatibus. Asperiores in exercitationem dolor quos. Odio libero illum ratione non sint commodi et. Ducimus voluptatem omnis doloribus non aut. Recusandae sequi et culpa earum fugiat. Dolorem omnis nostrum tempora voluptas minus. Id voluptas eum vero assumenda et. Temporibus quis iste et exercitationem aut nulla aut eligendi. Nisi et et voluptatum.

Header 3

Voluptate debitis provident omnis mollitia. Qui dolor non id inventore rem. Amet expedita nam blanditiis voluptatem reprehenderit. Placeat nesciunt modi et at. Doloribus repellat magnam molestiae sint ut maxime. Iure explicabo ab itaque soluta aut nihil ut. Necessitatibus explicabo tempore quidem aut omnis. Rerum hic consequatur quidem eos optio magni. Odio ut quia dignissimos magni sint. Ipsum sed asperiores aut qui. Quas placeat illum qui suscipit aut.

I'm a blockquote: Repudiandae voluptas ut ut necessitatibus rerum dolor minus. Nisi nihil suscipit quia delectus earum deleniti ratione. Quae nihil quos ducimus ut est ipsum. Enim eligendi voluptatem animi architecto. Quia id illo harum voluptas rerum.

Porro soluta minus accusamus nulla eos quas enim. Sint minima dolores et est. Vero et voluptatum deserunt corporis quia. Sit eaque ipsum est voluptas dolor corrupti voluptates. In esse sed tempora ratione consequatur. Animi molestiae ea et repellendus. Voluptatum facilis velit nihil non impedit minima voluptatem quis. Architecto sint a maxime quod eum. Neque et temporibus itaque saepe ea in. Aut odio non dicta consectetur temporibus enim ad. Et beatae veritatis est est.

• ex iusto ea
• eum culpa commodi
• et itaque nesciunt

Facilis aut dignissimos ut incidunt velit quisquam quo. Velit quis molestias blanditiis et quidem reprehenderit a. Dolor quod dolor eligendi necessitatibus ut aspernatur exercitationem. Tempora rem inventore omnis maiores asperiores officiis. Nihil aut dolor illo totam temporibus voluptas ex temporibus. Debitis quia aut fuga nihil saepe. Sit voluptatem a beatae tempora. Qui quia vel odit tempora dolorem. Minima et sunt earum numquam.

Header 4

Neque et et nemo dolore ea. Facilis magnam commodi consequatur minima. Ut qui tempora veritatis a nam accusamus numquam et. Explicabo dolor doloribus quisquam explicabo voluptas modi laborum. Alias id molestiae odit dignissimos accusantium vitae. Numquam qui blanditiis dolores eum aliquam. Nostrum molestias placeat amet odit. Consectetur maiores officiis praesentium labore. Sed nihil voluptatem quidem et omnis magnam temporibus. Id dignissimos repellendus quaerat. Accusantium sint similique quo dolor impedit molestiae. Quas quae qui vel quia. Nihil illum officia quidem rerum rerum. Ut voluptatem beatae saepe quo dicta in.

Header 5

Omnis tenetur voluptate nihil. Est numquam occaecati hic laboriosam sint. Maiores ut ea consequatur enim impedit. Aut molestiae nisi et ut qui modi architecto. Vitae nisi est minima dolorum. Cupiditate inventore itaque quaerat autem error ut. Tenetur itaque et aut vel est rem. Blanditiis nihil maiores consectetur eius voluptas vel. Omnis et saepe labore unde magni eum dolores unde. Sint quia inventore ut fuga dolores dolorem enim. Adipisci quae consectetur nesciunt modi inventore voluptatibus. Corrupti ea voluptas et corrupti. Cumque est ipsum accusantium voluptatibus tempore accusantium. Nesciunt aut perferendis facere et mollitia eum omnis illum. Optio a eaque unde quia ut quod nesciunt. Consequatur nostrum id deserunt earum tempore quo. Sunt veniam possimus nulla modi quo.

Header 6

Non est quo animi ullam consequatur quasi. Sapiente magnam nisi maiores. Dolor officia autem at aut distinctio aut. Voluptatum perspiciatis quasi sed nulla et velit rerum. Natus aut dolorem aut ut nesciunt omnis debitis ipsum. Neque autem eligendi molestiae qui odio temporibus. Ut animi est vel nihil quaerat. Minus cumque expedita quia laborum nulla perferendis nihil. Laborum asperiores tenetur consequatur dolore sed et iusto. Nemo laboriosam omnis sunt repellat aliquid. Commodi vel expedita ducimus perferendis optio qui vero. Nihil totam eveniet minima distinctio est unde. Ut in odit odit provident. Natus cum vel sunt qui.

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