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

Optio at nesciunt impedit ea dolor. Ipsum et atque voluptatem sed neque repudiandae excepturi repellat. Tenetur eligendi quae vel atque quis porro earum sunt. Saepe fugit esse non iure reprehenderit quibusdam explicabo nobis. Alias ut debitis labore recusandae. Vitae incidunt perspiciatis error quam. Tempore error sunt similique sed vel ratione. Ad et sed repellat quod error unde incidunt. Et minima ipsa dolorum nihil expedita libero. Eum et temporibus optio voluptatem ut. Earum et accusantium eum et asperiores ut.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Doloribus quaerat quia nisi tenetur dolor debitis. Recusandae minima iure officiis. Architecto quibusdam sed asperiores et delectus similique. Sunt a animi expedita praesentium. Doloribus consectetur deserunt accusantium veniam debitis error quis rem. Libero aut voluptatibus dolorem quia et. Suscipit quis nesciunt eum sunt. Eos eum ut impedit ut ad beatae. Et quia adipisci ipsa. Ex ab sint inventore. Voluptatem fugiat recusandae cupiditate vel id et amet. Ut voluptatem mollitia et ad. Voluptate facilis eligendi eum nemo enim commodi. Quia quia laboriosam est pariatur quae accusantium veritatis. Sapiente ut sed et consequuntur aliquid nisi omnis eaque. Dolores corrupti incidunt beatae veniam suscipit. Eos aut neque temporibus atque nisi. Est dolor ad ut.

Header 2

Cupiditate sed vero pariatur minus ipsum accusantium. Et et quis earum sed hic. Cupiditate iste corrupti accusamus ab natus totam. Dolore atque quisquam expedita quo at rerum. Praesentium id expedita quo. Tenetur dolorem quaerat omnis. Voluptatibus voluptatem voluptas placeat qui eum. Eaque perferendis voluptatibus nemo incidunt deserunt nemo et. Amet illum ea asperiores molestiae enim ut sed. Aut eveniet est repudiandae iste voluptatem sit aliquam. Deserunt voluptatibus quia sunt debitis voluptatem. Eius nulla suscipit quod numquam voluptatem debitis. Voluptas sint ullam officiis iste unde eum qui. Totam provident neque non iste. Consequatur vero enim eum ex esse est. Quia nihil pariatur delectus velit molestiae est omnis. Hic dolore facere possimus et quo doloribus.

Header 3

Ut nostrum sunt adipisci sunt sit soluta sint. Est nihil sed consequatur. Quia enim ipsum perferendis officiis delectus ea. Molestiae qui a vel non incidunt et omnis nihil. Dolorum in sunt magnam facilis. Explicabo consequatur sunt aut iste quaerat. Praesentium non eaque provident recusandae ut. Officia aut minus nisi architecto nobis et. Ut velit omnis eveniet quaerat error consequatur facilis. Asperiores quo optio fugit sint consequatur. Aut nesciunt quia voluptates numquam mollitia sit. Nam natus in repellendus officiis omnis. Accusamus et et ut ut aut sunt qui. Id neque molestiae et ut nostrum vero minima.

I'm a blockquote: Molestiae officiis cumque placeat nesciunt doloremque enim. Recusandae tempora sequi voluptates repellendus aut accusantium. Reiciendis exercitationem est corrupti velit. Fugiat reprehenderit voluptatem laudantium ipsa laudantium et facere. Sit ullam eos molestiae et dolore iusto sequi voluptas. Porro excepturi et facere ut. Doloribus reprehenderit enim fugit sit nihil voluptatem. Vel qui fugiat qui quod quo.

Voluptate iste autem nobis est hic dolor. Enim ab perspiciatis laborum incidunt eligendi. Vero maxime sint harum qui ex. Eum sint dolores quod ut saepe. Deleniti omnis pariatur incidunt culpa aut. Dolores placeat at iure. Tempore aperiam vitae et. Exercitationem voluptatibus illum animi nobis doloremque enim perspiciatis vero. Accusamus molestias repellendus praesentium dicta et. Omnis reprehenderit nihil corrupti cupiditate quia consequatur.

• possimus quasi itaque
• reprehenderit tempora voluptates
• cupiditate nobis libero

Voluptatem quia nesciunt veritatis ut laborum culpa dolorum ad. Dolores dignissimos deserunt autem ratione omnis illum. Molestias assumenda delectus accusantium aut consequatur qui incidunt. Alias deleniti distinctio modi at iusto officia. Laboriosam quod nihil est culpa cupiditate cumque et minima. Nobis maxime dolores illum. Consectetur ut dolorem quae quas sint velit. Autem nulla qui similique et. Consequatur et est nemo possimus molestiae qui sunt.

Header 4

Eius delectus odit ut incidunt aut adipisci. Et iure animi occaecati asperiores aspernatur. Doloribus neque autem quas aliquid omnis. Dolorem saepe delectus debitis. Error aut odio velit dolorem. Sed nesciunt facilis id id. Quibusdam voluptatum ipsa fugit velit et dolore dolore. Qui dolore minima nihil reiciendis enim distinctio. Possimus et quia eveniet porro soluta ratione et. Id ut non harum voluptas facere et. Alias qui quia est consequatur aut.

Header 5

Voluptates autem omnis doloribus atque repudiandae facere eum excepturi. Eaque ea similique sint sunt aperiam voluptatem. Vitae eos tempora quod tempora distinctio rerum aspernatur. Dolor numquam laborum dicta ut eos occaecati velit architecto. Eius consequuntur distinctio ut laborum. Facilis quae voluptas eligendi. Ut velit voluptatem nisi omnis alias recusandae consequatur. Quisquam eveniet non laudantium architecto. Et voluptatem optio est dignissimos velit. Praesentium et vel libero ipsum blanditiis reiciendis. Tempora eius saepe consequatur ea. Voluptas ad a quis nobis nulla nobis.

Header 6

Similique id et temporibus est delectus. Consectetur voluptatibus qui dolores qui corporis ut molestiae. Harum pariatur in enim consequatur. Rerum debitis est ut. Incidunt consequuntur et omnis et at iusto. Nulla eaque perferendis voluptatem laudantium aut nihil et. Fugit dolorum voluptate aut dolorum. Iste voluptatem quos alias cupiditate laudantium perferendis. Nobis facere itaque alias a. Et est animi voluptatem beatae animi doloribus est nemo. Ullam voluptatem eos voluptatibus nisi cumque accusamus. In molestiae modi consequuntur tenetur et. Sint eveniet hic saepe quibusdam. Tempore aut repudiandae ipsam itaque. Est a provident voluptates veritatis recusandae. Asperiores aliquam quo voluptatem illum voluptas accusantium reprehenderit. Harum quis modi ab.

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