Unity Pattern Lab

Logo

HTML

									
										<a href="#"><img src="../../images/logos/stony-brook-university-logo.jpg" class="logo" alt="Logo Alt Text" /></a>

Favicon

favicon.ico

Apple Icon

Standard Icon

HTML

									
										<h2 class="content-header">favicon.ico</h2>
<img src="../../images/favicons/favicon.ico" />

<h2 class="content-header">Apple Icon</h2>
<img src="../../images/favicons/apple-touch-icon-144x144-precomposed.png" />

<h2 class="content-header">Standard Icon</h2>
<img src="../../images/favicons/icon.png" />

Social

HTML

									
										<img src="../../images/social/facebook.png" />
<img src="../../images/social/flickr.png" />
<img src="../../images/social/google-plus.png" />
<img src="../../images/social/instagram.png" />
<img src="../../images/social/tumblr.png" />
<img src="../../images/social/twitter.png" />
<img src="../../images/social/yammer.png" />
<img src="../../images/social/youtube.png" />

Landscape 4x3

Preferred sizes for 4x3 images.

HTML

									
										<p>
    Preferred sizes for 4x3 images.
</p>
            <img src="../../placeholders/images/sbu/sac-1200x900.jpg" /><br />
            <img src="../../placeholders/images/sbu/sac-800x600.jpg" /><br />
            <img src="../../placeholders/images/sbu/sac-640x480.jpg" /><br />

Landscape 16x9

Preferred sizes for 16x9 images.

HTML

									
										<p>
    Preferred sizes for 16x9 images.
</p>
            <img src="../../placeholders/images/sbu/sac-1600x900.jpg" /><br />

            <img src="../../placeholders/images/sbu/sac-800x450.jpg" /><br />
            <img src="../../placeholders/images/sbu/sac-640x360.jpg" /><br />


            <img class="allow-spill" src="../../placeholders/images/sbu/sac-1600x900.jpg" /><br />

Square

Preferred sizes for Square images.

HTML

									
										<p>
    Preferred sizes for Square images.
</p>
            <img src="../../placeholders/images/sbu/sac-1200x1200.jpg" /><br />
            <img src="../../placeholders/images/sbu/sac-800x800.jpg" /><br />
            <img src="../../placeholders/images/sbu/sac-640x640.jpg" /><br />

Circle Images

This pattern contains: atoms-circle-image atoms-flat-circle-image

HTML

									
										
<img class="circle-image" src="../../placeholders/images/sbu/regatta-800x800.jpg" alt="Square Thumbnail flat circle image" />

<img class="flat-circle-image" src="../../placeholders/images/sbu/regatta-800x800.jpg" alt="Square Thumbnail flat circle image" />



<div class="row">
    <div class="col-sm-6 col-md-3">
            <img class="circle-image" src="../../placeholders/images/sbu/library-640x640.jpg" alt="Square flat circle image" />
    </div>
    <div class="col-sm-6 col-md-3">
            <img class="circle-image" src="../../placeholders/images/sbu/library-1200x1200.jpg" alt="Square flat circle image" />
    </div>
    <div class="col-sm-6 col-md-3">
            <img class="circle-image" src="../../placeholders/images/sbu/regatta-1200x1200.jpg" alt="Square flat circle image" />
    </div>
    <div class="col-sm-6 col-md-3">
            <img class="circle-image" src="../../placeholders/images/sbu/sac-800x800.jpg" alt="Square flat circle image" />
    </div>
</div>

<div class="row">
    <div class="col-sm-6 col-md-3">
            <img class="flat-circle-image" src="../../placeholders/images/sbu/library-640x640.jpg" alt="Square flat circle image" />
    </div>
    <div class="col-sm-6 col-md-3">
            <img class="flat-circle-image" src="../../placeholders/images/sbu/library-1200x1200.jpg" alt="Square flat circle image" />
    </div>
    <div class="col-sm-6 col-md-3">
            <img class="flat-circle-image" src="../../placeholders/images/sbu/regatta-1200x1200.jpg" alt="Square flat circle image" />
    </div>
    <div class="col-sm-6 col-md-3">
            <img class="flat-circle-image" src="../../placeholders/images/sbu/sac-800x800.jpg" alt="Square flat circle image" />
    </div>
</div>

Thumbnail

This pattern contains: atoms-thumbnail-image

HTML

									
										<img src="../../placeholders/images/sbu/regatta-800x800.jpg" alt="Square Thumbnail" class="img-thumbnail">



<div class="row">
    <div class="col-sm-6 col-md-3">
            <img src="../../placeholders/images/sbu/library-640x640.jpg" alt="Square" class="img-thumbnail">
    </div>
    <div class="col-sm-6 col-md-3">
            <img src="../../placeholders/images/sbu/library-1200x1200.jpg" alt="Square" class="img-thumbnail">
    </div>
    <div class="col-sm-6 col-md-3">
            <img src="../../placeholders/images/sbu/regatta-1200x1200.jpg" alt="Square" class="img-thumbnail">
    </div>
    <div class="col-sm-6 col-md-3">
            <img src="../../placeholders/images/sbu/sac-800x800.jpg" alt="Square" class="img-thumbnail">
    </div>
</div>

Rounded

This pattern contains: atoms-rounded-image

HTML

									
										<img src="../../placeholders/images/sbu/regatta-800x800.jpg" alt="Square Thumbnail" class="img-rounded">



<div class="row">
    <div class="col-sm-6 col-md-3">
            <img src="../../placeholders/images/sbu/library-640x640.jpg" alt="Square" class="img-rounded">
    </div>
    <div class="col-sm-6 col-md-3">
            <img src="../../placeholders/images/sbu/library-1200x1200.jpg" alt="Square" class="img-rounded">
    </div>
    <div class="col-sm-6 col-md-3">
            <img src="../../placeholders/images/sbu/regatta-1200x1200.jpg" alt="Square" class="img-rounded">
    </div>
    <div class="col-sm-6 col-md-3">
            <img src="../../placeholders/images/sbu/sac-800x800.jpg" alt="Square" class="img-rounded">
    </div>
</div>