tile

A tile can be used to contain additional content such as text and images.

Tiles open a defined area of an application, similar to anchor links.

In contrast to buttons, tiles do not trigger any function.

Tiles come with:

two background variations: secondary and contrast.
four highlight fill variations: purple, blue, turquoise, and green.

Please be aware that the shown spacings and sizes are only demonstrators and will not be part of the tile styles. For a usage of the tile to build an other component, e.g. a teaser, the spacing and sizes have to follow the BDDS.

We implemented the focus-visible state for highlighting focusable elements when using the tab key to navigate. The Tile is following the common behaviour, except for the two background variations secondary and contrast. For them, we have to set the outline and color between Tile and outline manually to fit all color modes and background types. The color between Tile and outline fits always the selected background type, the color of the outline fits always the value of the CSS property of --plain__enabled__front__default.

table of content

description
component variations
style scss

component variations

Default Tile with Primary Background

Open on blank page

Category

Headline

Subheadline

<div class="a-tile">
  <a
    href="/#"
    aria-label="Link for Default Tile with Primary Background"
    class="a-tile__link"
    target="_blank"
  >
    <div class="a-text" style="padding:2rem">
      <span class="-size-s" style="display:block;margin-bottom:0.5rem">
        Category
      </span>
      <h3 class="-size-xl" style="margin-bottom:0.5rem;margin-top:0">
        Headline
        <i
          class="a-icon ui-ic-inline-right-bold"
          style="margin-left:0.5rem;font-size:24px;vertical-align:baseline"
        ></i>
      </h3>
      <p class="-size-m" style="margin:0">Subheadline</p>
    </div>
  </a>
</div>

Tile with Secondary Background

Open on blank page

Category

Headline

Subheadline

<div class="a-tile -secondary">
  <a
    href="/#"
    aria-label="Link for Tile with Secondary Background"
    class="a-tile__link"
    target="_blank"
  >
    <div class="a-text" style="padding:2rem">
      <span class="-size-s" style="display:block;margin-bottom:0.5rem">
        Category
      </span>
      <h3 class="-size-xl" style="margin-bottom:0.5rem;margin-top:0">
        Headline
        <i
          class="a-icon ui-ic-inline-right-bold"
          style="margin-left:0.5rem;font-size:24px;vertical-align:baseline"
        ></i>
      </h3>
      <p class="-size-m" style="margin:0">Subheadline</p>
    </div>
  </a>
</div>

Tile with Contrast Background

Open on blank page

Category

Headline

Subheadline

<div class="a-tile -contrast">
  <a
    href="/#"
    aria-label="Link for Tile with Contrast Background"
    class="a-tile__link"
    target="_blank"
  >
    <div class="a-text" style="padding:2rem">
      <span class="-size-s" style="display:block;margin-bottom:0.5rem">
        Category
      </span>
      <h3 class="-size-xl" style="margin-bottom:0.5rem;margin-top:0">
        Headline
        <i
          class="a-icon ui-ic-inline-right-bold"
          style="margin-left:0.5rem;font-size:24px;vertical-align:baseline"
        ></i>
      </h3>
      <p class="-size-m" style="margin:0">Subheadline</p>
    </div>
  </a>
</div>

Tile with Purple Fill

Open on blank page

Category

Headline

Subheadline

<div class="a-tile -purple">
  <a
    href="/#"
    aria-label="Link for Tile with Purple Fill"
    class="a-tile__link"
    target="_blank"
  >
    <div class="a-text" style="padding:2rem">
      <span class="-size-s" style="display:block;margin-bottom:0.5rem">
        Category
      </span>
      <h3 class="-size-xl" style="margin-bottom:0.5rem;margin-top:0">
        Headline
        <i
          class="a-icon ui-ic-inline-right-bold"
          style="margin-left:0.5rem;font-size:24px;vertical-align:baseline"
        ></i>
      </h3>
      <p class="-size-m" style="margin:0">Subheadline</p>
    </div>
  </a>
</div>

Tile with Blue Fill

Open on blank page

Category

Headline

Subheadline

<div class="a-tile -blue">
  <a
    href="/#"
    aria-label="Link for Tile with Blue Fill"
    class="a-tile__link"
    target="_blank"
  >
    <div class="a-text" style="padding:2rem">
      <span class="-size-s" style="display:block;margin-bottom:0.5rem">
        Category
      </span>
      <h3 class="-size-xl" style="margin-bottom:0.5rem;margin-top:0">
        Headline
        <i
          class="a-icon ui-ic-inline-right-bold"
          style="margin-left:0.5rem;font-size:24px;vertical-align:baseline"
        ></i>
      </h3>
      <p class="-size-m" style="margin:0">Subheadline</p>
    </div>
  </a>
</div>

Tile with Turquoise Fill

Open on blank page

Category

Headline

Subheadline

<div class="a-tile -turquoise">
  <a
    href="/#"
    aria-label="Link for Tile with Turquoise Fill"
    class="a-tile__link"
    target="_blank"
  >
    <div class="a-text" style="padding:2rem">
      <span class="-size-s" style="display:block;margin-bottom:0.5rem">
        Category
      </span>
      <h3 class="-size-xl" style="margin-bottom:0.5rem;margin-top:0">
        Headline
        <i
          class="a-icon ui-ic-inline-right-bold"
          style="margin-left:0.5rem;font-size:24px;vertical-align:baseline"
        ></i>
      </h3>
      <p class="-size-m" style="margin:0">Subheadline</p>
    </div>
  </a>
</div>

Tile with Green Fill

Open on blank page

Category

Headline

Subheadline

<div class="a-tile -green">
  <a
    href="/#"
    aria-label="Link for Tile with Green Fill"
    class="a-tile__link"
    target="_blank"
  >
    <div class="a-text" style="padding:2rem">
      <span class="-size-s" style="display:block;margin-bottom:0.5rem">
        Category
      </span>
      <h3 class="-size-xl" style="margin-bottom:0.5rem;margin-top:0">
        Headline
        <i
          class="a-icon ui-ic-inline-right-bold"
          style="margin-left:0.5rem;font-size:24px;vertical-align:baseline"
        ></i>
      </h3>
      <p class="-size-m" style="margin:0">Subheadline</p>
    </div>
  </a>
</div>

Tile with Image on a Secondary Background

Open on blank page

Category

Headline

Subheadline

<div class="a-tile -secondary">
  <a
    href="/#"
    aria-label="Link for Tile with Image on a Secondary Background"
    class="a-tile__link"
    target="_blank"
  >
    <figure class="a-image">
      <div class="a-image__ratioWrapper">
        <img
          src="https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg"
          srcset="
            https://brandguide-cdn.azureedge.net/frontend-kit/example-image-400w.jpg   400w,
            https://brandguide-cdn.azureedge.net/frontend-kit/example-image-800w.jpg   800w,
            https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg 1600w
          "
          alt="Lorem ipsum dolor sit amet"
        />
      </div>
    </figure>
    <div class="a-text" style="padding:2rem">
      <span class="-size-s" style="display:block;margin-bottom:0.5rem">
        Category
      </span>
      <h3 class="-size-xl" style="margin-bottom:0.5rem;margin-top:0">
        Headline
        <i
          class="a-icon ui-ic-inline-right-bold"
          style="margin-left:0.5rem;font-size:24px;vertical-align:baseline"
        ></i>
      </h3>
      <p class="-size-m" style="margin:0">Subheadline</p>
    </div>
  </a>
</div>

Small Tile on a Contrast Background

Open on blank page

Category

Headline

Subheadline

<div class="a-tile -contrast">
  <a
    href="/#"
    aria-label="Link for Small Tile on a Contrast Background"
    class="a-tile__link"
    target="_blank"
  >
    <div class="a-text" style="padding:1rem">
      <span class="-size-s" style="display:block;margin-bottom:0.5rem">
        Category
      </span>
      <h3 class="-size-l" style="margin-bottom:0.5rem;margin-top:0">
        Headline
        <i
          class="a-icon ui-ic-inline-right-bold"
          style="margin-left:0.5rem;font-size:24px;vertical-align:baseline"
        ></i>
      </h3>
      <p class="-size-m" style="margin:0">Subheadline</p>
    </div>
  </a>
</div>

additional content

styles SCSS

/* stylelint-disable no-descending-specificity */
.a-tile {
  // default styling and reset

  a {
    display: block;
  }

  a,
  a:hover {
    color: var(--plain__enabled__front__default);
    text-decoration: none;
  }

  &:hover {
    background: var(--plain__enabled__fill__hovered);

    .a-tile__link {
      text-decoration: none;
    }
  }

  &:active {
    background: var(--plain__enabled__fill__pressed);
  }

  &.-secondary a:focus-visible,
  &.-contrast a:focus-visible {
    outline-color: var(--focus-color);
  }

  // Major Highlight Purple
  &.-purple {
    background: var(--major-highlight-purple__enabled__fill__default);
    color: var(--major-highlight-purple__enabled__front__default);

    a,
    a:hover {
      color: var(--major-highlight-purple__enabled__front__default);
    }

    &:hover {
      background: var(--major-highlight-purple__enabled__fill__hovered);
      color: var(--major-highlight-purple__enabled__front__hovered);
    }

    &:active {
      background: var(--major-highlight-purple__enabled__fill__pressed);
      color: var(--major-highlight-purple__enabled__front__pressed);
    }
  }

  // Major Highlight Blue
  &.-blue {
    background: var(--major-highlight-blue__enabled__fill__default);
    color: var(--major-highlight-blue__enabled__front__default);

    a,
    a:hover {
      color: var(--major-highlight-blue__enabled__front__default);
    }

    &:hover {
      background: var(--major-highlight-blue__enabled__fill__hovered);
      color: var(--major-highlight-blue__enabled__front__hovered);
    }

    &:active {
      background: var(--major-highlight-blue__enabled__fill__pressed);
      color: var(--major-highlight-blue__enabled__front__pressed);
    }
  }

  // Major Highlight Turquoise
  &.-turquoise {
    background: var(--major-highlight-turquoise__enabled__fill__default);
    color: var(--major-highlight-turquoise__enabled__front__default);

    a,
    a:hover {
      color: var(--major-highlight-turquoise__enabled__front__default);
    }

    &:hover {
      background: var(--major-highlight-turquoise__enabled__fill__hovered);
      color: var(--major-highlight-turquoise__enabled__front__hovered);
    }

    &:active {
      background: var(--major-highlight-turquoise__enabled__fill__pressed);
      color: var(--major-highlight-turquoise__enabled__front__pressed);
    }
  }

  // Major Highlight Green
  &.-green {
    background: var(--major-highlight-green__enabled__fill__default);
    color: var(--major-highlight-green__enabled__front__default);

    a,
    a:hover {
      color: var(--major-highlight-green__enabled__front__default);
    }

    &:hover {
      background: var(--major-highlight-green__enabled__fill__hovered);
      color: var(--major-highlight-green__enabled__front__hovered);
    }

    &:active {
      background: var(--major-highlight-green__enabled__fill__pressed);
      color: var(--major-highlight-green__enabled__front__pressed);
    }
  }
}


/**
  light mode for secondary and contrast background on Tile
 */
.-light-mode .-primary .a-tile {
  &.-secondary a,
  &.-contrast a {
    --focus-color: var(--bosch-black);

    &:after {
      --background: var(--bosch-white);
    }
  }
}

.-light-mode .-secondary .a-tile {
  &.-secondary a,
  &.-contrast a {
    --focus-color: var(--bosch-black);

    &:after {
      --background: var(--bosch-gray-95);
    }
  }
}

.-light-mode .-contrast .a-tile {
  &.-secondary a,
  &.-contrast a {
    --focus-color: var(--bosch-white);

    &:after {
      --background: var(--bosch-gray-20);
    }
  }
}

.-light-mode .-floating .a-tile {
  &.-secondary a,
  &.-contrast a {
    --focus-color: var(--bosch-black);

    &:after {
      --background: var(--bosch-white);
    }
  }
}


/**
  dark mode for secondary and contrast background on Tile
 */
.-dark-mode .-primary .a-tile {
  &.-secondary a,
  &.-contrast a {
    --focus-color: var(--bosch-gray-95);

    &:after {
      --background: var(--bosch-black);
    }
  }
}

.-dark-mode .-secondary .a-tile {
  &.-secondary a,
  &.-contrast a {
    --focus-color: var(--bosch-gray-95);

    &:after {
      --background: var(--bosch-gray-10);
    }
  }
}

.-dark-mode .-contrast .a-tile {
  &.-secondary a,
  &.-contrast a {
    --focus-color: var(--bosch-gray-95);

    &:after {
      --background: var(--bosch-gray-20);
    }
  }
}

.-dark-mode .-floating .a-tile {
  &.-secondary a,
  &.-contrast a {
    --focus-color: var(--bosch-gray-95);

    &:after {
      --background: var(--bosch-gray-10);
    }
  }
}