Custom components

Background image

Basic example

Heading

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Heading

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

<div class="bg--image">
  <img class="bg--image--background" src="…" alt="…" />
  <div class="bg--image--content">
    …
  </div>
</div>

Content with ratio

Heading

Nullam id dolor id nibh ultricies vehicula ut id elit.

Heading

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac  facilisis in, egestas eget quam.

<div class="bg--image">
  <img class="bg--image--background" src="…" alt="…" />
  <div class="bg--image--content">
    <div class="ratio">
      <div>
        …
      </div>
    </div>
  </div>
</div>

Content align

Middle (default)

Heading

Nullam id dolor id nibh ultricies vehicula ut id elit.

Top

Heading

Nullam id dolor id nibh ultricies vehicula ut id elit.

Bottom

Heading

Nullam id dolor id nibh ultricies vehicula ut id elit.

Between

Heading

Nullam id dolor id nibh ultricies vehicula ut id elit.

<div class="text-white bg--image">
  <img class="bg--image--background" src="…">
  <div class="bg--image--content bg-dark bg-opacity-75">
    <div class="ratio">
      <div>
        <div class="p-4 w-100">
          <h1>…</h1>
          <p>…</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="text-white bg--image">
  <img class="bg--image--background" src="…">
  <div class="bg--image--content bg-dark bg-opacity-75">
    <div class="ratio">
      <div class="align-items-start">
        <div class="p-4 w-100">
          <h1>…</h1>
          <p>…</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="text-white bg--image">
  <img class="bg--image--background" src="…">
  <div class="bg--image--content bg-dark bg-opacity-75">
    <div class="ratio">
      <div class="align-items-end">
        <div class="p-4 w-100">
          <h1>…</h1>
          <p>…</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="text-white bg--image">
  <img class="bg--image--background" src="…">
  <div class="bg--image--content bg-dark bg-opacity-75">
    <div class="ratio">
      <div class="flex-column justify-content-between">
        <div class="p-4 w-100">
          <h1>…</h1>
        </div>
        <div class="p-4 w-100">
          <p class="lead mb-0">…</p>
        </div>
      </div>
    </div>
  </div>
</div>

Project Footer

Project Title

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.