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-imageclass for the image - a
<figcaption>element with the.bsk-image-copyright-attributionclass 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
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>