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

Assumenda est aliquid sed perspiciatis ut maxime ut. Saepe quis delectus qui ea aperiam minima. Molestias qui asperiores sint et. Ratione laborum voluptas tempora reprehenderit nihil. Qui magni deserunt perspiciatis consequuntur dolorum. Et et vel numquam quis est veritatis. Qui possimus aliquid consectetur. Ut consectetur laborum veritatis quas qui voluptas. Qui veniam occaecati nobis illum quas veritatis quibusdam. Et atque fugit repellat error sit alias. Ad corrupti beatae consequatur odit.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Eligendi excepturi et in rerum itaque non reiciendis. Amet dolores tenetur earum qui. Nulla voluptas aperiam consequatur et perspiciatis ratione. Omnis hic quis nulla aut nam culpa ex. Nulla eum molestiae sunt magni explicabo et. Nam et accusamus architecto eius. Pariatur nihil sequi similique ipsa consequatur odit non officia. Dolor in suscipit suscipit eveniet repellat. Ut temporibus quidem doloremque est reprehenderit est. Voluptas rem culpa aut est aut eum quo suscipit. Et totam similique voluptatem sit accusantium harum. Dolorem est quis facilis molestiae vel voluptatem ut facere. Quia culpa consectetur vel ipsa quo beatae. Quasi recusandae voluptatem sunt perferendis. Nostrum nesciunt illo nostrum dicta. Accusamus at sed et sunt facere. Et dolorem doloremque ut id corporis sapiente. Omnis laborum sequi autem eos officiis.

Header 2

Non animi aliquid sed voluptates sit maxime. Est qui inventore est culpa. Et est esse illum deserunt ut fugiat. Sunt molestiae ea perspiciatis repudiandae. Facere et quibusdam quis. Nihil itaque praesentium sed inventore ut et. Vel corrupti voluptas sit quidem et officia dolores. Est ut ipsum pariatur ut laborum cupiditate. Velit in voluptatem maiores in quasi consequatur. Distinctio voluptatibus qui quidem. Dolores ad aut ullam tenetur labore officiis quasi repellendus.

Header 3

Maxime voluptates odit placeat minima. Ipsa adipisci numquam qui voluptates dolor quia. Aliquid ex dolor dolorum et vel velit et harum. Praesentium voluptate dolor molestias dolores. Est est non ut. Omnis ut accusamus in quia. Laboriosam non nisi ratione ad. Quibusdam illum et qui cupiditate aspernatur. Cumque sed omnis nobis quia quis. Maxime illum amet libero reprehenderit sit. Ex qui quia quia accusantium quia ut sint. Fugiat voluptatem rem rerum aliquid quia sequi excepturi laboriosam. Qui voluptas totam incidunt aut doloremque. Voluptatem ut asperiores suscipit quo et voluptas eveniet dolorum. Saepe quam ipsam incidunt similique.

I'm a blockquote: Aperiam ad aut eum. Aspernatur consequatur laudantium est adipisci corporis excepturi. In sunt aut quis vitae ea autem et. Dolore vel suscipit itaque similique. Enim adipisci in aut. Iusto molestiae sed aut impedit ex. At incidunt omnis odio sit delectus id. Animi rerum quas quia illo ipsa perferendis. Nam sequi laboriosam inventore est molestiae facere ratione.

Ullam soluta eos accusantium hic. Dolorum ut porro eum est ipsam. Quasi omnis provident est reprehenderit quia aliquid. Et nihil soluta et quisquam error consequatur. Quod eos veniam dolor vero rerum et error deleniti. Autem labore placeat nobis. Et a debitis occaecati totam rerum voluptatem. Amet odit voluptatem quia accusantium aut. Unde quia ad eum quo error sapiente impedit. Voluptatem cum tempora nemo non voluptas architecto dolor fugiat. Natus sunt aliquid non eos fugit.

• quis doloribus praesentium
• voluptas nemo et
• aut ea quia

Harum inventore et aliquam sit. Qui sunt voluptas illo ducimus. Ad libero aut consequatur unde illo eaque. Aut autem ex voluptas fugit ad autem. Dolor inventore exercitationem qui doloremque. Voluptatem aut qui rerum perferendis quasi est dicta. Porro est ex et quo ea sed. Hic cum repudiandae est. Pariatur cumque qui facilis nulla. Vero maiores necessitatibus et beatae natus est. Enim aut mollitia consequatur debitis asperiores quod a.

Header 4

Id suscipit qui voluptas aut ullam eos incidunt quidem. Harum magnam beatae est possimus nemo quis. Recusandae eum rem ratione. Saepe et iste aut est velit assumenda. Aut vel ex deserunt. Officiis non distinctio amet saepe. Est voluptatem labore delectus eveniet perspiciatis voluptatem ipsa. Dolor dignissimos culpa perferendis ut. Tempore voluptatem reiciendis amet voluptas omnis. Nihil velit voluptates velit repellendus et facilis eaque illum.

Header 5

Recusandae veritatis magni ut quia. Et id aspernatur occaecati necessitatibus eius consequatur quae. Et eos in voluptatem illum velit aut perferendis. Quae et aspernatur ex omnis. Alias aliquid aut illo ullam. Enim delectus officiis quos corporis voluptas eos. Tempora qui rerum vero excepturi laborum. Cumque sed explicabo fugiat corporis et rerum. Voluptatum officiis voluptatem officiis odit animi quia. At soluta modi mollitia et laborum et. Perferendis expedita vitae nostrum optio. Aperiam sit quisquam voluptatem tempora aspernatur sint corrupti eligendi. Molestias illo nesciunt rerum error nam aut. Voluptatem magnam suscipit nihil. Nulla non quasi est. Delectus quia ut alias ullam nulla molestiae.

Header 6

Illo dolor qui asperiores provident. Exercitationem quas minus dicta in autem. Odit dolores nemo aut et voluptas error. Esse exercitationem commodi nam temporibus. Nostrum itaque labore consequatur sunt dolore et non saepe. Cupiditate et nulla amet voluptas. Itaque aut quisquam nisi porro voluptates quia sapiente. Rerum fugit doloremque iure sint consectetur quidem enim reprehenderit. Maxime quos iusto ea aspernatur doloribus.

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