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
Illum dolores et laborum ut. iusto eius deserunt molestiae omnis voluptatem magni facilis voluptas nulla ipsam natus voluptas quia eius. aut saepe blanditiis possimus quia inventore quia aut sit eaque blanditiis voluptatem molestiae ipsum aut.
wrapper-background theme-grey
Ipsum sed rerum iusto cum molestias vel quas iure eos. iusto rerum blanditiis sequi quis qui corrupti voluptatem corrupti omnis. quia et quo enim earum et aspernatur ratione corporis ipsum possimus quo fugit. atque accusamus est distinctio est quam at.
wrapper-background theme-black
Dicta amet porro cumque minus corporis. qui labore optio est ex sint debitis. impedit tenetur eligendi libero id. nam ullam ut rerum officia nostrum a dolorem neque. sint earum sapiente illum alias hic dignissimos officia provident ut nemo adipisci. excepturi expedita sint voluptatem veritatis ad et corrupti quo inventore omnis aliquid est.
wrapper-background theme-slate
Voluptas aut fuga nesciunt repudiandae rerum ea rerum. esse architecto quis eligendi dolorum error in. tempora consequatur distinctio dolorum. quod sequi rerum praesentium vel doloribus quis quo minus laudantium labore at repudiandae qui accusamus. sit sit minima alias veniam sed. quisquam iure ea fugiat.
wrapper-background theme-purple
Voluptatem at odio et aut natus quod quia aspernatur qui hic beatae sed ipsum similique. ratione saepe id asperiores est expedita debitis quasi repudiandae. officia officia sed dolorum. dolorem iure est quo.
wrapper-background theme-bayofmany
Facilis qui minus minima quidem excepturi dolorem aut. molestiae quo nobis sed fuga similique quibusdam qui rerum dolorem voluptates laudantium et. nihil dicta omnis possimus. vero ipsum consequatur iusto in totam natus ullam. aliquid facere quibusdam et.
wrapper-background theme-sun
Sit sapiente tempore culpa est quas omnis quibusdam libero at. dolores ut culpa qui dolorum dolor nam delectus dolores corporis rem quia animi quod. sit odio dolor libero minima aut. et nemo labore vero. et modi quos voluptatum eaque nisi sunt nesciunt et quisquam voluptates facere impedit suscipit omnis. repudiandae sed et deleniti non et neque. voluptatem sunt delectus vel voluptate tempore animi qui.
wrapper-background theme-verdungreen
Ad quas aut itaque deleniti sunt quam aliquid. facere expedita voluptatibus nesciunt mollitia autem ea magnam dolor fugiat atque dolor in. dignissimos est aut nobis aut quae recusandae. et voluptatum ut perferendis eos rerum qui atque corporis molestiae et nihil.
wrapper-background theme-teal
Officia et quisquam qui impedit ipsum unde ut quia officiis delectus eum. recusandae ipsam sapiente doloremque doloribus expedita quia animi sunt. facilis ex corporis ut a ut nihil aspernatur libero numquam sed optio ut et sapiente. dolor porro magni eum exercitationem est totam nemo officia.
Backgrounds
Adding a background only affects the background and not the content.
background-black
Non cupiditate corporis quidem et debitis sit magni facilis unde corporis reprehenderit. ut est omnis aperiam id impedit ut officiis ut ut amet autem quae. excepturi excepturi pariatur quo velit itaque voluptatem reprehenderit error ipsam magnam perspiciatis voluptate qui repellat.
theme-black
Quia ad rem sint sapiente. reiciendis et maiores neque est nostrum at perspiciatis magnam voluptatibus et culpa reiciendis. voluptatibus quod beatae laborum aut quia molestias necessitatibus voluptatem. impedit sequi a molestias recusandae ea voluptatibus et.
background-denim
Nemo qui quasi vitae sint minima iure saepe harum et optio velit. et dignissimos quia ut dolor doloremque rem soluta ipsam et rem voluptas ullam repellendus. minima perspiciatis sit natus at beatae expedita iusto commodi quia in odit voluptatem voluptatibus. aut rerum excepturi voluptatum maxime itaque quia id omnis ea ea velit nesciunt.
theme-denim
Non quo rem repudiandae aut tempore. ullam et et quaerat vitae quia consequatur. sunt architecto omnis repudiandae nesciunt ut perferendis. minus sequi dolorem aut libero debitis consectetur eos nesciunt. ipsum a consequatur esse aut.
background-slate
Doloribus culpa et ut incidunt nobis ipsum aut voluptatem omnis velit quis commodi ducimus non. maiores qui aut eum illo qui ducimus nesciunt sunt exercitationem autem. dolores deserunt aut iure maxime tenetur placeat rem velit. id et earum nemo vel explicabo praesentium blanditiis quibusdam sit ipsum fugiat. non sed quia modi aut. quis error eligendi molestias pariatur quia eveniet.
theme-slate
Facilis dolorum sunt corporis in fugit velit sed nihil illo qui necessitatibus et. sint tempora ducimus aliquam occaecati sit dolor et nemo amet at quis ipsa animi ea. exercitationem optio et porro doloremque veniam deserunt.
background-slate-translucent
In id dicta omnis perferendis id laboriosam consequatur veritatis asperiores iste doloribus esse. consequatur labore nostrum et aut vel vel quia expedita quia eos voluptatibus perferendis ut maxime. qui nemo officiis corrupti. itaque cum earum veniam dolorem molestias necessitatibus quia. recusandae velit ut quis reprehenderit.
theme-slate-translucent
Fugiat aliquam cupiditate qui ducimus nihil molestias eaque. asperiores et ab sint pariatur animi inventore et sint voluptatem nulla. consequuntur sed temporibus et adipisci in fugit occaecati non consequuntur est.
background-teal
Alias voluptas sunt non. eos perspiciatis dignissimos quia est culpa deleniti dolorem reiciendis. et consequuntur perspiciatis quia aliquid sunt atque eos consectetur dolores sunt sit fuga fuga adipisci.
theme-teal
Est aut nam dolorem dolore voluptatem nisi ut laborum adipisci. assumenda deserunt dolore fuga dolorem ut. consequuntur aut ut cum doloribus quae hic esse quis. consequatur qui cupiditate aut. quam molestias nobis expedita provident accusantium est soluta sed ex minima dolor inventore.
background-bayofmany
Temporibus et quasi consequatur veritatis magnam quo consequatur tempora reiciendis nobis et ab rem. vero accusamus vitae animi. ut ipsa eaque atque esse aut quo esse quia quam est a laborum perferendis incidunt.
theme-bayofmany
In qui hic natus voluptas vitae pariatur nulla omnis commodi. impedit et et autem libero quisquam qui sed ea et ullam perspiciatis suscipit vitae qui. ut tempora incidunt corporis voluptates laborum suscipit fugiat illum officiis rem.
background-purple
Est dolor quidem cumque doloribus illo velit a. excepturi est autem aut error enim rerum fuga illo rerum quae architecto rerum et voluptates. assumenda culpa error itaque aut sequi quod vitae labore commodi. pariatur sit sit labore dolorum eum cum iusto.
theme-purple
Veritatis et qui ducimus eaque necessitatibus laboriosam dolores omnis iure vero minima ut. in doloremque qui vitae dolorum explicabo eius. eum maiores et et atque harum aperiam. quia mollitia dolore quod odit quidem modi blanditiis itaque quas ut ea maiores aliquid aut. repellendus et voluptas est perferendis assumenda sit consequatur ipsam voluptatem ipsam. possimus doloremque quia non voluptate. vero quibusdam esse quae enim sit sequi velit et iste est.
background-verdungreen
Cupiditate delectus vero quos nobis odit vel sapiente. nulla dolorem ut eos sint qui enim deserunt error nobis. eum fugit provident officiis id velit ad et ea voluptas. ex est sit dolorum saepe enim consectetur quo qui nobis. excepturi voluptatibus ut nostrum eum veritatis deserunt et fugit rerum distinctio occaecati ut. quis et accusamus nemo expedita expedita quia adipisci et quia.
theme-verdungreen
Voluptatem debitis rerum similique earum sint omnis dolorem maxime voluptas. nulla eos voluptatum nihil magni et velit officia. illum dolorem nihil aut a culpa dolorem laudantium fugiat quibusdam velit sunt. voluptatem est reprehenderit quibusdam est repudiandae quas. consequatur ut provident non accusamus accusamus minima vel laboriosam distinctio aut distinctio.
background-white
Beatae architecto dolorem corporis sint asperiores rerum. excepturi et rerum aperiam. tempora nesciunt est ratione eum voluptatem aut voluptatem libero quis cumque ut. qui quia beatae eligendi accusamus ut voluptatum vero veniam numquam non est sunt. itaque et odit quia sed tempora accusantium ea blanditiis porro rem consequatur minima. est ullam qui doloremque sed minima natus. quia nihil et eligendi alias tempora unde molestiae dolores.
theme-white
Facilis eligendi sed possimus temporibus autem amet ullam aperiam praesentium non esse magni. ut quae suscipit earum perspiciatis quidem alias quisquam delectus voluptatum magni et dolor et. omnis iusto officia asperiores praesentium nam ut quia aperiam eligendi vero eligendi distinctio. sit ducimus nihil delectus. distinctio at rerum itaque harum reiciendis esse. minima id sed natus eos commodi numquam.
background-grey
Molestiae voluptates atque et porro voluptatum. est consequatur vero facere sed qui qui sit eum deleniti adipisci excepturi. dolores consequatur tenetur voluptatem voluptates ducimus aperiam omnis quis veritatis veritatis. quam dolores nihil ducimus provident. rerum minima mollitia et velit nesciunt doloremque. reiciendis hic adipisci labore et earum qui veritatis cum non necessitatibus molestias natus non.
theme-grey
Ullam est dolor quisquam est laborum officiis quod voluptatum tenetur odit et numquam qui quaerat. praesentium fuga possimus incidunt nulla eligendi. quod sed ad accusamus repellat. ad aspernatur qui commodi sint sit ratione velit sit esse.
background-grey-1
Expedita at veniam debitis qui laboriosam consequatur. eaque debitis non adipisci sed dolores in. dolorem eius doloribus sunt exercitationem et sunt quis et modi nulla fuga atque corporis. quaerat quaerat nulla eveniet neque est earum iure consectetur ducimus laudantium nesciunt reprehenderit.
theme-grey-1
Ipsum quis ut fugiat porro velit quam a sit voluptatum odit sit quas porro fuga. aut est porro aut cupiditate recusandae laboriosam reprehenderit voluptatum. ut est labore natus.
background-sun
Molestiae sed accusantium ut voluptatem in. expedita qui sed sint et veritatis impedit quo molestias voluptatem. quia sunt quod eos assumenda nesciunt rerum. unde expedita sed autem labore eaque maxime facilis omnis vero aspernatur libero. cum molestias error mollitia aliquam occaecati. qui accusantium esse vero veritatis veritatis nostrum omnis neque sed voluptatibus quas voluptate qui. praesentium nulla sed iusto repudiandae at illo harum rerum.
theme-sun
Et voluptatum necessitatibus rerum minima sunt perferendis ex quos accusamus repellendus quasi ea. autem impedit sed ea qui doloremque. asperiores ratione dolorem non voluptas assumenda.
background-white-translucent
Ut nam quia ea quod fugit accusamus. earum adipisci cum est qui quo blanditiis molestiae sunt laboriosam rem dolor quod rerum. eos eius et ratione quam. voluptatibus nisi commodi tempore dolor voluptatibus corporis est exercitationem omnis molestiae sunt inventore.
theme-white-translucent
Atque iusto sed nihil omnis voluptatem nihil soluta et nihil. molestiae ratione nulla reiciendis id eum quos error eius omnis quaerat esse corporis. vitae aliquam vitae quis quas libero praesentium autem unde distinctio beatae sed eaque tenetur. autem error beatae modi quas. quia beatae numquam praesentium voluptate non harum ab at autem velit. consectetur rerum ducimus officiis dolores rerum dolores.
background-transparent
Et quae quae rerum reiciendis dolore et voluptas facilis pariatur est id voluptas quisquam qui. suscipit reiciendis et maiores. iure amet voluptatum possimus nostrum culpa esse non ab recusandae ipsum impedit. cumque sequi omnis quod ab iure et placeat.
theme-transparent
Sit at sed in consectetur. totam vero quia at numquam. alias mollitia quisquam veritatis quibusdam mollitia consequatur minima omnis. illum ea blanditiis dolores consequatur. rerum harum repellat corporis consequuntur dicta qui ullam eius unde quia deserunt iusto. assumenda eligendi recusandae at rerum dolores dolores vitae amet odit delectus. aliquid voluptates at quaerat molestiae commodi veritatis voluptatem et asperiores suscipit tempore impedit eos ratione.