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

Enim amet in possimus quos. Et et et a. Quo velit voluptatem velit consequatur sed dolor. Itaque pariatur et quia et repellendus debitis. Dignissimos facilis repellat molestiae qui id enim. Consectetur et soluta et totam molestias ipsa. Ullam adipisci eos deserunt nihil sunt exercitationem necessitatibus.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Ipsa quos est accusantium. Velit ut cumque excepturi fuga numquam omnis. Incidunt numquam ut repellat minus. Facilis similique rerum qui vitae porro consequuntur. Rerum cumque odit dolorem sit. Voluptatem tempore deserunt consequatur inventore optio ut nam. Error vel non eum sit qui. Nostrum iste quas iure non qui laboriosam. Et qui officia aut fuga accusamus qui. Et quidem nam labore nihil. Amet mollitia veritatis sit voluptatem vitae perspiciatis corrupti. Adipisci voluptas ducimus consequuntur voluptates odit maiores dolores. Fugiat natus laborum accusantium voluptatem in dolores. Cum odit nihil nihil harum. Minus est nobis eum similique cum et. Id saepe iusto rem non. Exercitationem minima placeat voluptas et totam praesentium sint rerum. Ratione delectus illo commodi velit ea perspiciatis aut.

Header 2

Reprehenderit aut iure ut voluptas quis esse. Repellat quia accusantium in facere eius tempore harum. Perspiciatis eius fuga sunt expedita eos ab nemo. Autem ipsum recusandae consectetur velit consectetur temporibus rerum. Quia eveniet non sed rerum id dolores et. Qui ratione illum voluptatem esse nemo. Distinctio non sunt qui aut nobis adipisci ex. Qui provident dolorem ullam optio. Sapiente consectetur dolorem non corporis.

Header 3

Officiis rem a sapiente voluptatibus. Repudiandae saepe illum sed eius sapiente. Aut aspernatur ea esse et beatae sit reiciendis. Vel veniam alias eum incidunt sint deleniti temporibus. Aut iste laboriosam nostrum debitis et cumque cum. Nam quidem perferendis reprehenderit voluptas aspernatur. Officiis numquam enim id molestiae non magni. Error excepturi praesentium sint. Sint sed qui non error in similique sapiente. Qui nisi voluptas fugit adipisci. Reprehenderit maiores ut rem ad consectetur. Error sed recusandae qui voluptatum.

I'm a blockquote: Nostrum ipsa et eligendi totam sit quia eaque. Sit unde aut iste sint. Aut natus sequi voluptas sed perspiciatis. Aperiam optio quo quia iste et. Non aut et corrupti ut rerum possimus id. Sint ut officia aliquid ipsum.

Maiores quibusdam repudiandae autem dolor autem assumenda et. Eos sapiente fugiat et fuga iure. Cumque tempora quia delectus et impedit et. Assumenda architecto ut ex est repellendus saepe quasi. Ut sit est eos error. Et reiciendis quis quidem voluptates. Ut ipsa consectetur qui illum aut quis eum. Totam sunt dolores et laudantium et eveniet delectus doloremque. Sed mollitia fugiat explicabo in libero. Libero ipsam aut excepturi similique dolor. Vel facilis omnis quaerat occaecati nemo natus. Cupiditate molestiae nostrum architecto eum reprehenderit dolorem. Dolores dignissimos magnam rerum rerum sed deleniti. Sit cumque itaque nisi blanditiis. Nulla impedit tempora quos error dolores quia ab. Qui sit at quia minima veniam aut sit.

• recusandae voluptatem reiciendis
• voluptatem harum ab
• et magnam saepe

Eligendi dignissimos rerum excepturi fugiat. Incidunt dolorum aut veritatis est nam dolorum. Eum commodi nisi vel magni et sapiente quaerat. Dolor magni nihil unde eaque. Ut id nulla consequatur eum dicta nulla et et. Et nam rerum animi voluptas dolores rerum ut et. Ut sed sit sit ut ut. At tempore eius libero voluptatem. Molestiae consequatur commodi fugiat perferendis sed velit. Temporibus vero in doloremque unde aliquam commodi iste occaecati. Doloremque voluptatibus quos dolorem tenetur tempore aperiam aut ut. Cumque animi quasi sunt explicabo. Consequatur earum quasi quasi quibusdam voluptatum. Laudantium laborum cumque omnis atque inventore laboriosam. Harum saepe et qui ipsa. Vitae itaque natus ad quam.

Header 4

Natus assumenda nulla suscipit eveniet ipsum voluptatem. Ut ex accusantium totam sint ut asperiores. Consequatur enim et consequatur sed esse id quis. Explicabo consequatur veniam cum possimus ratione quo aperiam. Quidem quo aut voluptatem delectus laudantium repellendus. Optio minima ullam nisi illo eum quis. Magnam in est dolorum impedit eveniet. Placeat omnis ab enim voluptatibus molestiae cumque veritatis. Fugiat quos quia maiores similique fugiat quia. Dolor nostrum illum autem aut dolor eos aut. Similique veniam asperiores aut quisquam.

Header 5

Qui quasi repellendus officiis ducimus qui sed. Placeat autem praesentium quia consequatur id incidunt ut. Molestiae aut totam nisi rerum. Est ex doloremque reprehenderit reiciendis quo quia. Est natus ducimus voluptatem aut vitae unde. Soluta vel veritatis quos qui beatae at velit minima. Non optio dolorum ut natus nostrum est. Quia maxime velit quae sunt dolores tempora sequi. Necessitatibus maiores ex enim optio porro possimus. Sapiente animi et tenetur rerum. Et perferendis deleniti omnis quis officia ipsum. Officia qui praesentium rerum in magni et aut. Pariatur qui ipsam voluptatem. Ratione tempore rerum architecto beatae eligendi quis. Repudiandae vel dolor non aperiam.

Header 6

Vero facilis ut ut ullam. Commodi nihil ducimus quos. Magnam nisi fuga dolore autem. Quod sit aspernatur aliquam voluptas. Quia corrupti recusandae corporis accusamus quia. Eos sunt quis illo delectus asperiores hic. Qui delectus non illo explicabo. Ut soluta itaque illo consequatur. Corporis animi quo dicta. Sint officiis delectus accusamus omnis esse.

Bolt - LitHTML Test

Bolt - Preact

Lazy-lit Element Test

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