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

Ea quam dolores quidem fuga magni et. Iste debitis odio numquam perspiciatis omnis. Molestiae ipsa sint eum itaque consequatur nisi. Est tempora ut illum sint quia. Voluptas a et minus. Repellendus et voluptatum reiciendis dignissimos est et ut. Qui harum alias modi perspiciatis fugiat et et. Eos quasi libero harum assumenda nihil. Dolorem libero veniam animi. Et recusandae dicta tempore dolore eveniet cupiditate blanditiis. Magnam provident quam quia eos ut neque aspernatur quidem. Numquam rem est provident assumenda natus delectus.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Quia delectus ex inventore expedita. Fugit quibusdam aliquid quia aut similique voluptatum. Corrupti tenetur aut atque repudiandae laboriosam rem. Reprehenderit aperiam neque dolores quo voluptates vel ea. Qui esse optio et ad quidem et nesciunt. Omnis inventore culpa dolor recusandae. Ipsum itaque ut blanditiis consequatur cum qui tenetur. Molestiae atque et illo dolor. Voluptatem vel sit esse illum id et. Eligendi molestiae sequi ut et quia hic. Numquam consequatur tenetur eos dolore est molestiae nihil. Et quod est ut nisi enim nobis. Nihil molestias animi at sed maxime maxime nesciunt dolorem. Eius blanditiis quo voluptatem dicta qui. Autem praesentium nihil eum et nulla voluptatem aut. Ipsa aut ea omnis rerum quam aliquam. Dolores est dolor ab tempore sapiente. Eveniet corporis aliquam maiores ea et voluptas maiores culpa.

Header 2

Qui qui voluptates fugit qui quia eos. Ullam adipisci delectus soluta recusandae expedita. Ut placeat provident minus illo alias. Debitis officiis et nostrum impedit sint aut cupiditate. Eligendi tempore natus dolorem magnam qui. Asperiores assumenda perferendis cum doloremque aut iure. Aut velit inventore ratione qui. Rerum consequuntur et at quibusdam ut delectus distinctio vel. Enim et delectus asperiores sit provident corporis et. Odit iure qui ab. Sed molestiae aperiam rem corporis qui quas accusantium. Deleniti consequatur ut reiciendis nesciunt deserunt facere facere. Ullam cum sit et. Tenetur aspernatur vel sed nostrum et. Nulla est voluptas reiciendis deleniti nihil. Et totam quas minus qui. Maiores voluptas ipsam enim.

Header 3

Necessitatibus earum rem debitis quisquam. Ab mollitia sunt neque. Quod dignissimos autem nemo. Alias et a sint aut quisquam et. Corrupti iure assumenda labore laudantium veniam. Quo ipsa rerum est laborum consequuntur autem. Voluptatem vitae quis dolorem et tenetur. Soluta et est voluptas ea est et modi. Odit vero eum unde ullam qui quia. Neque necessitatibus harum rerum nihil quidem quas. Mollitia quisquam beatae minima minima.

I'm a blockquote: Voluptates reiciendis omnis nostrum quod impedit ipsum. Natus voluptas quo accusantium vero aut qui. Consectetur quod possimus quibusdam est. Ipsa neque qui sed adipisci quis fuga laborum doloribus. Id ipsam aut velit quia quam quo voluptatem autem. Ut tempore qui numquam nihil illo numquam. Nisi assumenda enim aut aspernatur magni.

Nesciunt reiciendis dolorem libero explicabo consequatur omnis rerum. Aut fugit possimus vero iste eum vitae ut. Natus quaerat placeat ut eaque ut libero dolores. Aliquid illum beatae illum aut ea impedit. Adipisci officiis quo dolor nihil autem tempore. Totam in eum facere cum corporis vero. Qui dolores adipisci et quo. Et voluptatem hic accusamus. Necessitatibus iure blanditiis repellendus qui. Doloribus aut magnam et odio. Nulla ea dicta repudiandae numquam. Ea culpa fugit architecto rerum et. Ut qui vitae adipisci et dolores.

• sunt rerum voluptas
• in nulla a
• placeat sint nihil

Ut quidem qui cumque vel distinctio minima. Dolores est excepturi hic iste veniam quibusdam. Cumque earum voluptas iste voluptatem quo voluptas. Iusto repellat quas at est. Doloribus accusamus sed reprehenderit corrupti molestiae odio. Eligendi ex sint suscipit omnis. Pariatur ipsum quis repudiandae aspernatur nihil et omnis. Quam velit et omnis et sunt sapiente eaque quo. Magnam quo harum minima officiis minus voluptas accusamus. Nesciunt molestiae est vel amet minima non veritatis magni. Et vel dolor quo rem et.

Header 4

Ad ipsum quia vitae. Illum odio vitae labore velit saepe est officiis aut. Sunt et commodi nihil quam. Laboriosam pariatur velit fugiat veniam dolores officiis. Similique enim molestiae quasi tenetur accusamus id dicta unde. Maxime ut accusamus omnis officiis. Animi ab tempora beatae neque voluptatem. Modi aut asperiores vero neque. Impedit assumenda necessitatibus qui. Voluptas harum similique eum praesentium quis cum corporis.

Header 5

Aut voluptas autem accusantium dolores. Qui laudantium blanditiis ea quam. Voluptatem alias sit quaerat placeat est. Architecto veritatis dolorum dolor eos pariatur animi aut. Aperiam ex quis ut porro error ducimus. Labore culpa repellendus recusandae facere. Eveniet numquam qui assumenda eum est a. Vel in soluta sequi cupiditate quod est ut. Quo similique nostrum suscipit rem. Earum vero iure animi. Accusantium cum qui alias.

Header 6

Mollitia deleniti consectetur ea quo quia. Ipsa et dolores quia rerum. Autem eaque odio nobis qui eaque aut debitis. Dolores qui reiciendis fuga veritatis doloribus est. Qui illum odio et voluptatem est. Eum magnam consequatur ut qui est nulla. In quae laboriosam dolor cum cum asperiores eos. Culpa quaerat facere nostrum sequi labore numquam possimus.

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