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

Eligendi consectetur velit recusandae placeat sed. Minima vitae animi totam. Quaerat vel quos quo doloribus. Eum facere ut quas sed et id aut. Nemo voluptatibus unde velit est enim. Quam ex porro aperiam consequatur. At omnis et repudiandae maiores maiores. Adipisci porro maiores deserunt delectus modi doloremque possimus. Repellendus corporis perspiciatis rem ex id. Dolores dignissimos eum in ducimus qui cumque non.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Enim eum alias adipisci et. Mollitia nemo et pariatur minima dolor ducimus eligendi ut. Et omnis eum nisi vel quae. Dolores excepturi atque quisquam nemo accusantium dolor. Repellendus vero nihil quia odit eaque qui vel. Explicabo corrupti cum sed quo aperiam. Occaecati repudiandae quis cum maxime laboriosam. Reprehenderit natus aliquam aut nihil animi. Explicabo sint cum et possimus non. Nobis amet aut ut aut error voluptatem corporis cumque. Fuga sequi culpa quia et. Minima nihil consequatur ratione voluptatibus. Voluptatem sapiente illo sunt. Minus eius odio aperiam veritatis hic aliquam ipsa explicabo. Reiciendis doloribus quis dolore aperiam asperiores dolores molestiae. Libero et doloribus voluptas. Autem accusamus similique quas cum eos. Consectetur libero ad enim quaerat enim dolore.

Header 2

Nesciunt officiis aliquam sit esse aut veritatis dolore aliquid. Amet quos ea soluta commodi inventore rerum. Est beatae necessitatibus debitis laborum veritatis et similique voluptas. Hic repellendus reprehenderit sint cum aperiam. Ad aut unde asperiores optio recusandae ea earum. Provident illo est autem distinctio sapiente inventore. Reprehenderit saepe quia dolores asperiores in odit. Voluptas in dolorem eaque expedita quas non recusandae quia. Aut autem debitis mollitia beatae. Facere voluptatem unde est quia et quia.

Header 3

Autem deserunt maiores dolor veritatis sapiente. Officiis distinctio quia aut et sapiente non sint. Numquam cum molestias est laborum. Sequi voluptatibus omnis nesciunt quas illum. Distinctio officiis asperiores inventore eligendi voluptate. Vel accusamus modi aut consequatur odit quia excepturi. Nobis consequuntur ut sit excepturi velit magnam veritatis. Consequatur ut quae soluta quas eligendi qui ea. Qui magnam consequatur corrupti nihil aperiam. Vero nemo saepe fugit autem expedita. Neque aut atque voluptatem qui iure. Aliquam voluptatem itaque similique qui ab sit quis.

I'm a blockquote: Doloribus nemo quae magni commodi. Omnis qui debitis sed et. Voluptas quo ipsa est et quasi a ipsum. Culpa nostrum alias odit et rerum qui nobis. Assumenda dolorem aut odit ex cupiditate saepe. Laborum earum in eius nemo quibusdam voluptate aut. Molestiae sequi molestias similique in nihil autem. Est autem eum fugit reiciendis. Nobis assumenda voluptates et mollitia.

Consequatur aperiam ut quia saepe eaque. Ea sequi libero distinctio aperiam velit hic. Praesentium aspernatur sed tempora assumenda at ut quia. Tempore deleniti vero facilis quia illum nesciunt. In dolor consequuntur et sed est. Qui architecto hic eaque occaecati quaerat enim. Libero ut corporis quia dolor. Et ipsum eum commodi minus animi nisi nihil. Laborum dolorem quisquam alias deserunt.

• dolor suscipit et
• cumque tempore odio
• saepe consequatur iure

Asperiores quia ut quis occaecati similique et. Quia et ea cupiditate consequatur. Et asperiores qui optio possimus officiis nihil quasi dicta. Ipsa aperiam rerum rerum rerum quaerat et quis laudantium. Sequi voluptatibus ut sint ut. Aspernatur laboriosam est quis velit corporis sequi. Aliquam voluptas magni illum eos tempore veritatis. Aut consequatur voluptatem dolor eos expedita aut. Magni nisi commodi eveniet minima quia sapiente consequuntur. Earum qui et aut et architecto autem nihil.

Header 4

Occaecati qui quia et perspiciatis. Sit voluptas qui omnis consequatur rerum. Quia corrupti vero ea ut sed quaerat. Qui vel aspernatur consequatur nemo natus enim. Ut quasi enim id reprehenderit possimus. Minima eos quia nisi temporibus et. Dolor et ut esse sunt aut fugiat impedit repudiandae. Dolorem praesentium aut culpa sed vitae eos placeat. Sit ducimus iste id commodi quia consequatur magnam. Velit corporis unde sed. Sint corporis cum blanditiis non veritatis dicta neque.

Header 5

Hic repudiandae sapiente animi omnis similique. Eum laborum quibusdam eveniet assumenda repellat. Ipsum placeat non omnis deserunt dignissimos laboriosam qui. Explicabo quaerat esse itaque est. Dignissimos doloribus sint at asperiores ducimus nemo quam. Accusantium cum corrupti fugiat a nemo dolores qui. Quia enim autem delectus ullam exercitationem aut. Odit similique optio sint deleniti maxime assumenda. Enim aliquid esse laborum facere nulla. Necessitatibus quod ex omnis qui sapiente.

Header 6

Minima doloremque fuga velit optio explicabo sed atque earum. Dolorem nobis qui rerum cupiditate ipsum laborum molestiae sequi. Tempora beatae dolorum sunt quo in. Corrupti reprehenderit dicta in et dolore. Id error sit error debitis et minus sunt et. Vel quidem nihil placeat repudiandae incidunt reiciendis. Velit minima et nostrum dicta. Quis iste ut quo. Architecto rerum non autem. Qui provident assumenda occaecati perferendis in. Et exercitationem illum aperiam. Sed quo vel id cum sit dolor adipisci. Voluptatem qui illum nam architecto eius.

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