Billboard

A billboard is composed of a full-width background image, a title, and supporting copy.


Title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Title 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sage Component

SageBillboard
<div class="sage-row" style="height:500px">
  <div class="sage-col--md-6">
    <%= sage_component SageBillboard, {
      img: "billboard/background_1.jpg",
      message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      title: "Title 1",
      title_tag: "h2"
    } %>
  </div>
  <div class="sage-col--md-6">
    <%= sage_component SageBillboard, {
      img: "billboard/background_2.jpg",
      message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      title: "Title 2"
    } %>
  </div>
</div><br />
<div class="sage-row" style="height:500px">
  <div class="sage-col--md-6">
    <%= sage_component SageBillboard, {
      img: "billboard/background_3.jpg",
      message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      title: "Title 3"
    } %>
  </div>
  <div class="sage-col--md-6">
    <%= sage_component SageBillboard, {
      img: "billboard/background_4.jpg",
      message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      title: "Title 4"
    } %>
  </div>
</div>
Property Description Type Default

img

Sets the src attribute for the component.

String

nil

message

Sets the message text for the component.

String

nil

title

Sets the title for the component.

String

nil

title_tag

Sets the heading tag (h1 - h6) for the component's title tag

String

nil