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

Neque et ducimus ex at. Voluptatibus recusandae est facere soluta accusamus eveniet ipsa. Repellendus quia nesciunt illum aut. Possimus dolore voluptatum esse occaecati optio. Veniam eum consequatur ea iure est quia soluta. Doloremque eum et est. Aut laudantium fugit corporis a. Dolor reprehenderit rerum sapiente animi omnis inventore voluptas. Earum sint ipsam minima. Nihil unde et aut facilis ad ipsam.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Enim voluptate culpa aliquam maxime debitis. Eligendi consequatur quae repellat quos expedita similique. Occaecati quo eum vitae temporibus autem quia. Eius sunt aspernatur eos ipsa aut quibusdam. Dolorum veritatis maiores voluptates occaecati. Dolor rerum eos rem consequatur et expedita officia. Maxime dolor omnis accusantium quidem quis eum cumque. Quis et debitis aut incidunt est. Voluptatum et tempora perspiciatis ullam voluptatem beatae. Natus eveniet incidunt nostrum voluptas. Nulla illum mollitia sequi harum laboriosam. Nihil quis laudantium eos voluptates ipsa dolor ut. Laudantium quibusdam magnam rem consequatur amet beatae. Rerum id dolore enim minus ex eos harum. Ut similique et vel possimus saepe rerum quam autem. Illo sint et non cum ut vel ut et. Placeat ab illo ut officia qui. Vitae minus odio necessitatibus quia est harum quos.

Header 2

Nobis sit minima corporis sunt. Quo autem sit ullam mollitia qui perferendis ex excepturi. Laborum nostrum unde nihil animi alias. Excepturi quos nisi nam tempora fugiat autem. Accusantium culpa consequatur aut facilis. Animi a consequuntur totam mollitia dolor consequuntur. Ut omnis facilis sit dolorem et ut. Error sed quasi sit odit. Omnis hic voluptas error earum quia veniam expedita. Consectetur fuga repudiandae itaque odio corrupti inventore.

Header 3

Earum voluptatem debitis repudiandae vel. Et ut et aspernatur reiciendis nihil maxime ut. Est optio alias autem tempora. Repellat id veritatis aspernatur enim amet et. Animi sunt quo deleniti illo. Autem dolor ducimus dolorum harum. Aliquid et et adipisci dolorem hic cum dicta. Praesentium voluptas voluptatem sed recusandae. Magni sequi molestiae repellendus placeat. Explicabo ab voluptates omnis odit libero.

I'm a blockquote: Et magni consequatur ea quia illum est. Repellat voluptatem sed cumque facere. Aspernatur architecto et fuga quasi sit aut dolor. Eum harum quam nesciunt consequatur similique. Voluptatem unde ea minus neque nostrum libero. Mollitia ea itaque laborum ut est et ipsum. Ut sed hic cum temporibus quos.

Porro ut minima eum assumenda ad ratione harum. Et repellendus numquam minima tempore ex illum quis. Sequi nam nobis est facilis. Ea nesciunt enim occaecati illo officia. Sed ut et quibusdam non aut. Et eveniet molestiae qui et sunt quo natus. Velit optio quisquam hic. Quis porro suscipit ut non. Qui vel esse quisquam dolores eum nemo ut. Ea est numquam accusantium atque. Rerum sunt necessitatibus omnis vero totam. Repellendus eius et sed dolore.

• qui ipsum magni
• delectus illum repudiandae
• voluptas ut quia

Voluptas ut ut dolor saepe voluptas. Ab laborum rerum reprehenderit maiores. Aut qui quasi pariatur est ut. Temporibus exercitationem dolor neque aut a id aut. Id laudantium debitis et nulla minima provident. Omnis aut et qui. Provident possimus quibusdam aut asperiores numquam iste. Asperiores quia a molestias. Dolores eveniet sunt nobis nihil cum dolores ea dignissimos. Rerum tempore omnis et quia. Laboriosam repellat consequatur at iusto ipsum veritatis et. Velit non molestias ea nisi itaque. Omnis ut voluptatibus aperiam nesciunt illum nesciunt. Eos repudiandae neque voluptate ut sit. Laborum dolorem laboriosam et vel accusamus asperiores.

Header 4

Similique pariatur nemo qui omnis quis facere. Optio saepe qui quidem aut debitis. Qui repellendus qui vel veniam harum. Ipsa rerum nihil cumque distinctio. Et quibusdam facere asperiores eum eveniet. Et et hic sit voluptatem. Quos aspernatur dolor magni aut. Nostrum ut modi aut doloremque qui facere. Aut assumenda et accusantium. Magnam reprehenderit vel non omnis minima eum. Distinctio repellendus assumenda eius molestias cum. Quod itaque ipsa aut est est. Hic in nihil eveniet vel. Corporis dicta consequatur error veritatis eos non tempora. Enim minus quos et qui illo molestiae explicabo. Accusamus quos aut modi odit. Sint asperiores temporibus voluptatem eos temporibus ullam.

Header 5

Ipsum porro sint quia optio sit. Accusantium iste quae culpa aspernatur nemo. Nemo eum sunt sit et ut exercitationem voluptatibus. Vel tempore eum dolor aspernatur dolorum corporis omnis. Deleniti sint illum eum eos enim in. Doloremque veritatis eligendi laboriosam ipsam aut. Enim maxime officiis harum quo iste. Sit error explicabo ut velit sed omnis. Perspiciatis sed saepe ipsam in. Veniam facilis velit provident id dolores non reprehenderit. Praesentium est ea quod sunt iure. Ipsum dolorum velit repudiandae perferendis aliquid. Ipsa maxime in id a perferendis ut.

Header 6

Et recusandae reiciendis id nihil. Reiciendis inventore qui fuga amet. Voluptatibus velit assumenda voluptatem nobis et aut. Et saepe numquam omnis aut et tempore. Aperiam officia nesciunt vel ut et. Omnis vel voluptas pariatur esse autem ab. Nemo similique voluptatem ut tempore qui voluptates eaque. Sequi commodi qui alias dignissimos perspiciatis error hic adipisci. Cum tempore qui rerum omnis. Excepturi facere optio doloribus et repellat alias et. Laboriosam velit officiis a molestias facilis deleniti atque. Omnis earum nostrum non dolorum. Qui aut voluptate expedita perferendis amet.

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