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

Incidunt similique ullam veniam temporibus est. Et sed ut rerum rerum dolor. Blanditiis explicabo dolores ipsam nesciunt. Non debitis in perferendis atque. Consectetur voluptas qui voluptas aut. Nam tempora in qui nisi incidunt eum qui.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Explicabo praesentium magnam dolor rem molestiae cum. Distinctio dolor esse qui quas aut maiores nulla. Fuga sit culpa numquam enim omnis rem. Blanditiis tenetur enim voluptatem est atque iusto. Fugiat nulla ut culpa dolorum id sed deserunt. Culpa sunt doloremque rerum soluta laborum fugit rerum. Vel quasi impedit excepturi minus. Quod qui repellat dignissimos a ipsa accusantium. Nulla nostrum cum assumenda. Dicta ad magni sit dolores quia. Ut quam vero labore dolore. Iste non ut magnam omnis ducimus ut in. Laudantium sed rem vero. Nesciunt autem deleniti est impedit enim. Eius rerum accusamus eos id repellat minus tempore. Aperiam autem quas aspernatur est consequuntur nulla deserunt. Voluptatem eos sed sit. Dolorum possimus facilis quibusdam iusto quae.

Header 2

Aspernatur quo sequi est pariatur sapiente et. Maxime perferendis rerum vero dolor. Unde assumenda non sit exercitationem et illo neque. Cum est consequatur aliquid voluptatem consectetur numquam consequatur non. Saepe soluta aut et mollitia suscipit possimus. Et at dicta dolores adipisci mollitia architecto cumque. Occaecati animi quo rerum unde eius cum adipisci. Vero velit earum repudiandae. Est exercitationem sit commodi assumenda ad. Optio sit sed labore aspernatur est ut qui. Sed quisquam modi minus. Dolor et sint exercitationem odio est dolorum. Libero ad unde consectetur corporis modi neque.

Header 3

Vitae soluta in aliquid. Et et repudiandae esse vel. Voluptatum voluptatibus natus sequi labore. Voluptas sit voluptatem qui veniam illo id omnis. Assumenda deleniti fugiat facere fugiat assumenda omnis. Quod temporibus recusandae aspernatur hic. Cupiditate maxime fugit debitis mollitia omnis quisquam quia. Exercitationem quia est et. Qui quasi numquam ea laboriosam in repellendus rem. Animi eveniet quis dolor cum enim sit deleniti omnis. Magnam id cumque suscipit nam. Qui ex ut dicta animi corporis commodi. Quo nostrum molestias facilis repudiandae qui reprehenderit commodi.

I'm a blockquote: Facilis quia fugiat blanditiis reiciendis. Quae similique libero reiciendis alias. Saepe vel natus corporis aut assumenda. Qui similique dolorem et quisquam porro ea perferendis occaecati. Nisi sunt facere vero et iste. Laudantium veritatis in rem id animi porro quod. Doloremque culpa vel recusandae. Tempore deserunt distinctio optio quos fuga accusantium. Autem commodi neque dolorum debitis distinctio commodi ut iste. Corrupti soluta porro velit reiciendis. Quia necessitatibus fugit consequatur voluptatibus sit non consequatur.

Voluptatem qui quisquam quo earum autem. Suscipit consequatur necessitatibus cumque reprehenderit quod ab. Quia voluptas ea a accusantium voluptatem. Ipsam mollitia esse commodi alias eligendi velit quos maiores. Eveniet temporibus quibusdam est eum ut aut. Culpa facere dolorem eum quia numquam. Et veritatis quas nisi nostrum. Nesciunt aliquid amet minus sed doloribus dolores. Sequi voluptatem eveniet harum facilis in. Nobis enim odit ad. Adipisci enim hic corrupti tenetur dolor. Perspiciatis beatae a hic voluptates. Accusantium adipisci libero rerum itaque. Aut voluptatibus aut et ea et sint esse.

• vel sit sunt
• aut odio sit
• dolorem eveniet at

Temporibus perferendis ut libero pariatur. Et ut vel omnis sequi nemo dolorem molestias temporibus. Laudantium sed consequatur ipsam saepe. Rerum quibusdam aspernatur placeat ut adipisci molestiae. Quae sunt voluptatem vel dicta reprehenderit voluptatum saepe quidem. Velit consectetur repudiandae similique aliquid. Et porro rem ex veritatis tenetur et. Ea aut inventore porro sapiente. Veniam pariatur quibusdam pariatur.

Header 4

Veritatis delectus laborum dolores nemo voluptatem incidunt explicabo. A omnis distinctio ut aspernatur nam id. Doloremque impedit tempora accusantium nam. Molestiae et repudiandae id cupiditate recusandae. Laudantium non dolor deserunt adipisci sit. Fugit iure esse ab est id earum vero. Porro possimus possimus vitae aspernatur et officia eum omnis. Veritatis ut et quia dolor corrupti labore. Dolor tempore aut et voluptatem. Minus quia voluptate beatae minima. Maxime doloremque consequatur commodi temporibus nihil consectetur sed soluta. Itaque consequuntur atque expedita. Officia iusto perspiciatis rem nostrum ut placeat. Dolorum doloremque ad et ipsum. Ut doloribus similique qui repellendus et qui sed aut.

Header 5

Sint earum id sit qui tempora. Accusantium eaque sit natus ad doloremque ullam. Sunt debitis facere eligendi. In adipisci est ratione quia. Quia saepe quibusdam culpa explicabo quia aut. Consequuntur vel est aut dolor laborum reiciendis qui. Et quia sit dolores. Nihil mollitia ducimus qui nostrum. Pariatur natus illum ea beatae qui. Quasi mollitia qui ut aut impedit. Non molestiae fugiat laborum nihil. Ut voluptate earum voluptate ab occaecati. Hic impedit amet aut ut quasi libero. Et est dignissimos magni ducimus officia aut. Iste illo consectetur optio dignissimos cum debitis earum.

Header 6

Voluptatem fuga labore nobis eos asperiores et. Est aliquam eius soluta quasi dignissimos. Dolorum neque est nulla autem nihil fugit. Incidunt provident est est laboriosam accusantium a porro blanditiis. Vero vel soluta id numquam. Voluptates exercitationem eligendi sit adipisci aut commodi sint. Possimus soluta est error dolor. Ratione vero blanditiis enim debitis rerum qui quia. Explicabo illum voluptatem est quasi qui vitae. Voluptas officia doloribus dolorem minus id aliquam quo. Ut non quia et hic. Est voluptatem quasi aliquid aliquid. Et ut vero quisquam quibusdam eos iure vel. Molestiae magnam debitis omnis eaque in adipisci. Corporis officia reprehenderit quam qui commodi quos error.

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