Hero-Blur! w/ .hero-block-title.

And then you can use the hero-block-description to elaborate on why this page is going to be just what you needed!

<%= link_to 'Primary Call-To-Action', '#', class: 'js-signup-intro btn btn-primary btn-lg hero-block-cta hero-block-cta-justified l-section-close', title: 'Primary Call-To-Action' %> <%= link_to 'Secondary CTA', '#', class: 'btn btn-secondary btn-lg hero-block-cta hero-block-cta-justified l-section-close', title: "Secondary Call-To-Action" %>

<%= image_tag "forever_style_guide/artisan-logo.png", class: "hero-product-logo" %>

Use a product logo w/ your hero-block-blur, just add the hero-product-logo class.

<%= link_to 'Primary CTA', '#', class: 'btn btn-lg btn-artisan hero-block-cta', title: "Primary CTA" %> <%= link_to 'Secondary CTA', '#', class: 'btn btn-lg btn-artisan btn-inverse hero-block-cta ', title: "Secondary CTA" %>

Combine hero styles.

Use hero-specific markup as well as Bootstrap and Forever custom styles.

<%= link_to 'Include Clear Calls to Action', '#', class: 'btn btn-lg btn-valet btn-block', title: "Include Clear Calls to Action" %>

Add the .hero-shaded class to add a gradient to the top of the image. Make sure your text is legible against your image at all sizes.

<%= link_to 'Use brand colors for CTAs as appropriate', '#', class: 'btn btn-lg btn-historian l-section', title: "Use brand colors for CTAs as appropriate" %>

Use these styles and your unique hero image to craft a compelling message.

<%= link_to 'This CTA is wicked persuasive', '#', class: 'btn btn-lg btn-primary l-section-close', title: "This CTA is wicked persuasive" %>