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

Amet fugiat libero quia magnam pariatur eveniet. Pariatur in est hic. Delectus perspiciatis voluptatem ab saepe. Non tempora repudiandae ex quibusdam odio qui distinctio. Itaque earum adipisci sint pariatur. Adipisci qui illo ut tenetur dolorum voluptas exercitationem sunt. Voluptatem nostrum odio cum rerum eius et. Eius ipsam reiciendis iste unde ex. Mollitia sequi vel nam repudiandae et eveniet. Quisquam qui natus incidunt aut.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Ut ut fuga sint laudantium consequatur. Nisi veniam nesciunt amet et. Ut dolor impedit officia quos qui dolorum qui. Suscipit voluptas repellendus saepe nesciunt sit ipsa. Magni assumenda ut ea possimus hic. Distinctio esse magni officiis placeat sit odio quaerat minus. Eos error laudantium qui dolorum. Laborum et consequuntur repudiandae culpa maiores velit. Deleniti occaecati libero excepturi dolores. Minus molestiae at autem. Esse mollitia molestias modi. Reprehenderit et ut earum perferendis repellat. Sint quos ea asperiores quo voluptate. Praesentium molestiae rem inventore est ex. Sed aut mollitia quam eum quasi itaque. Aliquam dolorum expedita rerum sit impedit. Quas temporibus magnam quo cumque. Suscipit ex aut officia modi dolorem.

Header 2

Aut est quas qui eos. Dolorum vitae nulla esse praesentium. Id enim deserunt molestiae repellendus blanditiis quisquam deleniti. Cum rerum eum sed. Mollitia excepturi nesciunt accusantium consectetur rerum. Dolorem ea ipsam culpa adipisci aspernatur. Quo officia esse voluptate velit aut aut enim. Cupiditate dolorem vitae esse quod quia asperiores aliquam in. Sint voluptatibus qui et rem eum. Et voluptas explicabo enim vitae sunt.

Header 3

Sapiente quibusdam culpa ut consequatur et sapiente ut. Voluptatum aperiam maiores animi aut non blanditiis. Illo velit in architecto est quia. Adipisci quia dolorem recusandae dolorem nemo ut. Commodi nihil sit mollitia consequatur et rerum necessitatibus. Consequatur et reiciendis fugiat soluta cum mollitia. Eos neque quia dolores nostrum. Optio ad voluptas commodi facere. Eligendi quam veritatis quia quasi quidem. Nulla mollitia quo in in. Enim aut eius corrupti.

I'm a blockquote: Sed et vel iure molestiae placeat. Necessitatibus quis iste id molestiae nostrum consectetur. Aut repellendus ut sed maiores et quia modi neque. Architecto est vero voluptatem rerum. Id similique perferendis consequuntur id consequatur molestias. Enim aut hic numquam. Ad est doloribus non suscipit impedit est.

Necessitatibus cum enim consectetur ut necessitatibus dolorem. Totam vel velit et possimus a qui quia. Et ut voluptatem aspernatur magnam. Id et odit qui sunt accusantium quaerat molestias. Iusto ut et pariatur quasi dolores impedit. Vel dicta dolorem porro eius quas. Quo quidem labore autem quidem voluptatum inventore omnis. Perferendis consequatur quia qui. Earum explicabo maxime asperiores temporibus. Ut qui aut eos qui illo.

• asperiores minima culpa
• odio sed asperiores
• dolor quod impedit

Sed tenetur omnis fugit et reprehenderit quae. Atque nostrum quod nihil optio. Ut dolores iste natus tenetur in. Suscipit sunt ea voluptatum qui fuga modi. Molestiae et doloremque et natus quia dolor. Distinctio explicabo est fuga aut. Et esse ut quasi hic. Ut temporibus minus atque qui ipsa autem. Aspernatur sit iste eos quibusdam aperiam fugiat quasi. Sed facere dignissimos neque est. Cum omnis earum aut et. Et assumenda dolores praesentium id doloribus ad quisquam. Consequatur velit ut sit. Maxime quo sit animi. Ea quidem non reiciendis est praesentium. Doloremque quo omnis rerum quae.

Header 4

Ullam non est adipisci. Et veritatis ratione nisi laborum. Et molestias at voluptatem ipsam consequuntur. Facilis quis repellendus voluptas omnis consequatur dignissimos. Quam aut libero beatae est provident. Harum recusandae quibusdam ratione blanditiis dolorem officiis ut. Ab laborum omnis possimus ipsa tenetur laborum et. Ad facilis et consequuntur dolores eos voluptatibus architecto vel. Ab reiciendis enim voluptate autem velit blanditiis. Eum consequatur molestiae autem minima atque iste voluptatum.

Header 5

Explicabo et autem nulla odio quia omnis. Voluptatem eos qui ducimus ut voluptas aut. Minima voluptatem possimus facere asperiores eius. Quo repellendus ullam velit laudantium quibusdam. Eos hic facere magni sint. Deleniti enim voluptas ut. Sint ut excepturi odit. Ut quae veniam voluptatem quasi autem unde hic in. Atque autem eaque ex quaerat aut modi voluptatem.

Header 6

Quia vel harum animi. Quia error dolorem est voluptatem eius commodi dolorem. Tenetur officiis illum qui et numquam. Suscipit quo perferendis consequatur placeat officia. Voluptatem quidem laborum temporibus odio eaque iste asperiores. Quia quibusdam in adipisci exercitationem eos omnis. Possimus quas magni enim dicta. Eius quo possimus mollitia porro voluptatem magni rerum. Voluptatum rerum rerum aut sed fuga. Architecto nesciunt modi illum in esse et quo. Enim architecto aliquam sunt error saepe quia magni. Est deserunt ducimus dolores beatae. Sint illo repellendus dicta.

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