4.2 components.banner Banner
Toggle example guides Toggle HTML markup
Currently, this is a full-width banner to be used on the homepage only. A future version of this component will provide banner functionality throughout the entire website.
The optional Overlay Graphic can be aligned left, center or right on the tablet/desktop version of the site, but will always be centered on mobile.
NOTE: The blue background denotes a background image and does not display properly on this style guide when the browser width is larger than 1700px, as it's expecting the container to run the full width of the browser.
Here's a Headline
“Here is one of the few effective keys to the design problem: the ability of the designer to recognize as many of the constraints as possible; his willingness and enthusiasm for working within these constraints.” –Charles Eames
Here's a Headline
“Here is one of the few effective keys to the design problem: the ability of the designer to recognize as many of the constraints as possible; his willingness and enthusiasm for working within these constraints.” –Charles Eames
Here's a Headline
“Here is one of the few effective keys to the design problem: the ability of the designer to recognize as many of the constraints as possible; his willingness and enthusiasm for working within these constraints.” –Charles Eames
Here's a Headline
“Here is one of the few effective keys to the design problem: the ability of the designer to recognize as many of the constraints as possible; his willingness and enthusiasm for working within these constraints.” –Charles Eames
Markup: components/banner/banner.twig
<div class="banner">
<div class="banner--image">
<svg width="1720" height="320"><rect width="100%" height="100%" fill="#c4daf1"></rect></svg>
</div>
<div class="banner--overlay {{modifier_class}}">
<div class="overlay-inner">
<svg height="104" width="204"><ellipse cx="102" cy="52" rx="100" ry="50"
style="fill:#555;stroke:#333;stroke-width:2" /></svg>
</div>
</div>
<div class="banner--content-wrapper">
<div class="banner--content">
<h2 class="banner--headline">Here's a Headline</h2>
<div class="banner--body">
<p>“Here is one of the few effective keys to the design problem: the ability of the designer to recognize as many of the constraints as possible; his willingness and enthusiasm for working within these constraints.” –Charles Eames</p>
</div>
<a href="//localhost:3002/contact-us" class="banner--button">Call to Action</a></div>
</div>
</div>
sass/components/banner/_banner.scss, line 1