Download and user instructions

From now on, you can proudly use the Speakers Club Certified Badge on your own promotional channels and resources.

Especially for you, we have set up this handy page so you can download the right Badge(s) here.

File types and formats

  • SVG

    SVG stands for Scalable Vector Graphics. It is a vector file type very suitable for the web.

  • PNG

    PNG stands for Portable Network Graphic and is a raster file type for images that supports transparent and semi-transparent background.

  • JPG

    Jpg stands for 'Joint Photographic Experts Group'. This format is ideally suited for photographic material with many colours. Does not support transparent backgrounds.

  • EPS

    EPS is a vector file type often used for professional and high-quality image printing.

Legend

Instructions

Preferences
The preferred badge is the one with file name 'SC-CB-PS-FC-LightBG'. It can be used on white or very light backgrounds. 

Alternative options are: 

  • SC-CB-PS-FC-LightShade-LightBG
  • SC-CB-PS-FC-Dark-LightBG
  • SC-CB-PS-FC-DarkShade-LightBG
  • SC-CB-PS-FC-Contour-Black-LightBG

 

How to use the badge on dark backgrounds?

For use on dark backgrounds or for placing over images, the variants 'SC-CB-PS-FC-Light-DarkBG' or 'SC-CB-PS-FC-Contour-White-DarkBG' be used.

HTML

    
     <div id="keurmerktlap">
  <a href="https://www.speakersclub.nl/en/specialisms/talk-like-a-pro-gramme/" target="_blank"><img decoding="async" src="https://www.speakersclub.nl/wp-content/uploads/2022/07/CertifiedBadge-OpWit.png"></a>
</div>
    
   

CSS

    
     #keurmerktlap {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
text-align:centre;
}
#keurmerktlap img {
width:100%;
}
#keurmerktlap:before {
content: ''
position: absolute;
top: 0;
left: -100px;
width: 70px;
height: 90%;
background: rgba(255,255,255, 0.3);
transform: skewX(-30deg);
animation-name: slide;
animation-duration: 7s;
animation-timing-function: ease-in-out;
animation-delay: .3s;
animation-iteration-count: infinite;
animation-direction: alternate;
background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}
@keyframes slide {
  0% {
    left: -100;
    top: 0;
  }
  50% {
    left: 120px;
    top: 0px;
  }
  100% {
    left: 290px;
    top: 0;
  }
}</xmp