New This website is new, your feedback will help us to improve it.

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

placeholder image
Copyright holder
 
<figure class="bsk-image-copyright">
  <img class="bsk-image-copyright-image" src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/placeholder/placeholder-800-600.png" alt="placeholder image">
  <a href="#"><figcaption class="bsk-image-copyright-attribution">Copyright holder</figcaption></a>
</figure>

Thumbnail default

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


thumbnail
Thumbnail caption
Copyright holder
<div class="bsk-thumbnail bsk-thumbnail-default bsk-image-copyright">
  <img class="bsk-image-copyright-image" src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/placeholder/placeholder-800-600.png" alt="thumbnail">
  <div class="bsk-caption inline-flex">
      Thumbnail caption 
      <div class="bsk-image-copyright-attribution">Copyright holder</div>
  </div>
</div>

Thumbnail linked

Wrap the <div> element with an <a> class to add a link to the copyright attribution.

thumbnail
Thumbnail caption
Copyright holder
 
<div class="bsk-thumbnail bsk-thumbnail-default bsk-image-copyright">
  <img class="bsk-image-copyright-image" src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/placeholder/placeholder-800-600.png" alt="thumbnail">
  <div class="bsk-caption inline-flex">
      Thumbnail caption 
      <a href="#"><div class="bsk-image-copyright-attribution">Copyright holder</div></a>
  </div>
</div>

Jumbotron

Remove the <a> tag from around the <div> element if there is no link.

Title of card

This should be something snappy, to highlight a message and with a possible call to action.

Do something
Copyright holder
 
<div class="w-full">
  <div class="bg-gray-300 relative px-8 py-16 text-center space-y-6">
      <h2 class="font-heading font-bold text-6xl">
          Title of card
      </h2>
      <p class="text-2xl max-w-6xl mx-auto">
          This should be something snappy, to highlight a message and with a possible call to action.
      </p>
      <a class="bsk-btn bsk-btn-primary bsk-btn-lg mt-2" href="#" role="btn">Do something</a>
  </div>
  <div class="bsk-image-copyright">
      <a href="#"><div class="bsk-image-copyright-attribution">Copyright holder</div></a>
  </div>
</div>