Skip to main content

Image copyright

Overview

Use the .bsk-image-copyright class as a container to identify the copyright holder of an image or other media item.

Use the .bsk-image-copyright-image class on the image or media item.

Use the .bsk-image-copyright-attribution class to specify the attribution information for the image or media item.

This attribution can also include a link, for example to purchase an image from the BAS Image Collection

Supported elements

Figure

Use a <figure> element with the .bsk-image-copyright class containing:

  • an <img> element with the `.bsk-image-copyright-image` class for the image
  • a <figcaption> element with the `.bsk-image-copyright-attribution` class for the attribution

If a <figure> and <figcaption> don’t make semantic sense use <div>’s instead.

<figure class="bsk-image-copyright">
  <img class="bsk-image-copyright-image" src="/img/placeholder-800-600.png" alt="placeholder image">
  <figcaption class="bsk-image-copyright-attribution">Copyright holder</figcaption>
</figure>

Optionally the attribution information can be a link.

<figure class="bsk-image-copyright">
  <img class="bsk-image-copyright-image" src="/img/placeholder-800-600.png" alt="placeholder image">
  <figcaption class="bsk-image-copyright-attribution"><a href="https://www.example.com">Copyright holder</a></figcaption>
</figure>

Thumbnail

Add the .bsk-image-copyright class to a thumbnail, containing an <img> with the .bsk-image-copyright-image class.

If the thumbnail has a caption, include a <div> element for the attribution with the .bsk-image-copyright-attribution and .bsk-pull-right classes.

<!-- Thumbnail using a div element with a caption -->
<div class="bsk-thumbnail bsk-thumbnail-default bsk-image-copyright">
  <img class="bsk-image-copyright-image" src="/img/placeholder-800-600.png" alt="thumbnail">
  <div class="bsk-caption">
    Thumbnail caption
    <div class="bsk-image-copyright-attribution bsk-pull-right">Copyright holder</div>
  </div>
</div>

<!-- Thumbnail using a div element with a caption and linked attribution -->
<div class="bsk-thumbnail bsk-thumbnail-default bsk-image-copyright">
  <img class="bsk-image-copyright-image" src="/img/placeholder-800-600.png" alt="thumbnail">
  <div class="bsk-caption">
    Thumbnail caption
    <a href="https://www.example.com" class="bsk-image-copyright-attribution bsk-pull-right">Copyright holder</a>
  </div>
</div>

If the thumbnail doesn’t have a caption, use a <div> element for the attribution with the .bsk-image-copyright-attribution class.

<!-- Thumbnail using a div element without a caption -->
<div class="bsk-thumbnail bsk-thumbnail-default bsk-image-copyright">
  <img class="bsk-image-copyright-image" src="/img/placeholder-800-600.png" alt="placeholder image">
  <div class="bsk-image-copyright-attribution">Copyright holder</div>
</div>

<!-- Thumbnail using a div element without a caption but with a linked attribution -->
<div class="bsk-thumbnail bsk-thumbnail-default bsk-image-copyright">
  <img class="bsk-image-copyright-image" src="/img/placeholder-800-600.png" alt="placeholder image">
  <a href="https://www.example.com" class="bsk-image-copyright-attribution">Copyright holder</a>
</div>

Jumbotron

Add the .bsk-image-copyright class to a jumbotron.

Use the background-image CSS property to set the image, or other media item, as its background.

Use a <div> element for the attribution with the .bsk-image-copyright-attribution class.


<div class="bsk-jumbotron bsk-jumbotron-default bsk-image-copyright">
  <h1>Jumbotron title</h1>
  <div class="bsk-image-copyright-attribution">Copyright holder</div>
</div>

<br />

<!-- With linked attribution -->
<div class="bsk-jumbotron bsk-jumbotron-default bsk-image-copyright">
  <h1>Jumbotron title</h1>
  <a href="https://www.example.com" class="bsk-image-copyright-attribution">Copyright holder</a>
</div>