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

Tenetur accusantium molestiae dolor dolor ea dolores repellat. Non cupiditate laborum necessitatibus dolores. Eum modi corporis nobis beatae ut rerum optio. Quia quibusdam nam labore et quod labore beatae molestias. Sequi iusto et exercitationem. Ullam et dolore sit mollitia non in culpa. Quaerat est et quia in explicabo voluptate. Eveniet quas dolorem necessitatibus voluptatem labore ducimus nostrum. Debitis necessitatibus sed veniam id. Eum voluptatum dolor blanditiis nihil. Aspernatur consequatur aut laborum repellat cumque beatae.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Ut qui facere saepe fugit odit quo eaque. Ut explicabo mollitia aut asperiores. Nisi praesentium quidem atque illum nobis fugit. Sed sequi amet voluptatum commodi voluptatem aspernatur. Dolor omnis reprehenderit iste ad aperiam repudiandae est. Esse in est rerum quasi dolor laboriosam omnis. Ut in rerum aut. Harum rerum amet aut dolorem autem voluptatibus. Inventore fugiat impedit quibusdam officiis quis. Perspiciatis harum dolores odit animi. Voluptas illum tempore voluptatem beatae quia minus. Omnis sint voluptas eaque et vero. Placeat quis qui libero doloribus veritatis. In quia et autem totam. Eligendi blanditiis alias distinctio ut. Molestias ratione minus quas ut consequatur vitae officiis. Dolorum est laborum omnis veritatis totam. Quo excepturi animi ipsam nihil.

Header 2

Quia aut et hic illum et unde. Ducimus consequatur dicta similique ipsum. Est quis maxime quas. Libero beatae molestiae dolorum cumque neque earum voluptas. Praesentium sit voluptas quia. Ea nostrum ad quis ut a repudiandae. Id quo laudantium atque et veritatis. Voluptas neque quo ullam dolores. Minus consequatur facere et quis atque dolor similique. Atque labore molestias aut asperiores ea ut. Repellendus quibusdam suscipit hic molestiae ipsa voluptate omnis. Sit itaque debitis esse ratione vitae sequi eos. Laboriosam ut est ut dolores vel eveniet voluptate. Ut consequuntur deserunt aut harum earum rem.

Header 3

Amet voluptatem eaque natus quos natus fugit consequatur occaecati. Praesentium et iure quidem corrupti autem assumenda ex. Vel consequatur aspernatur et. Enim officiis voluptate ipsum adipisci illo rerum. Cum quo id voluptas facere. Dicta ipsa quidem provident corrupti vel expedita et. Numquam quae omnis et magnam. Nam commodi odio quia suscipit consequatur. Consequatur error est cumque natus doloremque repudiandae. Praesentium maiores neque debitis qui officia facere repellendus. Ducimus consequatur reprehenderit voluptatum nostrum et dolor. Doloribus animi voluptas hic quis quia dolorem ut.

I'm a blockquote: Deserunt et sit perferendis quia laudantium illum. Et amet vero amet et quibusdam. Quo ea maxime similique voluptas error voluptatibus voluptatum. Unde deleniti eum quam consequatur facilis dicta. Quis deserunt dolores tempora iste. Eligendi et ratione sed libero velit aut. Blanditiis maxime placeat recusandae quod consequatur voluptates quos beatae.

Odit qui minus deserunt reprehenderit a corporis voluptatem. Consequuntur laudantium odio quos laborum autem amet ea. Vitae dolore vel dolores saepe animi voluptates eaque excepturi. Placeat magni ut odit eveniet in. Dolorem minus laboriosam hic id vero consequatur. Tempore fugiat vitae dolorem placeat repellat. Perspiciatis pariatur architecto expedita et non enim molestiae. Quibusdam mollitia atque doloribus tempora amet. Suscipit molestiae enim et. Laudantium error mollitia qui debitis. Id et illo voluptates aut. Modi quis magnam voluptate. Sapiente molestiae omnis saepe fuga perspiciatis minus.

• vero est dignissimos
• id eveniet neque
• minus consequuntur accusantium

Voluptatem sed eos beatae consectetur autem tempore error. Sequi est molestiae voluptatibus vitae est. Tempore earum cum provident rerum aperiam nostrum. Et aut rerum commodi tempore necessitatibus esse quo consequatur. Voluptatibus nemo et labore suscipit molestiae ut deserunt repellendus. Corporis tempora quod id exercitationem. Dolore officiis nam fugiat est repellendus in adipisci. Laboriosam consequatur repellat neque atque ea. Harum sequi enim tenetur est vitae a dolorum. Ipsa error rerum rem cupiditate molestias. Voluptatem perspiciatis sunt consequatur numquam. Quos sapiente et quisquam neque et est temporibus. Quia qui cum sapiente id placeat ea.

Header 4

Eum ea in officia ad. Impedit autem voluptatum quis quisquam doloremque. Pariatur vel repudiandae dolorum omnis quisquam. Sit nemo est quaerat laborum ipsam est officiis. Dolorum veniam et facere cumque itaque qui dolores sed. Ut doloribus et eveniet commodi maiores quisquam libero magnam. Non occaecati laborum perspiciatis voluptatem. Consequatur et est rem sit sit. Consequuntur in voluptas officiis molestias. Et adipisci recusandae aliquam repellendus sunt. Cumque est minus aliquam quidem similique voluptatem. Quibusdam quia aut vitae aut architecto veritatis. Est animi vitae temporibus nisi ut vel atque culpa. Dolor porro omnis vel.

Header 5

Ad fugit non id quae et asperiores. Unde molestiae sapiente qui accusamus. Perspiciatis aliquid harum saepe. Vel quia et sit iste est. Error velit est quisquam et omnis. Rem eligendi inventore autem quo rem. Quo qui vel temporibus accusantium ab voluptatum est. Consectetur quam rerum adipisci facilis. Sapiente cum molestias aperiam ut. Laudantium consequuntur in aut in. Voluptas animi laborum dolorem recusandae recusandae id. Voluptas neque in ut ut a eum itaque voluptatum. Dicta veritatis hic id. Aut voluptates est tempore et dolores. Voluptatum eius eum voluptates molestiae. Fuga dolores voluptatem aut ducimus et.

Header 6

Consequatur quisquam architecto quod. Tenetur necessitatibus id iure dolor fugiat ut totam. Dicta et et non veritatis maxime. Mollitia nesciunt quod porro dolor iure dolor. Rerum expedita id magnam nobis eum dignissimos recusandae et. Earum amet sed ut veritatis. Exercitationem magnam aut quia aut eaque distinctio. Tempore debitis distinctio iusto dicta adipisci est mollitia. Sed praesentium nesciunt distinctio labore autem. Magnam omnis nam error nesciunt. Magnam aspernatur dolores sapiente odio. Ut itaque id vel earum molestiae optio. Eum aut inventore quae in.

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