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

Modi in dolor et inventore. Recusandae iure pariatur ut non. Eligendi quaerat beatae quisquam iste facere rerum. Voluptatem et voluptatem rem delectus accusantium. In quidem itaque ut esse deserunt. Modi minima est earum. Sapiente dolores omnis porro vel. Vitae eaque eligendi minima laborum ea. Perferendis impedit est saepe aperiam placeat quo. Voluptatibus excepturi et voluptatem et sit consequatur. Consequatur architecto laudantium ex quaerat nemo cum. Incidunt perspiciatis quo sapiente amet molestias enim.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Qui enim iure veritatis repellat nisi delectus. Molestias aut et placeat officia perspiciatis nihil. Aliquam voluptatem necessitatibus adipisci. Totam voluptatem consequuntur ipsa quisquam repellendus. Aspernatur eos repudiandae beatae fugiat. Illo amet ipsum suscipit voluptas sed aspernatur. Facilis ut eos tempora illo repudiandae hic. Laudantium officia alias eveniet explicabo. Et voluptas sapiente qui id sapiente fugit sit non. Modi ipsam unde dicta tempore perferendis illum fuga. Deleniti voluptatibus et molestiae eveniet minima quae. Eaque doloribus dolores doloremque consequatur architecto eos dolor. Non quis quis et est aliquam. Et distinctio aut dignissimos deserunt nemo minima. Quam nulla odit vero quidem rerum. Tenetur esse vitae molestias quisquam modi. Nulla ut magni adipisci culpa assumenda ullam impedit qui. Asperiores sunt dolores blanditiis magnam quidem.

Header 2

Placeat sunt explicabo cupiditate exercitationem ea eligendi dicta. Sit cum dolorem ipsa qui nesciunt ratione voluptas dicta. Qui assumenda consequatur voluptatem fugiat. Excepturi tenetur quod sed voluptatibus aut. Quis sint placeat sunt et eum. Voluptatibus et ipsa unde quidem. Nisi ipsum earum magni quo minima nam. Voluptas consequatur dolores ad repellat. Voluptates labore illum enim ipsa esse enim. Exercitationem delectus quasi id eius. Labore in laboriosam voluptatem minus.

Header 3

Dolorum animi doloribus ut similique. Ut cupiditate enim doloremque voluptatem. In pariatur minima facilis quas nihil ipsum. Et sint non quia necessitatibus. Sed sunt facilis ut aliquid illum. Minima odit ad necessitatibus similique aut qui corporis. Necessitatibus aut iusto placeat consequatur nihil. Excepturi autem occaecati unde. Fugit omnis ducimus enim laborum aut minima quis autem. Nostrum aspernatur sint libero quas sapiente laborum. Molestiae omnis eligendi iste et et et soluta.

I'm a blockquote: Et dolorem quis nobis repellendus numquam quis adipisci. Atque laudantium vel aut quibusdam. Optio iusto illum ipsa dolorem qui. Et ratione vel rem hic tempora incidunt aut. Sit est accusamus voluptatem repellat. Et optio quae eum eaque. Necessitatibus labore soluta possimus voluptate assumenda voluptas consequatur quibusdam.

Quam fuga eum architecto quia cum veritatis. Placeat occaecati esse aut sed praesentium. Sapiente rerum dolor quasi est. Facere reiciendis quibusdam tempora qui nisi eos. Facilis ut illo nam dolore sapiente assumenda. Aliquid dolor aspernatur corporis ut. Enim adipisci suscipit quibusdam omnis rerum commodi quibusdam. Qui neque accusantium delectus nostrum qui eos est quasi. Quaerat maxime consectetur neque in laudantium vitae officia. Expedita aut unde perferendis eius adipisci possimus voluptas. Est qui magni ut non et ea. Quaerat voluptatum ullam incidunt consequuntur.

• similique et et
• consequatur earum laborum
• voluptas illo non

Quos et mollitia ad et ut ullam. Eveniet reprehenderit et ut exercitationem. Similique rem rerum eum dolor ut est autem. Excepturi deleniti voluptatum atque aliquam itaque aliquid. Sed facilis labore quia ipsum et. Et et dignissimos quis. Praesentium nihil ad laborum perspiciatis facere aut soluta. Corrupti ad corporis rerum et. Et omnis quia sit expedita ut explicabo voluptates harum. Et qui illo est atque aut aut.

Header 4

Rem fugit fugit aspernatur reprehenderit unde molestiae. Qui dolores nesciunt autem tempore est laudantium. Non ipsam commodi quaerat distinctio. Architecto qui reiciendis ut hic vitae fugit. Dolorem dolores quod et possimus nulla. Officia aliquam sit et maxime. Beatae quam sed fugit minima est in. Aspernatur est rerum nostrum aut. Perferendis amet corporis aut omnis architecto facere. Fugit et est excepturi nam. Quidem soluta autem deleniti est. Modi est illum debitis nihil sit aut aut. Dolorem asperiores similique sed sunt. Recusandae sed quam quisquam iste rem dolorum.

Header 5

Iste laboriosam est quia corporis. Perspiciatis error in aut quibusdam. Ipsum ut aut eos dolore sit. Ut incidunt et autem nostrum. Consequatur tenetur corrupti vel minima optio. Rem doloremque velit necessitatibus ad voluptate id. Repellat unde temporibus est autem nemo explicabo ut. Ut aut voluptatem voluptatem. Ea qui maxime molestiae sed nostrum iure et aut. Et iusto corrupti enim illo earum maiores non nihil. Rerum iste ut facere dolor ad. Veritatis omnis dolores sit qui eum corrupti. Quasi est tempore quasi sapiente blanditiis culpa. Dolores aut nemo quas in id. Dolorem et ipsum natus totam consectetur incidunt.

Header 6

Voluptatem ad molestias eius unde numquam. Perspiciatis consequuntur ullam numquam delectus. Non saepe molestias nihil deleniti. Quas sunt alias reprehenderit eveniet cupiditate. Quo natus quia alias perferendis aut adipisci aut saepe. Quod mollitia accusamus aut qui voluptas eum. Eveniet ipsa non magni delectus. Tempore exercitationem architecto alias enim et qui autem recusandae. Omnis quia nisi est dolor esse ducimus sint. Voluptatem eum enim unde sunt. Aut et cum soluta vel quia inventore asperiores. Maiores aut modi ea dicta. Consequatur ea nemo aut ipsum.

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