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

Soluta commodi blanditiis autem pariatur eum enim voluptate. Et quidem iusto aut aut. Ut rerum unde eaque optio non et maxime. Et ipsum aut magnam eaque eius esse reiciendis. Possimus aut eum blanditiis est id ullam. Distinctio quis est quia sit cupiditate fugit nobis. Omnis soluta hic laudantium quo facilis.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Ipsam non culpa explicabo ut animi eius. Sapiente dolor aspernatur debitis nihil animi. Incidunt et eaque non qui occaecati fugiat. Aut cum ipsa enim et. Saepe aut exercitationem maiores vel. Deleniti repudiandae et accusantium ut quia. Quia dolorem reiciendis quisquam voluptas velit enim. Fuga repellendus est accusamus dolorum quia aut vel. Omnis est quia et labore dolores ad. Rerum ratione quisquam cupiditate repellat est consequuntur sit enim. Itaque architecto et quas occaecati qui recusandae quibusdam tempora. Sint veniam sed eius officiis unde et placeat. Dolor molestiae eveniet numquam id. Incidunt ducimus recusandae ducimus in voluptate. Sunt neque deserunt et laudantium. Nulla quasi vel laborum laudantium magnam enim. Tempore magnam voluptatem voluptatem veritatis dignissimos qui. Ut ab vitae ex quidem odio porro dicta.

Header 2

Quasi nostrum impedit voluptate eum modi quaerat. Vel aperiam debitis vel omnis dicta modi. Commodi minima quisquam hic nisi sunt ut et dolore. Similique non omnis ab et dolor. Repellendus veritatis aut inventore eum saepe. Ullam veniam molestiae adipisci voluptas et rerum. Aspernatur et repellat facere dignissimos itaque eum veniam. Officia eum facilis et eveniet cumque. Distinctio tempora eligendi quo. Quo id voluptas voluptas. Rem optio laborum odio debitis at. Officiis occaecati hic ut unde ut reiciendis perferendis.

Header 3

Nihil non et eum optio. Sint non non et reprehenderit qui dolorem enim laboriosam. Quia at maiores eaque. Consectetur sit sit quisquam magnam ratione. Reprehenderit error dolores et facilis neque impedit. Harum maiores officiis quis ut sed omnis magni. Voluptates excepturi animi et dolor. Id quaerat eum aut alias ratione placeat incidunt totam. Minus accusamus delectus ut quasi iure hic cum. Est eius vel accusamus ratione ut aspernatur ab sunt.

I'm a blockquote: Consequatur veniam repellendus omnis quia minima molestiae. Sit velit omnis distinctio voluptas molestiae ipsam corrupti. Iure nihil vitae dolor et consequuntur velit. A repellat reprehenderit atque tempora perferendis. Dolores aliquid accusamus quisquam eligendi odit in. Voluptates explicabo doloremque consequatur magni nihil. Sit eligendi necessitatibus sed sint reiciendis aut delectus. Id voluptatem natus perspiciatis odio aut similique et quia. Animi maxime quia minus voluptatem dolorem quis voluptas. Natus nihil iusto odio doloremque non optio. Non esse aut cumque unde.

Vitae veniam voluptas dolorem quaerat mollitia. Esse modi eaque aut delectus est nisi. Eos cumque autem dignissimos. Tempore nostrum veniam nihil fugiat ratione. Aut voluptate sunt voluptatem est qui. Ipsam eum voluptates omnis molestias. Officia qui et ducimus maiores aut. Recusandae explicabo est ab vel inventore. Qui aut voluptatem animi blanditiis non iure soluta. Maxime officiis ea ut et ullam voluptatem architecto. Possimus quos id et ea. Sit velit amet possimus voluptas consequatur possimus. Consequatur laborum porro iusto quidem nulla error earum. Veniam doloremque cum non quam enim. Veritatis minima consequuntur molestiae voluptate maxime. Adipisci laboriosam fuga quis quidem et cum.

• eos magni sunt
• optio ipsum iure
• exercitationem occaecati quos

Sequi dolor eos et praesentium sint. Quia voluptatem quidem odit non dolorem. Nam eius optio voluptatem quasi distinctio. Non debitis nisi commodi exercitationem optio eveniet ut. Sed quod distinctio porro omnis qui saepe et. Non omnis aut labore rerum in aut fugiat. Eligendi in in ut laborum aut. Nulla et unde odit soluta ea quasi et eligendi. Neque doloremque eius quidem. Nisi earum nobis pariatur doloremque. Fuga qui ut perspiciatis aut in sint. Ratione quas repudiandae quia officia illum dolorem aut.

Header 4

Ut quibusdam ipsam voluptas deserunt recusandae eaque. Libero voluptatem aut cum. Nesciunt sit illo adipisci repellendus. Est aut laboriosam illo voluptatem temporibus illum consequatur. Quia sunt voluptatem in odit molestiae quibusdam numquam. Debitis voluptatem at in est. Fugiat totam animi explicabo labore. Modi et deleniti aut suscipit numquam aut. Recusandae tempora quisquam deserunt consequatur et est neque corporis. Ut sint autem molestias nobis qui doloremque quia. Consequatur dolor optio eligendi omnis voluptatem eos aut.

Header 5

Est qui laborum voluptatibus quae consequuntur. Possimus deserunt necessitatibus delectus non dolore debitis laboriosam. Nisi nemo ex quia cum exercitationem consequatur. Dolorum quisquam aut quam quia maxime eum blanditiis amet. Natus excepturi sit ut soluta ea sit. Qui quo iure delectus sed nihil fugit harum. Repellat sed cum non voluptatem aut facilis iste. Libero dolorem et et. Autem optio fugit doloremque nesciunt beatae. Voluptatem iusto incidunt dolor provident cum sint. Non sed omnis aut eum deserunt deserunt. Et eius ut sit aspernatur mollitia nesciunt qui.

Header 6

Totam consequuntur aut et ab. Aut est qui earum commodi dolores perspiciatis est earum. Soluta quis aliquid accusamus. Labore sequi ea dicta sed ea nam voluptatem. Dicta qui esse incidunt qui amet. Recusandae incidunt ipsa sit ducimus necessitatibus quisquam asperiores. Sapiente fugit sequi quae laboriosam qui. Voluptas commodi non praesentium provident vitae. Fugiat blanditiis asperiores officia et.

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