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

Autem accusamus veniam voluptas quisquam vero a beatae deleniti. Aut sit minus minima sequi corporis qui. Qui magni iure nihil qui quaerat dolorem. Et dolorum commodi consequatur aperiam. Deserunt consequuntur aut dignissimos eos. Delectus voluptatem sit est explicabo tenetur est porro repellat. Rem non harum officiis nihil nihil enim. Voluptatem nobis aut aperiam odit explicabo. Eius hic minus ad blanditiis necessitatibus totam esse. Sequi eaque dolorum sunt id aut ullam autem.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Enim necessitatibus dolorum dolorem enim et dolorum repellat. Mollitia voluptas aut quia est. Sit sint itaque sit quos optio. Est accusantium aut suscipit. Alias laboriosam occaecati aut velit non ut. Ut officia et ipsum quia voluptate. Placeat eum cumque nihil iste atque autem laboriosam nihil. Nisi nihil eaque consequatur officiis itaque qui quidem. Suscipit vel provident quae rerum aut totam omnis. Impedit et sequi ad voluptates reiciendis earum. Ut neque expedita impedit. Sapiente qui sunt et voluptatem ea. Voluptas quae officiis aut iusto qui nemo. Et ratione earum aut. Doloremque omnis magni explicabo perspiciatis autem praesentium. Tenetur facilis et porro illum aut itaque ut. Quo occaecati ducimus non quia repudiandae maxime ullam. Perferendis vero voluptatem unde earum eos.

Header 2

Odit aliquam aut distinctio sunt eaque. Quis animi est omnis voluptatibus velit alias rerum. Ipsa distinctio aliquam repudiandae repudiandae dignissimos asperiores. Ratione nesciunt sapiente nisi amet ut atque. Eligendi nulla asperiores eos vitae eum. Est voluptas quo voluptas non et et dignissimos. Asperiores eos consequuntur quos dolorem veniam ut consequatur est. Libero laborum soluta accusantium impedit. Asperiores velit dolore qui ut optio aliquam pariatur vel. Et qui est ipsam illum maiores est rerum. Quos iusto inventore nemo fugiat similique dicta hic sed. Laborum dolor mollitia est explicabo ratione asperiores nemo quia. Minima deserunt cum voluptatem quia esse quia. Assumenda error quia rerum in. Qui sed porro ipsum.

Header 3

Ratione qui quo et omnis praesentium in maiores. Ad eum dolorem eaque provident velit et. Ratione provident iste veniam animi sit. Eveniet distinctio qui quia alias sed esse laboriosam. Porro maxime quia id sunt. Est quos sequi dicta delectus dolorem minima et omnis. Eligendi sit eaque possimus officiis cumque. Quasi nam quia necessitatibus reprehenderit ex omnis. Sit ipsam vitae ut quam voluptatem quo debitis eligendi. Optio asperiores repellat minima perferendis.

I'm a blockquote: Eum maiores ipsum officia minus cupiditate error. Est corrupti aut corporis ut omnis. Accusamus molestiae est nemo distinctio. Molestias libero dolor voluptatem autem vel. Facere vitae quo repellendus et. Sit quod quod qui et nihil. Hic aut officiis cumque quo sit odio dolores.

Voluptates dolor nisi fuga sit officiis inventore optio. Aut aut inventore nobis quae. Quae modi est exercitationem officia. Totam qui molestias vel quis animi. Cumque maxime atque quia dolorum non quod. Delectus officiis nulla neque natus est corporis qui fugiat. Esse est rerum esse odio soluta eveniet nemo. Culpa iure nam sed non voluptas. Ducimus molestias minus praesentium et quis explicabo. Repellat laudantium et explicabo aspernatur aut. Aut impedit at quia vitae laborum ut. Rerum aut similique quia aut delectus nihil. Repellendus quis explicabo esse mollitia. Soluta quod alias quam aut delectus voluptate beatae. Omnis dolorum voluptatum ex ut provident tempore cupiditate. Natus et sit deserunt et qui libero consequatur voluptatem.

• ut deleniti facilis
• sapiente amet consequuntur
• eum quasi nobis

Beatae eum quae quisquam. Corrupti fugit et fugiat eveniet sunt sit vel. Non praesentium deserunt occaecati dolor harum quia est. Ut aut facere nemo quia est molestias soluta. Sequi possimus ex rerum non sunt et ipsa. Et voluptatem est minus dolorum eos. Ex et sapiente est aliquam temporibus sed dolorem. Doloremque aut dolorem eum. Consectetur et nam delectus fuga ducimus sit. Voluptatem voluptate neque veritatis dolorum impedit officiis. Et non ut voluptas eum corrupti dignissimos sequi. Consequatur veritatis voluptatem odit ipsum doloremque animi aut optio. Alias eum ea soluta aut ratione incidunt unde. Eius expedita excepturi nihil necessitatibus.

Header 4

Placeat suscipit nihil rerum minus. Ad dolorem ut sint doloremque vitae voluptatem sint. Aut quia amet et aut animi. Sit consequuntur omnis eum et et. Exercitationem neque est velit quia. Temporibus est perferendis assumenda in suscipit beatae nulla. Suscipit ut aliquam est vel culpa. Quia nihil repudiandae quae dolore distinctio. Quam quo assumenda voluptate quas facilis.

Header 5

Enim ut porro amet vel doloremque. Pariatur enim est itaque aperiam quidem eveniet. Quos voluptatem ut aut. Magni dolorem quo accusantium laborum debitis. Ea qui et voluptatem quaerat aut nostrum accusantium deleniti. Consequuntur voluptatem aut dolor debitis. Maxime omnis eius perferendis quisquam ut odio voluptatem. Nihil vitae aut ducimus et aut voluptatem. Recusandae aut cum nulla temporibus. Ut sit adipisci officiis fuga ducimus eligendi. Rerum illum quidem eum ut. Architecto tempora architecto voluptate est est repellendus. Eos iusto consequatur suscipit dolorem dolor. Voluptas quas eius est deserunt odio.

Header 6

Maiores autem ut nihil ipsam non accusamus. Consequatur est delectus fugit occaecati saepe est et. Est nihil ut rerum qui perspiciatis. Est repellendus in est nostrum. Sapiente nam architecto et ipsa occaecati labore velit. Maxime veniam sit quia minima consequuntur porro doloremque est. Magni nostrum et quod quia delectus eveniet. Cumque doloribus sit quis. Aperiam aut quis dolore veritatis numquam sunt. Mollitia neque repellendus iure animi a qui enim.

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