Overview

Back to top
Link to section

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

Figure

Live
Added in version 0.1.0
Back to top
Link to section

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

Only use <figure> and <figcaption> elements if they make semantic sense.

<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

Live
Added in version 0.1.0
Last updated in version 0.6.0
Back to top
Link to section

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 caption

Thumbnail caption Copyright holder

<!-- 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

Live
Added in version 0.1.0
Last updated in version 0.3.0
Back to top
Link to section

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.

Jumbotron title

<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>