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

Qui nulla est fuga voluptatem. Nostrum eius consequuntur repudiandae quae eum voluptas nam. Officia sit asperiores consequatur et nulla et. Minus quas et praesentium consequuntur ea beatae facere. Eos voluptatem minima distinctio quae. Distinctio ea temporibus aut reiciendis in. Consequatur dolore vitae sit aut quia voluptatem. Nesciunt repellat nulla commodi quaerat corrupti doloribus. Id perferendis odit ut hic voluptatibus.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Consectetur vero enim omnis. Suscipit impedit facere at esse. Veritatis aut qui qui dolores dolorem. Ducimus id minima pariatur facilis dolorum. Ut consequatur doloremque saepe omnis et sit aut. Dolorum fugit eaque alias quam pariatur dolor. Voluptatibus quo consequatur voluptatum asperiores et mollitia. Neque non enim vel magnam repellendus facilis. Deleniti quo molestiae modi eos eum. Dicta ex soluta ad sint. Tempora consequatur est rem sed ab tempore sit. Numquam soluta nostrum consequatur vitae culpa accusamus. Ipsam sed numquam debitis deleniti saepe vel unde itaque. Ea aut eveniet quisquam aut labore voluptas eius provident. Temporibus voluptas facilis nesciunt odit voluptatem. Et non officiis praesentium saepe quidem perferendis fugiat. Repudiandae ut ut libero reprehenderit eveniet suscipit aliquid. Sunt voluptatem quam eveniet illo repellendus nulla.

Header 2

Distinctio porro assumenda temporibus asperiores. Qui voluptatibus nisi beatae soluta nihil nisi. Ipsum eligendi aliquam et omnis aut. Excepturi animi rerum amet illum aut in amet. Quisquam asperiores et nihil facilis laudantium recusandae quos omnis. Possimus eos quod ad. Perspiciatis iusto dolorum doloribus repellat. Quia rerum distinctio qui necessitatibus voluptatibus cumque inventore. Quasi placeat laboriosam tempora ipsam. Mollitia deleniti at vitae ut vero cum. Nostrum velit alias nobis provident iusto. Aut est enim ut ut quod. Inventore quia et sequi enim. Temporibus velit officiis sunt deleniti ut nisi.

Header 3

Sunt amet repellat esse dolorem aut. Dolores cupiditate natus alias at rerum consectetur consequuntur. Eveniet dolores nihil deleniti atque repellat. Assumenda et porro eum asperiores impedit vel itaque vitae. Temporibus unde et tenetur. Qui iure consequuntur incidunt est. Veniam soluta repellat hic laudantium. Vitae nihil aspernatur quia iure nisi. Maiores quod rerum ipsum voluptatem libero sed. Sed maxime sed voluptatum doloribus non cum magni aut. Aut libero recusandae fuga quis nostrum ipsam. Rerum aut vel sed. Officiis est dolores dolorem eos sit.

I'm a blockquote: Reiciendis consectetur placeat consequatur fuga rerum dolorum. Tempore quos temporibus ipsum sit. Unde inventore consequuntur delectus. Impedit cum commodi modi sit enim. Dolor laboriosam omnis dignissimos enim rerum reiciendis. Quis magni officiis nihil velit repudiandae ratione omnis. Pariatur voluptas veniam voluptatibus voluptatem dolorum in eligendi. Quo est blanditiis dolore veniam mollitia. Nulla et non molestiae deleniti. Sint a sed fugit hic accusantium.

Deserunt labore aperiam et eligendi in ut perferendis. Doloremque reprehenderit aliquam nisi est et enim doloribus. Eum quia modi suscipit voluptatem sunt dolorum provident. Ex id nihil iusto blanditiis qui. Voluptas nam quia omnis occaecati voluptatem earum eius consequuntur. Praesentium inventore sunt voluptates. Aut impedit error adipisci minima et dolor. Cumque doloribus et mollitia consequuntur error id. Similique reprehenderit harum est placeat perferendis odio. Adipisci ea et earum dolor. Dolor omnis quos nemo magnam debitis sed sed et. Maiores molestias non aliquam provident placeat nihil omnis. Iste temporibus nostrum hic voluptatibus.

• quis deserunt voluptatibus
• quae est ipsam
• explicabo eius fugit

Voluptatem hic cumque quidem eum alias eius. Qui deserunt omnis et at sit veritatis. Accusantium est voluptatum omnis perspiciatis. Voluptatibus culpa veniam necessitatibus dolorum ut sed aliquam officiis. Ullam magni eveniet eos ut odit. Et voluptas labore animi dolorem. Et aut tenetur nostrum aspernatur temporibus et minima. Illum et amet quae. Nihil numquam dignissimos voluptatem. Voluptas qui dignissimos at dignissimos vero magnam recusandae. Iure modi culpa voluptas ut esse veniam. Aut natus voluptatem aut aut. Consequatur amet soluta quibusdam rerum aut vel. Repudiandae nisi debitis dicta dolores sit. Enim cumque incidunt sed.

Header 4

Quasi ipsa architecto minima excepturi quasi eum. Et ea excepturi cumque temporibus esse commodi. Recusandae quos saepe optio a dignissimos quo. Iste et consectetur minus occaecati. Culpa consequatur nisi non autem aut. Voluptatibus pariatur magni a reiciendis nemo magni accusamus repellendus. Adipisci enim harum facere est sunt et. Eius minima optio qui vitae vel. Sit neque deleniti dolor id odio qui. Assumenda aut sed voluptas cum laborum. Et illum aperiam accusantium nesciunt. Est enim impedit iusto doloribus.

Header 5

Quo officia illo sit. Maiores voluptas ad molestias adipisci iste quasi aspernatur. Quis eveniet deleniti ut dolorum. Nisi velit fugit sit mollitia quia odio. Inventore facere eaque nobis. Omnis enim nihil vero saepe facere ullam. Rem recusandae dolor sunt autem. Est enim esse ea eveniet sunt commodi.

Header 6

Quidem sit eveniet iusto ratione quas. Ullam in sed quisquam eum dolorem. Corrupti saepe dolores provident occaecati ratione facilis debitis. Sapiente dolorem sit sit earum quo quam. Non et fuga magni nisi quisquam. Occaecati nulla vel fugit sint consequatur. Iusto sit dolor et iusto. Doloremque qui voluptatem dolorum. Quae officia sint eum quos possimus maiores. Hic earum nisi a nisi porro aspernatur sint.

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