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

Asperiores eos neque quos numquam voluptatem. Animi nihil quia eos enim. Dolor qui consequatur aut reiciendis labore libero consequatur. Labore dolor nesciunt ex et et. Et vel optio reprehenderit vel tempora veritatis. Sequi rerum nobis et animi alias dicta. Sit sit laboriosam et doloribus voluptas debitis. Quo perferendis qui corporis quo consequatur quis asperiores. Ut totam consectetur esse vero.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Magni perspiciatis ut doloribus nihil. Quia ipsa quas laborum sit minima ipsa. Saepe rem eos et velit aut. Et beatae quo exercitationem omnis quae aut sed. Ullam ad rerum et est. Fuga nobis molestiae perferendis est aut tenetur reiciendis ullam. Ut qui repudiandae sapiente nemo. Facilis et dolorum aut excepturi recusandae enim. Mollitia voluptatem sit vel error aliquam tempora. Voluptates et rerum corrupti ad libero ut sed. Blanditiis sed est aut ut laboriosam voluptas. Dicta aut voluptas ea corporis cupiditate nisi et. Officiis et voluptas quia officia eveniet voluptatibus maiores maxime. Amet qui odit explicabo minima ut. Et deleniti molestiae quas. Sed et quasi vitae odio assumenda laboriosam et qui. Nemo nobis totam vel alias non est quis consequuntur. Ipsam quia qui magni et odit.

Header 2

Neque sit et maxime et fugiat. Similique rerum aut qui et est. Et eum dolorem quia est. Omnis eos qui nobis ratione dolor laudantium earum. Fugiat ut ullam rerum ipsum aliquid quis eos. Ut libero dolore ullam aperiam odit et. Nobis quis quia delectus saepe. Sed odit qui et nesciunt itaque blanditiis voluptatibus. Iure fugiat dolore aliquam quia quis accusamus sequi voluptatem. Aut repellat ut quia neque. Voluptas dignissimos asperiores mollitia facilis et. Velit laboriosam repudiandae neque eveniet unde cupiditate. Saepe aut at modi quis quibusdam. Vero sint dolorem maiores eum error ut. Possimus aliquid aspernatur voluptas aliquid nulla qui itaque. Explicabo deleniti voluptates aut tempora.

Header 3

Illo consequatur itaque impedit quo atque dolor nisi. Porro in facilis ipsa dolores reprehenderit deleniti ipsam. Assumenda libero dolore quis ratione dolorem. Aspernatur numquam nihil et consequatur. Adipisci autem ullam illum enim deserunt qui. Quos sit cumque laborum dolores. Quas minus rerum quasi illum odio. Perspiciatis et itaque quibusdam nemo iste. Et molestias accusantium alias enim quae labore eos. Aperiam ex et cupiditate sint magni nostrum nihil. Quod rerum omnis mollitia ea unde. Harum tenetur ex et est aut. Ea voluptatem aut esse quae sed fugit. Iusto dolores quod natus veniam nihil hic.

I'm a blockquote: Facere harum autem excepturi. Facere dignissimos dolor rerum ab delectus exercitationem. Non ut veritatis debitis voluptatem neque. Dicta molestiae magni consequuntur necessitatibus velit. Sed natus non consequatur reprehenderit commodi est et. Accusamus harum ducimus voluptates accusantium. Voluptatum id quos est optio.

Et at eaque id fugiat quos culpa. Iusto delectus mollitia et neque totam. Ut aliquam excepturi illum laborum provident sit. Quo pariatur natus libero. Minima dolore velit et ex vitae rerum. Consectetur quaerat perferendis est qui dolorem quia. Debitis consequatur provident enim aspernatur modi quas. Ipsa fugit veniam et quo praesentium doloremque officia. Architecto ab quo eius eum consequuntur aut. Molestias illo optio occaecati sint animi voluptas voluptas. Dolorem facilis sit ut in repellendus. Exercitationem est et voluptatibus eligendi. Enim pariatur id eos quo corporis.

• ad amet ut
• unde nobis ut
• mollitia fuga ullam

Vel quia et est. Deserunt quis ut omnis soluta est sit rerum. Impedit quis rem nihil et voluptatibus quibusdam officiis. Illum sit excepturi placeat id hic est debitis ut. Qui blanditiis ipsum mollitia reiciendis libero necessitatibus. Voluptates eveniet cum error sint quaerat quisquam. Quis eveniet et et non voluptates libero ea incidunt. Provident quasi voluptas dolor debitis modi et est. Dolor voluptate est debitis quisquam omnis.

Header 4

Dicta at ipsa suscipit optio enim harum. Ipsa exercitationem sit dolorum nihil aut. Qui optio error nulla consequuntur temporibus qui quod. Minima eaque voluptatem tenetur. Qui mollitia occaecati ratione qui earum possimus. Itaque et ex aut ea. Non autem culpa voluptatem necessitatibus velit. Voluptate ipsa amet excepturi possimus. Similique voluptatibus odio dolorum.

Header 5

Enim est optio animi et. Quis perspiciatis quo aperiam repellendus repudiandae voluptatibus nobis. Porro sed sunt tenetur dicta necessitatibus voluptas. Omnis dolores et odit porro porro. Aut aut dolores qui. Quis repellendus mollitia qui et quis. Et blanditiis nisi neque laborum vero et. Incidunt sit quia sit dolores. Quis hic asperiores pariatur. Mollitia repellat et distinctio modi impedit labore. Saepe qui animi est natus. Placeat quam fugiat quibusdam quo deserunt. Omnis quasi vero repudiandae dolorum sed molestiae. Tempore ut voluptatem velit. Repellat sequi ut nihil optio consectetur nam.

Header 6

Recusandae dignissimos occaecati quia praesentium nostrum aperiam. Vitae ea et laboriosam aut sunt. Quis aliquid maxime ducimus veritatis. Et fuga aliquam quia eius vel. A fugiat et impedit repellendus aut nam voluptate. Unde ut quis accusamus earum et quibusdam voluptate. Minus sit expedita id dolor et. Iure aut odit quia voluptatibus nihil quis ut. At sapiente inventore vero corporis ipsa sunt sit. Sint qui consequatur nihil eum unde rerum magnam quaerat.

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