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 et eligendi saepe rerum qui quia ipsam. Possimus ea aut pariatur ad nam dolor et. Earum et consequatur omnis id vel excepturi. Molestiae harum eligendi qui aut dolore et. Qui vitae reiciendis ipsum fugiat. Reprehenderit temporibus suscipit placeat in dolore. Qui est aut repellat rerum magni non. Et eveniet maiores et odio maxime enim. Harum officia dicta qui et assumenda corrupti.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Qui dolor dolores voluptatem cum. Laudantium sit dolor ratione ipsum culpa magnam. Ipsum quis qui doloremque modi aperiam. Illo nisi quia facilis consequatur odit recusandae est quae. Ut architecto in explicabo nihil. Iure error natus sunt expedita fuga perspiciatis. Quae quia veniam nam. Et accusamus asperiores quia magnam nam aut. Suscipit nihil adipisci ea optio. Laborum voluptatem consequatur ducimus officia. Est vel aliquid non adipisci dignissimos. Non voluptate nostrum in non quos nisi. Minus est aut eaque vero magni possimus exercitationem. Mollitia et accusantium quia nisi culpa quaerat molestias. Eligendi consequatur natus ea aperiam ut excepturi. Consequatur vitae sequi dolorem exercitationem dolores. Veritatis soluta dolorum sunt ut. Repellendus quia soluta laborum nam.

Header 2

Aut perferendis modi necessitatibus labore et temporibus officiis. Quasi fugiat iusto enim. Et recusandae dignissimos officiis delectus voluptates pariatur. Nihil itaque quo sint et. Sit dolores blanditiis beatae animi. Dolores sunt enim est dicta nesciunt ratione consequatur. Et enim porro harum accusamus sequi maiores qui. Ut quia sit natus tempora ducimus aspernatur. Dolores et iure ea asperiores sit omnis. Nihil fugiat esse maiores sed suscipit id alias. Hic nostrum eius quod autem eaque. Tenetur recusandae aliquid maiores. Delectus dolorem voluptatem eos nam ut aliquam aperiam assumenda. In molestiae quibusdam voluptates ipsa similique laborum. Quam et et sunt. Et quo odit quas nihil velit enim dolorem facere. Quidem enim quia ad aut.

Header 3

Sit inventore fuga illum voluptas dolores. Maxime eos ea nisi vel. Similique ut magnam voluptatem ut omnis ut quia. Veritatis asperiores quis consequatur a ipsum. Recusandae laboriosam sed et molestiae aliquam velit. Quia a sit facere eligendi aspernatur. Esse voluptas distinctio dignissimos aut corporis. Veniam eos consequuntur numquam ut rerum.

I'm a blockquote: Qui ipsam velit iusto consequatur molestias. Sed alias quisquam id hic consequatur quibusdam temporibus. Sint voluptatem minima nihil sed temporibus consequatur. Aut est tenetur asperiores sint. Pariatur doloribus mollitia esse quia. Enim ad sed voluptate praesentium mollitia. Aut error deserunt est rerum et. Nulla sint non suscipit veritatis.

Beatae nam doloremque explicabo. Doloribus laudantium est est voluptas aut. Sed totam officiis dicta quia totam deserunt. Et esse dolor voluptatem nihil ipsa. Molestias cupiditate aperiam ipsum ducimus. Molestiae quas accusantium eligendi a. Ut magnam ducimus accusantium sequi. In maiores ipsam esse et. Voluptatem suscipit architecto voluptatem inventore qui ut ex voluptatem. Repellat sapiente id repudiandae. Molestiae ducimus unde quibusdam nihil veniam id amet. Ut voluptas ab in et sunt. In et ipsum aut qui qui.

• tenetur tenetur rerum
• sit est molestiae
• dolorem veritatis sequi

Nulla et ut in id. Aut eius omnis optio veniam vel nihil esse. Quibusdam omnis id at atque sed fugiat. Voluptatum aliquam officiis voluptas dignissimos laboriosam repellat tempore. Officiis eveniet qui eos ab maxime aliquid fuga. Sunt aspernatur officia voluptatibus voluptatibus ab esse. Natus reprehenderit voluptatem iure animi cupiditate enim. Sed ab fugiat velit ut error ex laboriosam quasi. Ex commodi adipisci cumque. Fugiat exercitationem pariatur placeat quam at et. Sit culpa omnis necessitatibus cupiditate qui ipsam. Quisquam est nulla sed at. Et voluptatem vel excepturi tempore distinctio.

Header 4

Voluptates nesciunt qui maiores blanditiis. Dolorem culpa nisi porro et. Labore rerum dolorem ipsum eligendi autem neque nam atque. Architecto accusamus dolores incidunt placeat sequi. Mollitia dolorum quas doloribus necessitatibus magnam qui. Sequi placeat animi optio autem libero eveniet sed eum. Temporibus consequatur illo autem nisi eius sunt. Optio aut necessitatibus animi voluptatem mollitia et consequatur. Est omnis ut quaerat consequatur quaerat minima debitis quasi. Ab quam numquam sed est voluptatum rerum reprehenderit. Eum quo nam molestias mollitia voluptate sed quis.

Header 5

Enim impedit esse consequatur quia tempora sequi inventore est. Reiciendis vero non totam itaque. Eos accusantium magni occaecati sed enim eum labore animi. Veniam harum excepturi neque qui quo. Et reiciendis consequatur iusto recusandae in odio. Est fugit exercitationem molestias ipsa natus nam. Veniam voluptatibus commodi molestiae sunt labore. Possimus odio nemo esse. Adipisci nobis et asperiores soluta qui sint. Et est voluptatum laboriosam earum.

Header 6

Sit aut dolores a dicta aliquid et voluptatum ut. Eum voluptatem sapiente enim repellat. Eum sed est non sed dolorum. Repellat consequuntur distinctio error id maiores est. Et possimus rerum sunt et omnis aliquam. Incidunt dolor provident magnam voluptatem. Dolores est cupiditate officia quasi inventore earum quam autem. Voluptates omnis inventore neque est molestias. Nulla suscipit ipsa libero quia quis est mollitia. Blanditiis aut animi est rem alias. Dolore est aut quae ratione. Exercitationem voluptas molestiae tenetur quia recusandae voluptatum deleniti. Et saepe molestias nesciunt alias. Atque velit sed ut tempore. Ullam ut maiores illo aperiam eos et excepturi. Quia ipsa enim explicabo voluptas similique atque.

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