NEWSLETTER HUB|BRANDHUB

We couldn’t find anything that matched your searched term

  • PAGES

  • COMPONENTS

  • Brand guidelines

  • Insights

Documentation

Components

A Hero Cover is the web banner on top of your page. It’s the entry point to your content. Keep in mind that it is the first image your visitor will see when loading your website. In most use cases, you should use commercial covers without a Switch as displayed below.

Examples
Basic Hero cover
image in a hero cover

Axa climate

Upskilling & engaging employees to succeed in the sustainable transition

We enable companies to upskill and engage all employees to succeed in the sustainable transition 


 <div class="ax-example p-md-3 border">
 <div class="hero-cover text-black" style="min-width: 470px">
  <img
    alt="image in a hero cover "
    class="card-img hero-cover-img"
    src="alt..."
  />
  <div class="hero-cover-mask mask-light-left"></div>
  <div class="cover-overlay ">
    <h3 class="cover-subtitle">Axa climate</h3>
    <p class="hero-cover-title display-5">Upskilling & engaging employees to succeed in the sustainable transition</p>
    <p class="cover-body">
      We enable companies to upskill and engage all employees to succeed in the sustainable transition
    </p>
    <p>
      <button
            type="button"
            class="btn btn-sm btn-primary"
          >
           Discover
          </button>
          <button type="button" class="btn btn-sm btn-outline-primary">
            Learn more
          </button>
</p>
  </div>
</div>
</div>
Variants

The hero cover component can have differents variants depending on text position or theme

Centered text
image in a hero cover

Axa climate

Upskilling & engaging employees to succeed in the sustainable transition

We enable companies to upskill and engage all employees to succeed in the sustainable transition 


  <div class="hero-cover text-black" style="min-width: 470px">
      <img
         alt="image in a hero cover "
         class="card-img hero-cover-img"
         src="alt..."
         />
      <div class="hero-cover-mask mask-light-center"></div>
      <div class="cover-overlay hero-cover-center ">
         <h3 class="cover-subtitle">Axa climate</h3>
         <p class="hero-cover-title display-5">Upskilling & engaging employees to succeed in the sustainable transition</p>
         <p class="cover-body">
            We enable companies to upskill and engage all employees to succeed in the sustainable transition
         </p>
         <p>
            <button
               type="button"
               class="btn btn-sm btn-primary"
               >
            Discover
            </button>
            <button type="button" class="btn btn-sm btn-outline-primary">
            Learn more
            </button>
         </p>
      </div>
   </div>
Right text
image in a hero cover

Axa climate

Upskilling & engaging employees to succeed in the sustainable transition

We enable companies to upskill and engage all employees to succeed in the sustainable transition 


  <div class="hero-cover text-black" style="min-width: 470px">
      <img
         alt="image in a hero cover "
         class="card-img hero-cover-img"
         src="alt..."
         />
      <div class="hero-cover-mask mask-light-right"></div>
      <div class="cover-overlay hero-cover-right ">
         <h3 class="cover-subtitle">Axa climate</h3>
         <p class="hero-cover-title display-5">Upskilling & engaging employees to succeed in the sustainable transition</p>
         <p class="cover-body">
            We enable companies to upskill and engage all employees to succeed in the sustainable transition
         </p>
         <p>
            <button
               type="button"
               class="btn btn-sm btn-primary"
               >
            Discover
            </button>
            <button type="button" class="btn btn-sm btn-outline-primary">
            Learn more
            </button>
         </p>
      </div>
   </div>
Left text
image in a hero cover

Axa climate

Upskilling & engaging employees to succeed in the sustainable transition

We enable companies to upskill and engage all employees to succeed in the sustainable transition 


  <div class="hero-cover text-black" style="min-width: 470px">
      <img
         alt="image in a hero cover "
         class="card-img hero-cover-img"
         src="alt..."
         />
      <div class="hero-cover-mask mask-light-left"></div>
      <div class="cover-overlay hero-cover-left ">
         <h3 class="cover-subtitle">Axa climate</h3>
         <p class="hero-cover-title display-5">Upskilling & engaging employees to succeed in the sustainable transition</p>
         <p class="cover-body">
            We enable companies to upskill and engage all employees to succeed in the sustainable transition
         </p>
         <p>
            <button
               type="button"
               class="btn btn-sm btn-primary"
               >
            Discover
            </button>
            <button type="button" class="btn btn-sm btn-outline-primary">
            Learn more
            </button>
         </p>
      </div>
   </div>
Dark theme
image in a hero cover

Axa climate

Upskilling & engaging employees to succeed in the sustainable transition

We enable companies to upskill and engage all employees to succeed in the sustainable transition 


  <div class="hero-cover text-white" style="min-width: 470px">
      <img
         alt="image in a hero cover "
         class="card-img hero-cover-img"
         src="alt..."
         />
      <div class="hero-cover-img-mask"></div>
      <div class="cover-overlay hero-cover-left ">
         <h3 class="cover-subtitle">Axa climate</h3>
         <p class="hero-cover-title display-5">Upskilling & engaging employees to succeed in the sustainable transition</p>
         <p class="cover-body">
            We enable companies to upskill and engage all employees to succeed in the sustainable transition
         </p>
         <p>
            <button
               type="button"
               class="btn btn-sm btn-primary"
               >
            Discover
            </button>
            <button type="button" class="btn btn-sm btn-outline-light">
            Learn more
            </button>
         </p>
      </div>
   </div>