Backgrounds

Backgrounds can be added on the page, wrappers and sections.

The following examples use wrappers.

<!-- wrapper-background goes on element around a wrapper. -->
<div class="wrapper-background wrapper-background--gradient">
  <!-- wrapper with whatever padding it needs. -->
  <!-- No assumption is made about the element used, so choose the most appropriate for the content. -->
  <div class="wrapper wrapper--padding">
    <!-- content with theme-inverse theme-inverse--no-background if needed. -->
    <div class="content content-section theme-inverse theme-inverse--no-background">
      <h2>wrapper-background wrapper-background--gradient</h2>
      <p>Standard background gradient.</p>
    </div>
  </div>
</div>

wrapper-background wrapper-background--gradient

Standard background gradient.

wrapper-background wrapper-background--light

Transparent white.

wrapper-background wrapper-background--white

Solid white.

wrapper-background theme-inverse

theme-inverse adds a background as a convenience. It can be removed with theme-inverse--no-background.

wrapper-background theme-inverse theme-inverse--teal

theme-inverse adds a background as a convenience. It can be removed with theme-inverse--no-background.

wrapper-background theme-white

Et voluptatem repudiandae numquam. minima velit libero illum voluptatem tenetur et ea voluptatem eos fugit explicabo inventore. et quis veritatis reiciendis quisquam maiores magni quia corporis cupiditate sed dolores et voluptatibus. adipisci officia fugit recusandae qui dolor nihil similique itaque. eos officiis et aut. fuga et cupiditate qui impedit debitis quam sed vel molestias debitis eum quo. officia repellat dolores sed nulla quo ea officiis voluptates molestiae dolores dolorum libero.

Example link

wrapper-background theme-grey

Ut odio aut recusandae quae fugit ut dolorem provident. et dolor odit repellat commodi quia. iste nesciunt nihil dolore animi voluptas. impedit dolor eveniet assumenda quis porro et et. consectetur nostrum quidem dolore veritatis voluptas qui laudantium illum maiores consequatur quae.

Example link

wrapper-background theme-black

Nihil saepe minus libero amet et iusto. ea quod tempore vitae sunt quisquam quidem sunt assumenda minima vero aut. corporis molestiae doloribus quis ut quaerat vel vitae numquam nihil deserunt eligendi possimus sit harum. placeat nostrum tempore doloribus non. aliquid quas suscipit laudantium officia dolores. et nesciunt repudiandae rerum et est nobis sed consequuntur voluptate.

Example link

wrapper-background theme-slate

Minima illo qui dignissimos tempora mollitia suscipit debitis delectus amet et. velit consectetur consectetur nihil praesentium dolores. porro itaque necessitatibus minima occaecati aut et minima aliquam dolorum vero. nulla tempore velit repudiandae nulla ad quis ad veniam id consequatur. natus repellat nihil voluptatem ut. tempora qui officiis sunt quaerat quas ab doloribus aut voluptas ullam quo. blanditiis debitis totam amet molestias pariatur omnis placeat nostrum tempore cum facilis error.

Example link

wrapper-background theme-purple

Voluptatum qui et blanditiis eos non. quas debitis sit ratione accusantium deserunt ut vitae ipsa et nihil odit. cum odit quis eligendi expedita et est autem aut est reprehenderit. et exercitationem saepe tenetur vel perspiciatis soluta voluptas. sed dolorem qui consequatur expedita quidem tempore. est dolorem qui libero iure est dolorum quasi sapiente eum consequatur dolores recusandae quia voluptatem. sequi dolore sit ab quaerat quo saepe accusamus sapiente praesentium reprehenderit.

Example link

wrapper-background theme-bayofmany

Quisquam hic eaque assumenda et. veniam perferendis iste autem harum recusandae vel at enim quia est architecto ea veritatis voluptas. placeat in quos sed. nisi quas non ut ex rerum fuga in voluptas. vel quam at optio consequatur neque eum excepturi itaque.

Example link

wrapper-background theme-sun

Quam et aperiam expedita velit debitis tempora soluta at. eos deleniti ullam sit aspernatur nihil veritatis ex aut eius sed voluptas. non assumenda voluptatem et veritatis rem soluta.

Example link

wrapper-background theme-verdungreen

Odit amet ipsa eos consequatur et facilis laborum assumenda saepe consequatur. quo accusantium vel consequuntur deserunt et aut minima vel quod earum. error natus quam culpa quasi magnam dolor sed earum est. atque voluptatum esse dolor voluptatem tempora voluptates. voluptatem consequatur sed cumque est similique consequatur fuga ullam explicabo soluta enim. expedita tempore molestiae ea quod nesciunt aliquam quam adipisci culpa accusamus velit qui dignissimos nobis. modi et quaerat ab.

Example link

wrapper-background theme-teal

Assumenda rem aut eius nobis. maxime et sit aperiam inventore. autem unde sapiente est eum quos sed nisi quibusdam. et sed tempore libero eius officia doloribus eos ut vel. expedita ipsum ut ut inventore suscipit architecto saepe magnam id aliquam quia ea. consequuntur molestiae inventore ut impedit et consequatur quia doloremque fuga ab sed. dignissimos sit cum non nesciunt inventore quos quis placeat et neque eligendi libero culpa est.

Example link

Backgrounds

Adding a background only affects the background and not the content.

background-black

Tempora autem assumenda assumenda ullam magnam dignissimos eaque dolorum. pariatur ullam quis tenetur tempora minus possimus quia. quaerat qui explicabo voluptates.

theme-black

Et eius molestiae voluptas optio quisquam quos suscipit saepe voluptatem sed. aliquid aspernatur doloremque omnis beatae ut est. explicabo repudiandae ut minima laborum dolor dolore. vel consequuntur et et et excepturi reprehenderit itaque exercitationem qui commodi. omnis dolore tenetur cum asperiores illum.

Example link

background-denim

Nostrum ut quod eveniet nobis delectus nisi tempore dignissimos aut perspiciatis magnam aut non. maiores ut aliquam eos. odio quam et qui quia incidunt ad occaecati architecto dolores. dicta aut tempore tenetur quos illo quidem. aut repellat molestiae architecto quisquam sint eum amet ea ut. reprehenderit nisi velit autem voluptatem qui architecto voluptatem. aut rem magnam dicta dolor quis fuga aperiam.

theme-denim

Consequuntur optio laborum ipsa non perferendis autem dolorem odio at molestias. ut doloribus sit porro eum. placeat a qui corporis aut excepturi quae ut officiis dicta.

Example link

background-slate

Consequuntur laudantium et atque illo impedit quis sint eaque dicta optio libero quia mollitia. vel aut accusamus magni eos et voluptatem et nihil ab ipsam doloremque sit. exercitationem eligendi consectetur optio quas harum quia commodi voluptatem. minima quisquam voluptatibus temporibus eveniet dolores repellendus occaecati voluptatem aliquam beatae accusamus possimus. blanditiis voluptate id qui vitae rerum eum.

theme-slate

Error ipsam culpa id fuga ullam explicabo. in et perspiciatis possimus temporibus alias a necessitatibus at est recusandae. est officiis molestiae aut aperiam quibusdam ea consequuntur sint qui velit rerum omnis.

Example link

background-slate-translucent

Autem nobis in a libero et sed quos aut velit harum modi sed. cumque voluptatem assumenda adipisci debitis porro eum saepe nisi cumque non rerum omnis error. ut maxime doloribus voluptatem labore dolor quo recusandae possimus sed asperiores maxime earum ad. voluptatum adipisci vel in nisi fugiat assumenda ex.

theme-slate-translucent

Eveniet eveniet iste non et mollitia dolorem qui ut perspiciatis natus. et facere est sit velit et. recusandae et nihil totam dolores qui.

Example link

background-teal

Et odio qui molestiae quas dignissimos sunt vel. aliquam blanditiis in reiciendis quisquam eius magni sequi qui ad accusantium laudantium quidem libero sequi. in nesciunt voluptatibus voluptas excepturi fugit voluptatem velit fuga placeat aperiam. nesciunt laudantium cumque numquam et delectus quia praesentium eveniet expedita. error incidunt unde nemo doloribus. ipsam aut sequi alias consequatur dolorem maiores esse maiores.

theme-teal

Laborum est eum sint. voluptate neque nam quis corrupti perferendis laboriosam reiciendis magni voluptatem quibusdam corporis. cum et accusamus saepe aut suscipit aut vero enim laborum iure quisquam cumque. nihil inventore maiores aut aut ipsa officia non quisquam molestias rerum non. quos et possimus aut beatae facilis quasi consequuntur a id necessitatibus reprehenderit. consequatur architecto nihil possimus aspernatur aperiam ducimus earum architecto et et saepe qui. unde laudantium cupiditate molestias officiis deserunt.

Example link

background-bayofmany

At debitis corrupti minus odio. voluptas id occaecati eveniet ducimus sed sint dolores quidem et. deserunt accusantium est voluptate magni velit et in deleniti. id iusto ut ab rerum fugiat enim commodi voluptas molestiae aut libero ab aut. voluptatum quae aut natus occaecati quidem amet ratione ipsa.

theme-bayofmany

Delectus numquam vitae quod praesentium ratione quia dignissimos. ut deleniti tempore sapiente impedit distinctio sed impedit et voluptatem autem aut. natus in laudantium nemo officia. officiis debitis velit qui at iste. fugiat mollitia laboriosam quis eos eos quos modi. aut et temporibus accusantium et vero expedita impedit mollitia cum eius voluptas. enim sunt quisquam aut harum voluptatibus omnis eum rerum ipsa recusandae.

Example link

background-purple

Et sit et cum est laboriosam rerum animi et deserunt ut qui labore. aut saepe harum quasi iste repellat debitis omnis et aut sit quis. esse nesciunt ut magnam provident.

theme-purple

Sed illo est qui animi voluptatibus ad ad amet ratione. et ab quod qui praesentium error et deleniti. eaque perspiciatis commodi necessitatibus sunt maxime est. aliquid doloribus vel fugit eum blanditiis.

Example link

background-verdungreen

Facilis voluptas corrupti et est ut fugit alias. possimus sed at accusamus quo doloribus minima. eaque enim impedit sit eos tenetur qui libero ut nam voluptas aut in. quod similique officiis beatae.

theme-verdungreen

Et in vel et sunt quis recusandae. quis ut non fugiat aut porro vero alias dolore cupiditate unde distinctio accusamus dolor. totam animi ullam eos eos consequatur voluptates nisi corporis.

Example link

background-white

Sed quia doloremque quia fugiat ut neque animi delectus aut quia ipsam iste illum. temporibus dolor ut dolor aut corrupti ut doloribus. praesentium voluptatem eaque voluptas atque vel enim.

theme-white

Suscipit consequuntur numquam expedita sunt velit et velit. et consequuntur velit est temporibus dolorem laboriosam. rem animi ipsum blanditiis.

Example link

background-grey

Voluptatibus ut fuga molestiae qui quos ipsa neque unde vitae. unde enim minima omnis id a rem eius consequuntur laudantium et explicabo dicta quia dolorum. et culpa qui non in sit fuga molestiae explicabo. maxime ipsum distinctio fugit ab laborum vel quod quae exercitationem deserunt rem sit.

theme-grey

Magnam qui quaerat cupiditate doloribus iusto quia architecto. ratione officiis corporis deserunt voluptatem voluptas repellat quasi. rerum sit magnam quia odit quidem voluptate repellendus. voluptas itaque qui voluptatem quasi nulla aliquam nobis ullam est. illo molestiae porro libero eius quod dolore ullam. alias velit modi a exercitationem. consequatur dolore libero sed aut harum consequuntur modi distinctio repudiandae ut aut eos itaque.

Example link

background-grey-1

Ut et aut libero officiis animi sit nisi accusamus est. tempore id eum at voluptates odit. aut esse vel doloremque deleniti voluptatibus cumque atque incidunt error sed blanditiis. minus voluptatem occaecati aut autem debitis fugit.

theme-grey-1

Officiis ex rerum fuga nemo quidem magni facilis eaque. voluptates velit laboriosam et eos delectus. voluptatem quas odit et officia.

Example link

background-sun

Ea non sint qui quas animi voluptatum ipsa voluptatem rem dolore exercitationem adipisci nihil. blanditiis qui nesciunt non. eum in pariatur dolores placeat. aperiam explicabo porro laborum ut amet nesciunt recusandae culpa explicabo.

theme-sun

Hic debitis optio minima sapiente et ea quos harum id est qui aut nobis commodi. assumenda consequuntur ab nulla corporis incidunt quod doloremque sed. distinctio sunt praesentium eligendi eveniet odio necessitatibus distinctio.

Example link

background-white-translucent

Placeat et delectus sed. autem ea qui eos ipsa. consectetur numquam culpa dolorem numquam suscipit cum voluptates.

theme-white-translucent

Amet consequuntur ex iste quas ut nobis natus corrupti. ea sit nulla occaecati perspiciatis totam omnis recusandae rerum aliquam est laudantium quaerat. animi sit et sed eligendi id perspiciatis fuga neque consequatur magni ea ad magnam eligendi. id ad rerum assumenda mollitia quam voluptatem voluptas eligendi.

Example link

background-transparent

Dolores minima amet accusantium architecto ipsum nam optio placeat at accusamus temporibus deleniti voluptatum. et est blanditiis voluptates aut natus reprehenderit minus repellat consequuntur et quasi. quod eius maiores eos sit iste atque animi consectetur est esse corrupti quaerat.

theme-transparent

Officia quis aliquam corrupti architecto totam eos iusto commodi suscipit repudiandae quo illum minus totam. mollitia corporis dolores dolores sit nobis dolorum corporis ut et sapiente et. atque impedit sequi exercitationem qui est illo sit dicta nulla necessitatibus omnis minus.

Example link