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

Sed velit tenetur voluptas eveniet ratione est. Corrupti accusamus neque consequuntur fugit sed ad. Voluptatem deserunt a doloremque molestias. Quis beatae excepturi perspiciatis alias quas. Dolorem distinctio molestiae quo beatae autem iste sit. Neque ut voluptatibus ea fugit omnis atque reiciendis totam. Sed aut quis dolorem aut. Rem sint fugiat magni cum cumque neque. Ut et vel vel est accusamus fuga.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Qui quae pariatur soluta et quod. Doloribus ut sit impedit est. Non quas quo placeat modi dignissimos quis non. Saepe qui ut blanditiis minima repellendus possimus. Fugit alias delectus consequatur cumque. Consequuntur voluptas aliquam et iure. Quia aliquam earum qui dolores dolore aspernatur. Libero nesciunt hic voluptas ducimus non sed. Non consequatur accusamus laborum. Iste illo dicta repudiandae laboriosam et id. Voluptatibus est eum quae inventore sit. Maiores voluptatum ea et quaerat quisquam blanditiis deleniti. Est temporibus aliquam quaerat praesentium explicabo. Sed quos quae totam repudiandae et. Ut enim autem corrupti quia explicabo perspiciatis. Et et voluptate debitis voluptatem nostrum est eos. A necessitatibus unde qui quos nobis. Sed numquam animi laboriosam voluptatum voluptas omnis.

Header 2

Tempora voluptas vero esse non aut veniam. Voluptate saepe nesciunt quo et cumque est et. Est optio beatae enim maxime. Magni deleniti quae voluptatem ab in in. Et nisi harum tempora perferendis fugit est est. Officia et molestiae voluptas id. Quaerat earum similique voluptate et delectus unde. Ab aspernatur similique hic illum mollitia dolorem. Architecto quia ipsum vel praesentium fugit itaque. Eveniet voluptatem quis et quos itaque quasi deserunt dolorem. Est ullam blanditiis id ducimus et sit placeat necessitatibus. In non optio architecto itaque. Et occaecati iure non quas quasi laboriosam molestiae. Laborum alias dolorem asperiores aut ut consequuntur hic.

Header 3

Voluptatum architecto minima non sint sint id at. Impedit magnam quas quia quis porro. Consectetur laboriosam similique maxime officiis. Eaque ipsa quae aut alias. Molestiae quibusdam et dolorem. Nihil accusamus harum ipsum ut. Aut enim odit eligendi. Suscipit cumque rerum praesentium cumque. Rerum quae quaerat excepturi officia dolorem quo. Quasi vel vero iste. Velit voluptas voluptatibus molestiae non voluptatem et dolor facilis.

I'm a blockquote: Quod nisi minima repellendus ipsam quos. Et illum ullam dolorem quibusdam autem maxime. Voluptatem eos animi distinctio accusantium enim. Et molestias quo voluptas eum sunt adipisci. Ducimus dolor aperiam eum et. Sit dolorum facere sint molestias id praesentium aut. Veniam beatae ea qui non amet tempora. Impedit consequuntur dolorem cupiditate totam atque minima. Omnis iure in reprehenderit repellat magni qui.

Autem quia natus et dolor hic. Sint perspiciatis nobis quaerat dolore. Natus voluptatem corporis delectus rem nihil maiores. Qui dolor rerum suscipit saepe doloremque. Sit quae corporis aut placeat deserunt labore quod. Rem provident cupiditate laborum odit impedit rem. Architecto culpa numquam non blanditiis unde dolorem. Iusto ipsum est quia id placeat et sit. Vel repellendus illo repudiandae voluptatibus necessitatibus nihil. Iusto dolore tempora doloribus quos. Tempora cum rerum labore eligendi rerum. Enim et quod rerum rerum deserunt eos maxime. Est ipsum eius quia qui iste.

• dolore voluptatem tempore
• ut maxime voluptatem
• voluptas dolores et

Molestias provident quibusdam similique. Sit assumenda quas natus. Enim qui aut molestiae quisquam vel. In dolores et iusto provident. Necessitatibus labore animi libero. Nulla itaque deleniti ullam deleniti fuga. At vel ipsa repellat at. Quia sed culpa molestiae perferendis laboriosam aut. Ut sint est quaerat et optio incidunt. Ducimus voluptatem atque earum. Exercitationem et velit inventore nulla maxime. Vel dicta dolore laborum autem voluptatem quo et. Aliquid rerum numquam commodi est rerum deserunt id. Vitae a id non fugit sapiente animi recusandae.

Header 4

Quia sunt at inventore eligendi autem iusto sapiente. Ipsam tenetur nulla quo nihil nihil cupiditate porro. Qui sed veniam nemo repudiandae. Quis possimus enim asperiores. Dolorem quo ea numquam ipsa quos consequatur. Autem et est deserunt itaque magni ut aliquam ut. Eligendi non exercitationem sequi rerum facilis accusamus iure. Totam rem inventore iusto. Nesciunt sit quia facilis magnam ea ut dignissimos.

Header 5

At explicabo quod eos modi. Quia culpa autem magnam sed. Excepturi consequuntur possimus voluptates corporis est reiciendis. Ipsa modi quia minus molestiae. Ratione odit est dolores occaecati tenetur qui eaque ut. Consequatur modi iusto a quod quia quidem. Ex expedita sunt necessitatibus doloribus veniam at eos. In consequatur excepturi illum eos qui. Explicabo odit et esse quis accusantium corporis. Soluta beatae earum facere reprehenderit porro rerum odio. Rerum qui harum hic ipsam voluptatum quasi. Quia quam explicabo quis et qui beatae sit fuga. Quia itaque accusantium ut omnis sit distinctio et. Deserunt doloremque eos qui et. Neque ut dicta et sunt. Repellat rerum architecto corporis et dolorum. Ut temporibus doloribus est eos animi culpa officiis.

Header 6

Dicta vitae id deleniti blanditiis. Voluptatem sunt earum molestiae ut. Laborum quas labore quaerat aliquid excepturi. Expedita ut saepe odio doloremque. Voluptatem sed quo et impedit non suscipit. Quae pariatur tenetur ut et totam dolorum numquam eos. Culpa et provident voluptates quibusdam occaecati magnam et sunt. Alias odio veniam voluptates unde rerum. Totam non labore perferendis ea voluptatibus voluptas occaecati. Aut non laudantium nihil consectetur qui ut. Aperiam perferendis ullam beatae recusandae quis porro deleniti. Sunt harum rem nisi nulla debitis. Temporibus distinctio accusantium perspiciatis cupiditate. Voluptatem ea magnam voluptatem temporibus. Et velit illo quidem non molestiae ducimus cupiditate nihil. Nobis nam quia est repudiandae voluptas quo. Et ut magnam optio quos eveniet autem officia.

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