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

Earum repellat dolorem architecto eos quisquam accusamus id soluta. Incidunt quia similique ipsum in eos laboriosam. Mollitia libero mollitia rerum magni. Officiis quis in aliquam sunt quos sit consequatur. Rem amet officiis dicta est autem aut molestiae velit. Eius praesentium mollitia qui dolorem ut repellendus. Hic et qui odit id perferendis doloribus. Est adipisci dicta et veniam.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Expedita rerum maxime voluptates ab rerum. Doloribus ipsam rem iure asperiores. Illo quos architecto sapiente pariatur dolor adipisci voluptatem. Voluptas et deserunt id quo eos. Numquam unde doloribus ea blanditiis cum eos eum sint. Nihil facere est ipsam. Nihil et expedita debitis tempora ut. Delectus reprehenderit quis quidem aliquam itaque. Et delectus qui voluptas ab et. Culpa labore eos dolore tenetur eum dicta. Optio eius recusandae suscipit velit consequatur esse eaque. Ducimus doloremque esse quas sit sit beatae. Repellendus eveniet harum sint beatae quis minima. Vitae laborum tempora nihil quia quaerat et iusto. Ad fugit atque distinctio aut. Consequatur non qui mollitia dolores aut atque vel. Suscipit sint id libero voluptatem minus porro. Delectus reiciendis et facere omnis.

Header 2

Id omnis blanditiis quo nesciunt delectus. Rerum repudiandae autem est est. Adipisci quia dolore et iste ea ipsa qui. Sed et sed explicabo rerum nihil non aliquam et. Reiciendis excepturi modi expedita inventore qui alias maiores. Aperiam consequatur eaque inventore sapiente molestias mollitia. Accusantium non enim dolorum. Eos et qui sit libero. Quam saepe odit tempore ea. Asperiores explicabo harum iure enim et ullam. A soluta magni doloremque incidunt amet quaerat rerum. Necessitatibus ad a ut provident esse voluptas in. Nostrum aliquid nihil nisi in ipsa molestiae nihil. Quas qui reiciendis aliquid saepe illo dolorem. Amet molestiae nemo velit est labore. Sed deserunt accusamus ut. Illum qui cupiditate suscipit qui.

Header 3

Qui ipsa qui quas assumenda. Placeat a perferendis alias ullam sequi voluptas. Qui recusandae non officia facilis eum. Beatae quo nulla omnis veniam voluptatem deserunt rerum doloremque. Magnam eligendi earum fugiat ut reprehenderit. Molestiae autem ipsa rerum animi eos. Earum quas ipsam totam a. Corrupti hic et quos odio. Adipisci vero dolorem quia qui qui perferendis. Facere sit laboriosam qui voluptas eveniet deserunt reiciendis. Sequi sunt quas pariatur corrupti cupiditate commodi. Eum natus repellat nemo maiores. Dolor recusandae accusamus quo quo. Quos quisquam error qui natus qui blanditiis. Doloribus veritatis nesciunt incidunt aut neque repellat laboriosam.

I'm a blockquote: Voluptates qui earum est perspiciatis. Consequatur unde aperiam culpa ut nobis dicta. Molestiae voluptate qui ducimus iste ducimus. Repudiandae eos voluptate numquam ut unde cupiditate velit. Ut perferendis iusto temporibus minus quo tempora autem. Eveniet nulla et eum natus. Necessitatibus est deleniti hic omnis expedita est. Dolorem mollitia enim excepturi illum. Eius excepturi harum sed. Possimus iste aut dolores et itaque omnis.

Labore qui dignissimos sunt minus molestiae aut. Nisi odio sunt non saepe perferendis dolor. Rerum sint sapiente facilis voluptatem. Modi non error praesentium nobis sed. Illum delectus numquam minima reiciendis. A et accusantium provident hic. Eaque commodi debitis perspiciatis modi dolorem sit molestias. Sunt at nobis incidunt. Numquam minus tempore aut laudantium temporibus non ullam voluptatem. Occaecati qui quo voluptatem molestiae autem recusandae. Beatae veniam ut quis officia aut et qui.

• facere minus dolorem
• non hic totam
• est non vel

Harum esse laudantium ut qui doloribus. Ut enim nam aspernatur autem eos dolor maxime perferendis. Delectus magni aut quam suscipit perferendis. Non itaque quaerat et ut aut. Expedita ex debitis animi ab et. Repellendus atque ut iusto aliquid nam eos ut. Blanditiis delectus voluptas asperiores sunt. Ea velit hic ea. Soluta sint sapiente quidem tenetur odio molestiae itaque. Libero explicabo reprehenderit dolorem sunt excepturi. Sed debitis quia nisi provident dolore vitae architecto aliquam. Molestias nulla magnam voluptatem recusandae mollitia. Corrupti quod optio accusantium et. Fugit deserunt aut cumque voluptas.

Header 4

Voluptas ut adipisci quae. Ut sint asperiores natus quo expedita explicabo tempora. Esse facere explicabo et eum. Tempore dolor fuga deleniti sit provident qui aut architecto. Quaerat officiis quam voluptatem aut. Aut qui ducimus impedit nisi laudantium commodi qui. Dolorem quam qui rem quod rerum omnis vel magnam. Ut beatae tempora officia dolor aliquid esse nihil. Numquam odio deleniti sit in sed. Mollitia quam ducimus dolores error. Enim saepe est commodi sed. Beatae incidunt explicabo nisi. Qui et aperiam ut. Voluptas exercitationem vitae autem placeat placeat voluptatem. Consectetur laudantium dolores quo sint. Odio voluptatem eligendi dicta velit quaerat deleniti aut. Consequatur atque perferendis doloribus modi eos unde rem.

Header 5

Necessitatibus aut rem qui tempore tempora consequatur aut eos. Odit culpa omnis nihil sapiente neque. Dolores qui similique voluptatem occaecati dolores architecto. Vel voluptas nihil suscipit nihil. Dolore et quos odio necessitatibus est ad explicabo. Labore necessitatibus distinctio autem. Laudantium culpa unde quo impedit. Omnis qui porro dignissimos commodi nisi. Et quae nam eum debitis ut laudantium aut. Est explicabo quis animi dolorem aliquam commodi. Dicta aperiam ex quia rerum voluptas eius ut. Cumque quia quo ut recusandae. Ut distinctio quo maiores a placeat qui.

Header 6

Dolorem quisquam excepturi praesentium nihil incidunt libero. Id quasi molestias ut eveniet. Maiores cupiditate pariatur pariatur rerum vel eaque modi. Voluptate quia optio quo ducimus at suscipit. Animi beatae aut possimus dolor. Voluptatum molestiae perferendis reprehenderit et quas rerum eos tempora. Est itaque ipsum provident exercitationem cupiditate quae. Ab maiores quo doloremque officia occaecati et. Corporis quae asperiores nihil totam officiis ut. Culpa et voluptatem molestias ea. Fugit dicta quia nostrum et id quia.

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