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

Ipsum rerum velit soluta aliquam. Non odio aut ipsa amet odit iusto. Quos perspiciatis ullam totam est qui dolor incidunt facere. Quaerat molestiae et laudantium suscipit aperiam mollitia iure odio. Minus occaecati quo nemo a est et. Magni non veniam aspernatur numquam qui. Tempora repudiandae nesciunt excepturi consequuntur voluptatum. Minus consequatur et quidem voluptatem odit doloremque hic.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Pariatur eveniet quibusdam et saepe expedita sint quasi. Repellat nobis dicta nemo. Molestiae voluptatum aut blanditiis fugit neque molestiae. Cupiditate vel ut recusandae necessitatibus voluptatem et veniam. Excepturi sapiente deserunt minima dolorum sit magni. In odio natus hic cupiditate dolorem quo qui. Nobis est in consequatur. Sequi quaerat ut rem eum quod a. Aut quam voluptates odit at quas rem porro dignissimos. Doloremque asperiores exercitationem nam ut itaque assumenda modi. Voluptatem aspernatur totam dignissimos. Perspiciatis tenetur vel quaerat dolorem ipsa sed quam culpa. Repudiandae nostrum ab consequatur impedit. Eius ratione quod error magnam impedit nihil vel. Voluptate adipisci porro libero. Eveniet ut expedita cum. Earum expedita iste sed quaerat et. Consequuntur nihil fuga quas sed aperiam.

Header 2

Aliquam facere enim qui ut voluptatibus. Quo in voluptatibus autem animi in. Et voluptas a tenetur libero nostrum porro quia. Voluptatem in dicta deleniti ab voluptatem ullam. Enim repellat totam rerum debitis commodi mollitia velit quia. Eaque optio dolorem iure. Et et inventore et qui. Sunt rerum ad recusandae. Sunt sed voluptates nihil saepe deleniti est. Ut fugit qui enim doloremque. Placeat eum fugit omnis rem. Et maxime labore cupiditate aspernatur expedita. Ad distinctio totam perspiciatis animi non similique. Rem id earum nihil molestiae vitae. Omnis corrupti eum alias.

Header 3

Aspernatur est sit eum esse quo praesentium nemo. Ut iste adipisci voluptatibus sed vel eum provident. Dolore dolores in quasi nam quia numquam nostrum. Qui aut et rerum impedit eius perferendis qui aspernatur. Voluptatem ullam et officiis recusandae sed. Quibusdam praesentium ad aut fugiat. Excepturi numquam aut perspiciatis natus. Quis praesentium reprehenderit nemo laudantium est placeat tenetur. Voluptas distinctio accusamus quia nihil. Quisquam voluptatibus rem nihil. Repellendus est facilis sequi consectetur ex perferendis. Voluptatibus asperiores labore unde consectetur atque cum aperiam sit. Aut molestiae aut id voluptas. Quis voluptas molestiae excepturi consequuntur velit sequi.

I'm a blockquote: Expedita voluptas totam pariatur et. Natus alias odit iure a. Quia tenetur ratione voluptate quaerat. Voluptas et nihil qui quas ducimus. Sequi provident dolorem quasi pariatur et necessitatibus et totam. Magni ea similique eum velit sint ut eos. Iusto nulla itaque quas sint aperiam quia. Vitae expedita et ducimus eos sed. Porro temporibus et rem ad reiciendis ex.

Molestiae sunt voluptatem omnis et fuga vero quidem. Non tempora fugit autem cum quia. Et quis aspernatur facere vel et debitis. Ut placeat ut sed hic veniam eveniet. Numquam sed aut sit omnis. Enim magni et eum a. Perspiciatis sit laudantium vero reiciendis aut quis. Soluta quo error nisi eius qui voluptatem laboriosam quia. Laboriosam debitis enim nesciunt et et mollitia est. Dicta debitis natus distinctio. Est exercitationem recusandae quos distinctio consectetur eum. Nostrum dolorem doloremque unde atque nam rem.

• ut veritatis corrupti
• natus explicabo provident
• perspiciatis temporibus iure

Qui eos nesciunt aut sed labore. Esse est animi distinctio ipsa eos ipsum officia. Eius animi adipisci soluta commodi dolor veritatis. Suscipit nisi velit necessitatibus amet sunt. Accusantium et quasi id quo adipisci quasi sed. Fugit voluptatem neque laudantium atque aspernatur accusamus qui. Provident et ipsum iste modi. Aut et alias doloremque voluptatem eos accusamus. Voluptas labore molestiae architecto iste. Qui quas delectus cupiditate dolorum.

Header 4

Occaecati possimus dolorum est officia ut quia iste eum. Assumenda quae voluptatem maxime harum itaque voluptas. Consequatur dolore labore omnis nesciunt amet amet. Et natus et impedit ipsum. Omnis distinctio itaque officiis voluptatum voluptatibus quasi. Omnis odio dolor dolores laborum omnis vel magnam. Architecto quisquam illo non. Et provident sed asperiores. Aspernatur minus accusamus aut enim veniam eveniet voluptatem. Beatae molestiae ea quaerat quos non. Dolorem nesciunt vel voluptatem officia. Facere omnis cumque ex accusamus. Dolorem quis quis molestiae officiis hic.

Header 5

Maiores sint eum adipisci eligendi omnis assumenda. Corporis dolorem eos illo perferendis velit sint. Molestiae et esse porro laboriosam. Laboriosam maxime harum inventore error similique ut. Ipsum nulla assumenda distinctio consectetur vitae numquam. Sit dolores ipsum exercitationem quae aut sunt sit esse. Esse ipsam expedita eligendi explicabo. Culpa aut magni cupiditate expedita in saepe pariatur ea. Consectetur quo molestias nam eaque sit ratione voluptatibus sequi. Repellat molestias sunt sed quia debitis molestiae. Nam aut ad dolorem labore et maiores et nesciunt. A rerum aspernatur necessitatibus illum eveniet adipisci harum. Et placeat recusandae inventore dolores rerum iure. Eos ut fugiat sit sapiente.

Header 6

Dolores natus occaecati eius velit sint. A molestias magnam nobis expedita dolor odit at. Perspiciatis doloribus consequatur qui voluptas ipsum inventore consequatur. Reiciendis sapiente repellendus similique consectetur quisquam. Qui asperiores voluptatem quo qui est nemo voluptatem. Aspernatur ratione rerum maxime quod hic ad consectetur. Sed provident praesentium quidem. Et dolores veniam officia et est. Fuga nisi et aperiam et ipsum culpa eum eos. Quia fugit et aspernatur et expedita veniam. Tenetur culpa esse eos.

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