• Typography
  • Buttons
  • Inputs
  • Controls
  • Navigation
  • Notifications
  • Boxes
  • Tables
  • Icons
  • Media
  • Components
  • View the code

    Image

    Image Description
     
    <img src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image Description" />
  • View the code

    Image with Border and Box-Shadow

    Image Description
     
    <img class="border box-shadow" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image Description" />
  • View the code

    Image with Border, Box-Shadow and Caption

    Image Description Caption
     
    <div class="box img with-border">
        <img class="border box-shadow" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image Description" />
        <span class="caption">Caption</span>
    </div>
  • View the code

    Image Thumbs

    • Thumb
    • Thumb
    • Thumb
    • Thumb
    • Thumb
    • Thumb
    • Thumb
    • Thumb
    • Thumb
    • Thumb
     
    <ul class="list thumbs">
        <li class="item">
            <a class="link img" href="assets/img/samples/1-thumb.jpg" title="View Full Image" data-rel="thumbs"><img class="thumb" src="assets/img/samples/1-thumb.jpg" width="480" height="480" alt="Thumb" /></a>
        </li>
        <li class="item">
            <a class="link img" href="assets/img/samples/2-thumb.jpg" title="View Full Image" data-rel="thumbs"><img class="thumb" src="assets/img/samples/2-thumb.jpg" width="480" height="480" alt="Thumb" /></a>
        </li>
        <li class="item">
            <a class="link img" href="assets/img/samples/2-thumb.jpg" title="View Full Image" data-rel="thumbs"><img class="thumb" src="assets/img/samples/2-thumb.jpg" width="480" height="480" alt="Thumb" /></a>
        </li>
        <li class="item">
            <a class="link img" href="assets/img/samples/3-thumb.jpg" title="View Full Image" data-rel="thumbs"><img class="thumb" src="assets/img/samples/3-thumb.jpg" width="480" height="480" alt="Thumb" /></a>
        </li>
        <li class="item">
            <a class="link img" href="assets/img/samples/4-thumb.jpg" title="View Full Image" data-rel="thumbs"><img class="thumb" src="assets/img/samples/4-thumb.jpg" width="480" height="480" alt="Thumb" /></a>
        </li>
        <li class="item">
            <a class="link img" href="assets/img/samples/5-thumb.jpg" title="View Full Image" data-rel="thumbs"><img class="thumb" src="assets/img/samples/5-thumb.jpg" width="480" height="480" alt="Thumb" /></a>
        </li>
        <li class="item">
            <a class="link img" href="assets/img/samples/6-thumb.jpg" title="View Full Image" data-rel="thumbs"><img class="thumb" src="assets/img/samples/6-thumb.jpg" width="480" height="480" alt="Thumb" /></a>
        </li>
        <li class="item">
            <a class="link img" href="assets/img/samples/7-thumb.jpg" title="View Full Image" data-rel="thumbs"><img class="thumb" src="assets/img/samples/7-thumb.jpg" width="480" height="480" alt="Thumb" /></a>
        </li>
        <li class="item">
            <a class="link img" href="assets/img/samples/8-thumb.jpg" title="View Full Image" data-rel="thumbs"><img class="thumb" src="assets/img/samples/8-thumb.jpg" width="480" height="480" alt="Thumb" /></a>
        </li>
        <li class="item">
            <a class="link img" href="assets/img/samples/9-thumb.jpg" title="View Full Image" data-rel="thumbs"><img class="thumb" src="assets/img/samples/9-thumb.jpg" width="480" height="480" alt="Thumb" /></a>
        </li>
    </ul>
  • View the code

    Native HTML5 Audio Player

    Your browser does not support the audio element.
     
    <audio src="assets/media/demo-audio.mp3" preload="auto" controls>
         Your browser does not support the <code>audio</code> element.
    </audio>
  • View the code

    Native HTML5 Video Player

    Your browser does not support the video element.
     
    <video controls>
      <source src="assets/media/demo-video.ogv" type="video/ogg">
      <source src="assets/media/demo-video.mp4" type="video/mp4">
      Your browser does not support the <code>video</code> element.
    </video>
  • View the code

    SoundCloud Player

     
    <object height="81" width="100%" id="myPlayer" class="soundCloud" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
        <param name="movie" value="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fsoundcloud.com%2Fmatas%2Fhobnotropic&enable_api=true&object_id=myPlayer"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed allowscriptaccess="always" height="81" src="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fsoundcloud.com%2Fmatas%2Fhobnotropic&enable_api=true&object_id=myPlayer" type="application/x-shockwave-flash" width="100%" name="myPlayer"></embed>
    </object>
  • View the code

    YouTube Player

     
    <iframe width="560" height="315" src="http://www.youtube.com/embed/GaSjwAu3yrI?rel=0&html5=1" frameborder="0" allowfullscreen></iframe>
  • View the code

    Vimeo Player

     
    <iframe class="vimeo" src="http://player.vimeo.com/video/85037704" width="560" height="315" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Blackhole - Released under MIT license