AXA Design System Lib Documentation v1.0.0

A slideshow component allowing you to scroll horizontally through images and texts. Be careful with the type of image used in order to avoid a poor readability of your content. It’s recommended not to push too much content, the more there is the less the user will go to the end and some content will be missed.

Example

With caption

Includes only a caption for the information to be displayed.

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

<div
  id="carouselExampleCaptions"
  class="carousel slide"
  data-bs-ride="carousel"
  data-bs-interval="false"
>
  <ol class="carousel-indicators">
    <li
      data-bs-target="#carouselExampleCaptions"
      data-bs-slide-to="0"
      class="active"
    ></li>
    <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
    <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div
        style="
          height: 400px;
          background-image: url('...');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        "
      ></div>
      <div class="carousel-caption">
        <h3>First slide label</h3>
        <p>
          <small
            >Some representative placeholder content for the first slide.</small
          >
        </p>
      </div>
    </div>
    <div class="carousel-item">
      <div
        style="
          height: 400px;
          background-image: url('...');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        "
      ></div>
      <div class="carousel-caption">
        <h3>Second slide label</h3>
        <p>
          <small
            >Some representative placeholder content for the second
            slide.</small
          >
        </p>
      </div>
    </div>
    <div class="carousel-item">
      <div
        style="
          height: 400px;
          background-image: url('...');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        "
      ></div>
      <div class="carousel-caption">
        <h3>Third slide label</h3>
        <p>
          <small
            >Some representative placeholder content for the third slide.</small
          >
        </p>
      </div>
    </div>
    <a
      class="carousel-control-prev"
      href="#carouselExampleCaptions"
      role="button"
      data-bs-slide="prev"
    >
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </a>
    <a
      class="carousel-control-next"
      href="#carouselExampleCaptions"
      role="button"
      data-bs-slide="next"
    >
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </a>
  </div>
</div>

With Title

Use the new AXA class carousel-title to add titles elements at the center of the carousel.

subtitle

Carousel main title

Some representative placeholder content for the first slide.

subtitle

Carousel second title

Some representative placeholder content for the second slide.

subtitle

Carousel third title

Some representative placeholder content for the third slide.

<div id="carouselExampleTitle" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
  <li
    data-bs-target="#carouselExampleTitle"
    data-bs-slide-to="0"
    class="active"
  ></li>
  <li data-bs-target="#carouselExampleTitle" data-bs-slide-to="1"></li>
  <li data-bs-target="#carouselExampleTitle" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
  <div class="carousel-item active">
    <div
      class=""
      style="
        min-width: 800px;
        min-height: 400px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        background-image: url('...');
      "
    ></div>
    <div class="carousel-title d-block">
      <h5 class="mb-3">subtitle</h5>
      <p class="display-4">Carousel main title</p>
      <p>Some representative placeholder content for the first slide.</p>
    </div>
  </div>
  <div class="carousel-item">
    <div
      style="
        height: 400px;
        background-image: url('...');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
      "
    ></div>
    <div class="carousel-title d-block">
      <h5 class="mb-3">subtitle</h5>
      <p class="display-4">Carousel second title</p>
      <p>Some representative placeholder content for the second slide.</p>
    </div>
  </div>
  <div class="carousel-item">
    <div
      style="
        height: 400px;
        background-image: url('...');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
      "
    ></div>
    <div class="carousel-title d-block">
      <h5 class="mb-3">subtitle</h5>
      <p class="display-4">Carousel third title</p>
      <p>Some representative placeholder content for the third slide.</p>
    </div>
  </div>
  <a
    class="carousel-control-prev"
    href="#carouselExampleTitle"
    role="button"
    data-bs-slide="prev"
  >
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a
    class="carousel-control-next"
    href="#carouselExampleTitle"
    role="button"
    data-bs-slide="next"
  >
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>
</div>

With mask

Use the new AXA class carousel-mask to add opacity for each elements required inside carousel-item (images, etc.).

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

subtitle

Carousel main title

Some representative placeholder content for the first slide.

subtitle

Carousel second title

Some representative placeholder content for the second slide.

subtitle

Carousel third title

Some representative placeholder content for the third slide.

<div
  id="carouselExampleTitleMask"
  class="carousel slide"
  data-bs-ride="carousel"
>
  <ol class="carousel-indicators">
    <li
      data-bs-target="#carouselExampleTitleMask"
      data-bs-slide-to="0"
      class="active"
    ></li>
    <li data-bs-target="#carouselExampleTitleMask" data-bs-slide-to="1"></li>
    <li data-bs-target="#carouselExampleTitleMask" data-bs-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div
        class="carousel-mask"
        style="
          height: 400px;
          background-image: url('...');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        "
      ></div>
      <div class="carousel-title d-block">
        <h5 class="mb-3">subtitle</h5>
        <p class="display-4">Carousel main title</p>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <div
        class="carousel-mask"
        style="
          height: 400px;
          background-image: url('...');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        "
      ></div>
      <div class="carousel-title d-block">
        <h5 class="mb-3">subtitle</h5>
        <p class="display-4">Carousel second title</p>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <div
        class="carousel-mask"
        style="
          height: 400px;
          background-image: url('...');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        "
      ></div>
      <div class="carousel-title d-block">
        <h5 class="mb-3">subtitle</h5>
        <p class="display-4">Carousel third title</p>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
    <a
      class="carousel-control-prev"
      href="#carouselExampleTitleMask"
      role="button"
      data-bs-slide="prev"
    >
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </a>
    <a
      class="carousel-control-next"
      href="#carouselExampleTitleMask"
      role="button"
      data-bs-slide="next"
    >
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </a>
  </div>
</div>

Dark mode

Use the new AXA class carousel-dark to set carousel texts, indicators and icons in dark mode.

subtitle

Carousel main title

Some representative placeholder content for the first slide.

subtitle

Carousel second title

Some representative placeholder content for the second slide.

subtitle

Carousel third title

Some representative placeholder content for the third slide.

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

 
<div  id="carouselExampleCaptionDarkMode" class="carousel slide carousel-dark" data-bs-ride="carousel" >
  <ol class="carousel-indicators">
    <li
      data-bs-target="#carouselExampleCaptionDarkMode"
      data-bs-slide-to="0"
      class="active" >
    </li>
    <li
      data-bs-target="#carouselExampleCaptionDarkMode"
      data-bs-slide-to="1">
    </li>
    <li
      data-bs-target="#carouselExampleCaptionDarkMode"
      data-bs-slide-to="2">
    </li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div
        style="
          height: 400px;
          background-image: url('...');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        "
      ></div>
      <div class="carousel-caption">
        <h3>First slide label</h3>
        <p>
          <small
            >Some representative placeholder content for the first slide.</small
          >
        </p>
      </div>
    </div>
    <div class="carousel-item">
      <div
        style="
          height: 400px;
          background-image: url('...');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        "
      ></div>
      <div class="carousel-caption">
        <h3>Second slide label</h3>
        <p>
          <small
            >Some representative placeholder content for the second
            slide.</small
          >
        </p>
      </div>
    </div>
    <div class="carousel-item">
      <div
        style="
          height: 400px;
          background-image: url('...');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        "
      ></div>
      <div class="carousel-caption">
        <h3>Third slide label</h3>
        <p>
          <small
            >Some representative placeholder content for the third slide.</small
          >
        </p>
      </div>
    </div>
    <a
      class="carousel-control-prev"
      href="#carouselExampleCaptionDarkMode"
      role="button"
      data-bs-slide="prev"
    >
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </a>
    <a
      class="carousel-control-next"
      href="#carouselExampleCaptionDarkMode"
      role="button"
      data-bs-slide="next"
    >
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </a>
  </div>
</div>

Dark mode with mask

Adding a dark or light mask can help make the text more readable.

subtitle

Carousel main title

Some representative placeholder content for the first slide.

subtitle

Carousel second title

Some representative placeholder content for the second slide.

subtitle

Carousel third title

Some representative placeholder content for the third slide.

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

<div
  id="carouselExampleCaptionDarkModeMask"
  class="carousel slide carousel-dark carousel-mask"
  data-bs-ride="carousel" >
  <ol class="carousel-indicators">
    <li
      data-bs-target="#carouselExampleCaptionDarkModeMask"
      data-bs-slide-to="0"
      class="active"
    ></li>
    <li
      data-bs-target="#carouselExampleCaptionDarkModeMask"
      data-bs-slide-to="1"
    ></li>
    <li
      data-bs-target="#carouselExampleCaptionDarkModeMask"
      data-bs-slide-to="2"
    ></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div
        class="carousel-mask"
        style="
          height: 400px;
          background-image: url('...');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        "
      ></div>
      <div class="carousel-caption">
        <h3>First slide label</h3>
        <p>
          <small
            >Some representative placeholder content for the first slide.</small
          >
        </p>
      </div>
    </div>
    <div class="carousel-item">
      <div
        class="carousel-mask"
        style="
          height: 400px;
          background-image: url('...');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        "
      ></div>
      <div class="carousel-caption">
        <h3>Second slide label</h3>
        <p>
          <small
            >Some representative placeholder content for the second
            slide.</small
          >
        </p>
      </div>
    </div>
    <div class="carousel-item">
      <div
        class="carousel-mask"
        style="
          height: 400px;
          background-image: url('...');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        "
      ></div>
      <div class="carousel-caption">
        <h3>Third slide label</h3>
        <p>
          <small
            >Some representative placeholder content for the third slide.</small
          >
        </p>
      </div>
    </div>
    <a
      class="carousel-control-prev"
      href="#carouselExampleCaptionDarkModeMask"
      role="button"
      data-bs-slide="prev"
    >
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </a>
    <a
      class="carousel-control-next"
      href="#carouselExampleCaptionDarkModeMask"
      role="button"
      data-bs-slide="next"
    >
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </a>
  </div>
</div>

Documentation

Components

First slide label

Second slide label

Third slide label

subtitle

subtitle

subtitle

First slide label

Second slide label

Third slide label

subtitle

subtitle

subtitle

subtitle

subtitle

subtitle

First slide label

Second slide label

Third slide label

subtitle

subtitle

subtitle

First slide label

Second slide label

Third slide label