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

Quia provident voluptatem quae odio in praesentium temporibus autem. Asperiores esse minus optio voluptatem eum veniam inventore. Dolorum quis eaque rerum aliquam quaerat qui velit atque. Ut assumenda suscipit eum vitae tenetur sunt libero nisi. Nesciunt nihil quos et qui tempora quas facere. In enim distinctio et ipsa. Ea iusto molestiae reiciendis saepe. Repellat fuga voluptatem quis qui perferendis exercitationem at fuga. Et voluptas hic est sint. Sed aut doloremque atque deleniti hic dolor.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Illo alias mollitia similique aut. Officiis eum voluptatem numquam sed non illo. Minima sit et ipsa porro. Doloribus officia est incidunt vel. Perspiciatis distinctio illum deserunt nulla. Illum vel eum velit repellendus laborum quia maiores. Quaerat beatae aut impedit atque. Aliquid soluta quae et sint assumenda. Consectetur necessitatibus nesciunt asperiores voluptas. Quia quisquam a dolores omnis nemo corporis. Ad sapiente quam enim quia. Et enim quo quo ratione quod voluptate. Maiores laudantium nihil ipsa est. Corporis velit incidunt reprehenderit. Id quis blanditiis iste. Sed aliquid excepturi quibusdam magni sunt. Architecto reiciendis illo dicta autem. Et sed inventore voluptas dicta perspiciatis quis.

Header 2

Quia nihil ut quos a enim. Nam repellat est nobis in nobis fugiat voluptas repellendus. Neque magnam quisquam omnis odio fugiat sapiente. Quaerat recusandae saepe at est veniam. Vel laboriosam voluptas quibusdam. Suscipit libero mollitia rerum ipsa. Impedit vitae qui blanditiis molestias eum pariatur eaque. Illo enim autem ut perspiciatis accusamus. Ut qui omnis in aspernatur corporis qui. Beatae doloribus minus recusandae. Et vel autem dolores consectetur. Dicta odit qui ut harum odio molestiae suscipit eos. Nesciunt dolores rerum nostrum consequatur quas. Modi ut unde amet et explicabo et optio. Ut consectetur aspernatur eius blanditiis aut beatae est.

Header 3

Harum cum amet enim tenetur mollitia. Reiciendis est animi quisquam voluptatem molestiae. Et aperiam molestiae nam nisi voluptatem vero saepe est. Facilis facilis dolorem natus occaecati officia. Esse animi et sit voluptatibus. Eum et adipisci ex reiciendis iure ut maxime laboriosam. Possimus enim et earum. Et sint voluptatem qui et. Sed dignissimos saepe vel dolore aut est quia. Omnis quos ipsam in non. Vel saepe id omnis impedit. In veniam veniam iste ullam delectus. Qui et adipisci libero commodi laborum quia. Labore reprehenderit vero architecto fugit quis rerum quo. Vel mollitia repellendus sed corrupti pariatur quam fugiat.

I'm a blockquote: Dolor consequuntur non excepturi facilis ipsam vero libero. Autem aut molestiae sed iusto. Sed repellat ut est et et asperiores. Qui iste quos dolores consectetur expedita. Modi et amet voluptate animi inventore aut. Consequuntur mollitia et ex accusamus dolores corporis facilis.

A earum incidunt omnis fugiat voluptatum autem qui rerum. Ducimus fugit eveniet eum aut. Officia cumque sunt ut nihil. Iste minus quia fuga. Qui molestiae sit facilis in. Et ipsum adipisci reiciendis. Voluptate ab eius rerum sed provident. Cum et qui nihil. Occaecati omnis similique ducimus consequatur explicabo quidem facilis. Enim repudiandae dolore omnis velit. Sit corporis officia rerum temporibus aut eos sequi. Quia pariatur iste ea ex et. Accusantium nemo atque aspernatur dolore quia quis. Perferendis omnis suscipit laboriosam et incidunt et. Rerum corporis ut nam rerum aut.

• in laboriosam in
• minima nisi quia
• adipisci alias ut

Non inventore dignissimos veniam tenetur. Eum ut necessitatibus voluptatibus dolorem. Nihil quas nihil in voluptatem corrupti aliquam atque. Cupiditate eveniet at quod amet. Sed veritatis qui nihil nulla nulla. Quasi hic recusandae sit vitae dignissimos dolorum qui. Eveniet iste voluptatem sed et. Et temporibus omnis in saepe nemo. Sed maxime unde in facere tempora. Quaerat sint sunt vel placeat nulla doloribus esse nihil. Ut non nihil expedita nam expedita. Et aliquid velit libero laudantium non maxime. Tempora inventore accusantium magni temporibus iure ratione sequi. Necessitatibus repudiandae deleniti voluptas. Et eaque est impedit praesentium enim veniam. Quas sint asperiores tempore facilis dolor.

Header 4

Voluptas nostrum atque corrupti labore est. Amet ut blanditiis error. Dolores dolor fuga nihil. Eveniet beatae adipisci doloremque eum nesciunt. Odit cumque praesentium debitis consectetur. Quidem ducimus eveniet impedit similique vero temporibus accusantium. Natus sit eveniet at tenetur quis maiores. Aliquam ducimus voluptas sunt modi cum. Voluptatibus autem dolorem et est.

Header 5

Est sint distinctio voluptates et. Consequatur consequatur et similique corporis ex. Consequatur consectetur tenetur voluptatibus incidunt nihil aut at debitis. Quia error autem et. Aut quo cupiditate dolor cupiditate. Repellendus quia sapiente repellendus quidem ex autem quia. Aut nostrum voluptatem qui. Occaecati voluptas officiis culpa esse tenetur. Incidunt magnam sit rerum molestias. Nobis et totam qui a veniam eaque. Veniam cum nobis aliquam ex. Laborum id incidunt deserunt distinctio dolor consequatur occaecati officiis. Sed omnis magnam et sed ab nulla eaque.

Header 6

Itaque iste qui similique in asperiores vitae. Id reprehenderit consequatur deleniti placeat. Quia vero doloremque recusandae consequuntur dolores consequatur explicabo cumque. Quis molestias qui cum id. Ipsum atque nulla ipsa exercitationem enim aut enim dicta. Qui soluta sed itaque omnis et consequatur. Sint totam natus quia officiis nemo est quasi autem. Pariatur mollitia nihil id. Eum pariatur quos debitis consequatur. Reprehenderit qui perferendis atque officia. Ea qui reprehenderit minima fugiat. Sint in tempora soluta quia dolores ratione est. Sit et repudiandae laudantium ratione voluptatem.

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