Line 106: | Line 106: | ||
<div class="imageblock__content col-lg-5 col-md-3 pos-left"> | <div class="imageblock__content col-lg-5 col-md-3 pos-left"> | ||
<div class="background-image-holder"> | <div class="background-image-holder"> | ||
− | |||
</div> | </div> | ||
</div> | </div> | ||
Line 174: | Line 173: | ||
<li class="dropdown dropdown--absolute"> | <li class="dropdown dropdown--absolute"> | ||
<span class="dropdown__trigger"> | <span class="dropdown__trigger"> | ||
− | |||
</span> | </span> | ||
<div class="dropdown__container"> | <div class="dropdown__container"> | ||
Line 310: | Line 308: | ||
<div class="col-3 col-md-2"> | <div class="col-3 col-md-2"> | ||
<a href="index.html"> | <a href="index.html"> | ||
− | |||
− | |||
</a> | </a> | ||
</div> | </div> | ||
Line 331: | Line 327: | ||
<div class="bar__module"> | <div class="bar__module"> | ||
<a href="index.html"> | <a href="index.html"> | ||
− | + | ||
− | + | ||
</a> | </a> | ||
</div> | </div> | ||
Line 348: | Line 343: | ||
<div class="pos-absolute col-lg-5 imagebg hidden-sm hidden-xs" data-overlay="4"> | <div class="pos-absolute col-lg-5 imagebg hidden-sm hidden-xs" data-overlay="4"> | ||
<div class="background-image-holder"> | <div class="background-image-holder"> | ||
− | |||
</div> | </div> | ||
<div class="container pos-vertical-center pl-5"> | <div class="container pos-vertical-center pl-5"> | ||
<div class="row"> | <div class="row"> | ||
<div class="col-lg-8"> | <div class="col-lg-8"> | ||
− | |||
<span class="h2 color--white">Beautiful, modular sites in moments.</span> | <span class="h2 color--white">Beautiful, modular sites in moments.</span> | ||
<a href="#" class="btn btn--primary type--uppercase"> | <a href="#" class="btn btn--primary type--uppercase"> | ||
Line 1,300: | Line 1,293: | ||
<div class="pos-absolute col-lg-5 imagebg hidden-sm hidden-xs" data-overlay="6"> | <div class="pos-absolute col-lg-5 imagebg hidden-sm hidden-xs" data-overlay="6"> | ||
<div class="background-image-holder"> | <div class="background-image-holder"> | ||
− | |||
</div> | </div> | ||
<div class="container pos-vertical-center pl-5"> | <div class="container pos-vertical-center pl-5"> | ||
<div class="row"> | <div class="row"> | ||
<div class="col-lg-10"> | <div class="col-lg-10"> | ||
− | |||
<span class="h3 color--white">Over 290 modular interface blocks.</span> | <span class="h3 color--white">Over 290 modular interface blocks.</span> | ||
<a href="#" class="btn btn--primary type--uppercase"> | <a href="#" class="btn btn--primary type--uppercase"> | ||
Line 1,481: | Line 1,472: | ||
<div class="pos-absolute col-lg-5 imagebg hidden-sm hidden-xs" data-overlay="4"> | <div class="pos-absolute col-lg-5 imagebg hidden-sm hidden-xs" data-overlay="4"> | ||
<div class="background-image-holder"> | <div class="background-image-holder"> | ||
− | |||
</div> | </div> | ||
<div class="container pos-vertical-center pl-5"> | <div class="container pos-vertical-center pl-5"> | ||
<div class="row"> | <div class="row"> | ||
<div class="col-lg-8"> | <div class="col-lg-8"> | ||
− | |||
<span class="h3 color--white">Detailed and organised elements</span> | <span class="h3 color--white">Detailed and organised elements</span> | ||
<a href="elements.html" class="btn btn--primary type--uppercase"> | <a href="elements.html" class="btn btn--primary type--uppercase"> | ||
Line 1,722: | Line 1,711: | ||
<section class="imagebg image--light cover cover-blocks bg--secondary"> | <section class="imagebg image--light cover cover-blocks bg--secondary"> | ||
<div class="background-image-holder hidden-xs"> | <div class="background-image-holder hidden-xs"> | ||
− | |||
</div> | </div> | ||
<div class="container"> | <div class="container"> | ||
Line 1,778: | Line 1,766: | ||
<div class="row"> | <div class="row"> | ||
<div class="col-md-6"> | <div class="col-md-6"> | ||
− | |||
<ul class="list-inline list--hover"> | <ul class="list-inline list--hover"> | ||
<li class="list-inline-item"> | <li class="list-inline-item"> |
Revision as of 09:46, 25 June 2018
Gradient Backgrounds
These modular elements can be readily used and customized across pages and in different blocks.
Explore all of Stack's modular elements
at the
Element Index Page →
Gradient Background
Stack allows you to easily add an animated gradient background to elements that fades seamlessly between a list of hex colours you define in the data-gradients attribute.
<section class="imagebg" data-gradient-bg="#4876BD,#5448BD,#8F48BD,#BD48B1"> CONTENT </section>