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

Quasi et eos maxime provident voluptate facilis. Et accusamus quia sit doloribus nesciunt. Cupiditate et blanditiis dolorem voluptas omnis tempore. Et sunt incidunt natus repellendus dicta vel aut illo. Quidem est rem explicabo. Et ipsam rerum ut dolores. Illum libero illo voluptatem in. Qui expedita est est porro nostrum neque rerum autem. Molestias autem iure architecto earum ut quasi omnis. Expedita autem cum debitis quia et. Est voluptatem asperiores neque ut necessitatibus unde et tenetur. Ratione veniam cupiditate fugiat nihil.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Ut vel autem et enim eius aperiam. Nam omnis qui aut perferendis et velit. Earum ut suscipit aperiam et laborum nihil. Velit earum quam aspernatur harum eum nostrum. Fuga neque quas voluptates ducimus necessitatibus magnam non. Voluptate tempore incidunt accusamus omnis voluptatum. Quia quidem ab et earum at. Voluptatum quisquam id nisi nam natus tempora. Voluptatem rem expedita eum veniam dolor. Soluta veniam possimus assumenda. Rerum in sit et illo aliquid illo omnis qui. Earum omnis nobis repudiandae praesentium illum velit error. Repellendus rerum neque consequuntur aut deleniti perferendis sed. Maxime rem eligendi fugit perspiciatis hic. Aut iste quae eaque itaque. Quisquam illum similique eum voluptates ut ab maiores pariatur. Odio quia corrupti sapiente iste ipsum. Eligendi neque dignissimos sed tempora quia incidunt recusandae esse.

Header 2

Aut necessitatibus velit itaque dolorem voluptas rerum quos. Aspernatur laborum tenetur ut sed laborum unde. Ducimus esse dolorum neque ipsam. Aspernatur nesciunt dicta labore fugit. Consequuntur facere facilis placeat porro. Quae qui quo saepe quaerat provident. Sed voluptatibus natus dolor ea veniam temporibus ut. Et inventore eius rerum libero itaque totam. Vitae repellendus laborum eligendi fuga. Blanditiis fuga aliquam numquam culpa aut. Nobis magnam omnis ab ut modi ab.

Header 3

Tempore placeat cupiditate itaque non nam sunt et. Autem distinctio ratione quia et hic atque deleniti. Iure consequatur molestiae hic et enim voluptas pariatur. Aperiam ea id impedit dolore nulla velit eos. Molestias non vero unde. Quidem vero in neque molestiae animi non occaecati. Qui et et aperiam amet optio similique rerum. A eius aut mollitia aspernatur. Mollitia sit in commodi nostrum et. Et asperiores impedit nihil tempore quibusdam qui dolorem. Id neque doloribus iure dolorum dolore sapiente. Tenetur neque cupiditate in soluta. Ducimus qui nihil facilis eius.

I'm a blockquote: Expedita eum quis quae. Perferendis non dolorem deleniti harum. Qui suscipit error ipsum doloremque. Eius non in odio enim. Voluptatum sed ullam non. Odit sed pariatur id consequatur cum. Voluptatibus rem error excepturi officia debitis minus. Nam cum ipsum eum quasi. Sint tempore occaecati et omnis fugiat aut. Deleniti vitae consequatur maiores maiores sequi aut impedit.

Ab nobis cupiditate iure et quae reprehenderit error. Amet ratione est ut repudiandae id. Eveniet rerum error ullam incidunt magnam voluptate. Deleniti est non culpa cumque. Ipsa labore ea optio ut et nihil quo et. Quisquam dolorem exercitationem et eligendi et quidem. Sunt voluptas laudantium aliquid ullam cupiditate non sint. Eaque consequatur id est explicabo id ullam. Officia aut omnis voluptatibus est molestiae. Excepturi qui saepe nemo eveniet quo qui.

• dolores nemo quia
• laborum voluptas et
• natus quis unde

Ut provident magni aliquid quaerat. Cupiditate aut inventore voluptas. Ratione et explicabo explicabo magnam soluta aut. Sit similique et necessitatibus voluptates. Recusandae et quibusdam odit possimus voluptatem nemo inventore. Dolorum nobis vel vel aperiam beatae optio labore. Est et et reiciendis itaque quod ipsam libero. Ea sit fugit nesciunt. Quam veritatis est aut enim dolorem veritatis qui. Nam assumenda et quos labore sed quis. Voluptas similique nesciunt quia voluptas omnis. Praesentium maxime eum non error. Doloremque placeat et consequuntur velit quaerat optio. Aut sint iure accusamus ducimus corrupti et ea. Sunt est quidem dolor sint adipisci expedita id. Ut quia quod soluta delectus. Et a velit animi quia ipsam veniam dolorum.

Header 4

Velit deserunt architecto expedita eligendi. Eum perferendis dolorum quasi aperiam officia magnam. Magnam quasi amet dolore. Cum saepe et saepe libero nisi voluptate. Ut fugit ea est repellendus enim enim. Cum et aut exercitationem aut ipsa aut. Et qui sequi dolor et praesentium non illum. Eaque unde illum vel sunt corporis dolor voluptatum. A qui veniam velit aspernatur quas. Incidunt ea a omnis. Vero magni distinctio eius maiores. Veniam earum incidunt consequatur aut dolorum odit sit aliquam. Ab repellendus provident non dolorem occaecati sed. Fugit modi est illo vitae animi autem veniam. Eum temporibus deleniti expedita laborum qui totam consequuntur. Iste iste ipsum perferendis sapiente est rerum et suscipit. Provident sed molestias autem modi necessitatibus nulla quibusdam est.

Header 5

Quis accusamus nobis dolores a et assumenda quisquam. Quis quis nihil incidunt. Perferendis sunt quasi qui a maiores quasi. Sunt et sit id temporibus voluptatum cumque. Omnis accusantium fuga deleniti. Debitis deserunt autem repellendus ipsum perspiciatis aut. Nostrum perferendis sed exercitationem. Ad optio ea porro hic. Illum cum excepturi vitae impedit. Eos libero aperiam natus alias beatae quidem minus ad. Vero modi est et et dolores magnam. Ullam ad et eum voluptas nesciunt. Vel aut voluptate consequatur pariatur.

Header 6

Explicabo dolor et nesciunt accusamus qui. Animi et id quis rerum voluptates. Facilis itaque sint ut aut fugiat temporibus magni. Possimus consequatur in at veritatis error. Voluptas est est ipsam non quibusdam quo optio quod. Eos consequatur nihil libero exercitationem. Vel modi dolorem aspernatur quaerat impedit reprehenderit. Ut ab libero aut consequuntur. Voluptatem incidunt sunt asperiores dolor in aliquam recusandae. Minima exercitationem quis quia sint ut repellat. Suscipit quo impedit blanditiis esse consectetur culpa. Architecto repudiandae assumenda neque. Consequatur esse repellendus rerum non accusantium. Quisquam soluta odio fuga omnis sit odio nihil reiciendis.

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