<div class="wrapper u-grid">
  <div class="content u-gridItem--alignCenter">
    <div class="header u-textCenter">
      <h1 class="header-text">xmas tags that look like luggage tags</h1>
    </div>
    <div class="tags u-grid">
      <div class="tag tag--rounded tag--blue u-gridItem u-gridItem--fit">
        <div class="tag-head">
          <div class="tag-hole tag-hole--left"></div>
          <div class="tag-info">
            <img class="tag-infoIcon" src="https://dl.dropboxusercontent.com/s/8eszbqs5uim43dm/basketball.png" alt="dribbble" />
            <div class="tag-headFrom">Santa</div>
          </div>
        </div>
        <div class="tag-body">
          <div class="tag-bodyHeader">Final destination:</div>
          <div class="tag-bodyToWrapper">
            <div class="tag-bodyDestinationCode">IAD</div>
            <div class="tag-bodyTo u-cursiveFont">Sean Jakob Heller</div>
          </div>
          <div class="tag-bodyDestinationCity">Washington, D.C.</div>
          <div class="tag-bodyCode u-codeFont">122512</div>
        </div>
      </div>

      <div class="tag tag--brown u-gridItem u-gridItem--fit">
        <div class="tag-head u-grid">
          <div class="tag-headItem u-gridItem">
            <div class="tag-randomCode">NP</div>
          </div>
          <div class="tag-headItem u-gridItem">
            <div class="tag-hole tag-hole--center"></div>
          </div>
          <div class="tag-headItem u-gridItem">
            <img class="tag-arrow" src="https://dl.dropboxusercontent.com/s/g5ofe9fs1yyflv6/arrow_right.png?dl=0" alt="" />
          </div>
        </div>
        <div class="tag-body u-grid u-gridCol">
          <div class="tag-bodyInfo u-gridItem">
            <div class="tag-bodyInfoHeader">
              To
            </div>
            <div class="tag-bodyInfoBody tag-bodyInfoBody--destination">
              DSH
            </div>
          </div>
          <div class="tag-bodyInfo u-gridItem">
            <div class="tag-bodyInfoHeader">
              Message
            </div>
            <div class="tag-bodyInfoBody tag-bodyInfoBody--message u-cursiveFont">
              Ho Ho Ho!
            </div>
          </div>
          <div class="tag-bodyInfo u-gridItem">
            <div class="tag-bodyInfoHeader">
              From
            </div>
            <div class="tag-bodyInfoBody tag-bodyInfoBody--from u-cursiveFont">
              Santa Claus
            </div>
          </div>
          <div class="tag-bodyInfo u-gridItem">
            <div class="tag-bodyInfoHeader">
              Date
            </div>
            <div class="tag-bodyInfoBody tag-bodyInfoBody--date u-codeFont">
              Dec 25 2012
            </div>
          </div>
          <div class="tag-bodyFooter"></div>
        </div>
      </div>
    </div> <!-- END tags-->
    <div class="footer u-textCenter">
      <div class="footer-attribution">Thank you to Jessica Yeo for her original Dribbble post <a href="https://dribbble.com/shots/806609-xmas-tags-that-look-like-luggage-tags">xmas tags that look like luggage tags</a>.</div>
      <div class="footer-links"><a href="https://codepen.io/collection/DwkkWW/">Other beautiful design come to life (CodePen Collection)</a></div>
    </div> <!-- END footer -->
  </div> <!-- END content -->
</div> <!-- END wrapper -->
//------- Many, many fonts -------//

// Global
@import url(https://fonts.googleapis.com/css?family=Lato&subset=latin);
@import url(https://fonts.googleapis.com/css?family=Special+Elite&text=123456789DECdec);

// Blue Tag
@import url(https://fonts.googleapis.com/css?family=Playfair+Display&text=SANTAsanta);
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&text=iadIAD);
@import url(https://fonts.googleapis.com/css?family=Bilbo+Swash+Caps&subset=latin);

// Brown Tag
@import url(https://fonts.googleapis.com/css?family=Cabin+Condensed&text=DSHdsh);

//------- Variables -------//
$background: rgba(218,235,237,1);
$background-gridline: rgba(205,230,235,1);
$background-gridline--small: rgba(211,233,236,1);
$tag-color--blue: #F5F4ED;
$tag-color--brown: #272321;
$tag-color--lightbrown: #CCBDAB;
$white: #fff;
$grey: rgba(0,0,0,.5);
$darkgrey: rgba(0,0,0,.7);

$santa-font--blue: "Playfair Display", serif;
$destination-font--blue: "Yanone Kaffeesatz", sans-serif;
$destination-font--brown: "Cabin Condensed", sans-serif;
$code-font: "Special Elite", monospace;
$cursive-font: "Bilbo Swash Caps", cursive;

//------- Global Page -------//
html {
    box-sizing: border-box;
    height: 100%;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body,
.wrapper {
    min-height: 100%;
    min-height: 100vh;
}
body {
    font-family: "Lato", sans-serif;
}


//------- Helpers -------//
.u-codeFont {
    font-family: $code-font, monospace;
}
.u-cursiveFont {
    font-family: $cursive-font, cursive;
}
.u-textCenter {
    text-align: center;
}
// Grid
.u-grid {
    display: flex;
}
.u-gridItem {
    flex: 1;
}
.u-gridItem--fit {
    flex: 0 0 100%;
}
.u-gridItem--alignCenter {
    align-self: center;
}
.u-gridCol {
    flex-flow: wrap column;
}


//------- Page Styles -------//
.wrapper {
    /* Graph Paper CSS */  
    background: $background;
    background-image:  linear-gradient($background-gridline 2px, transparent 0), linear-gradient(90deg, $background-gridline 2px, transparent 0), linear-gradient($background-gridline--small 1px, transparent 0), linear-gradient(90deg, $background-gridline--small 1px, transparent 0);
    background-size: 40px 40px, 40px 40px, 10px 10px, 10px 10px;
}
.content {
    width: 100%;
}
.header {
    padding: 10px 20px 0;
    margin-bottom: 20px;
}
.header-text {
    font-size: 1.5em;
    line-height: 1.5;
    color: $darkgrey;
}
.footer {
    padding: 0 20px 40px;
    line-height: 2;
    color: $grey;
}
.footer a {
  color: $darkgrey;
}
.tags {
    margin: 0 auto 10px;
    max-width: 875px;
    align-items: center;
    flex-flow: wrap row;
    justify-content: center;
}
.tag {
    height: 490px;
    max-height: 100%;
    max-width: 280px;
    margin: 10px 50px 20px;
    box-shadow: 0 13px 5px -8px rgba(0,0,0,.3);
    overflow: hidden;
    transition: all .5s ease;
}
.tag--rounded {
    border-radius: 30px;
}
.tag-hole {
    position: relative;
    display: block;
    height: 75px;
    width: 75px;
    border-radius: 50%;
    background: $white;
    box-shadow: 0 3px 3px 0 rgba(0,0,0,.1);
    
    &:after {
        position: absolute;
        top: 50%;
        left: 50%;
        content: "";
        height: 25px;
        width: 25px;
        border-radius: 50%;
        box-shadow: inset 2px 3.5px 3px 0 rgba(0,0,0,0.5);
        background: $background;
        transform: translateX(-50%) translateY(-50%);
    }
}
.tag--blue {
    
    .tag-head {
        min-height: 25.4%;
        padding: 15px 25px 0 20px;
        background: $tag-color--blue;
    }
    .tag-hole {
        position: absolute;
    }
    .tag-info {
        padding: 5px 0 0;
        text-align: right;
        text-transform: uppercase;
        font-size: 30px;
    }
    .tag-infoIcon {
        max-width: 45px;
    }
    .tag-headFrom {
        line-height: 1.2;
        font-family: $santa-font--blue;
        letter-spacing: 4px;
        color: #CD1630;
        transform: scale(1,.8);
    }
    .tag-body {
        position: relative;
        height: 75%;
        padding: 25px;
        background: #B1CDC8;
    }
    .tag-bodyHeader {
        margin-bottom: 30px;
        font-size: 17px;
        letter-spacing: 1px;
    }
    .tag-bodyToWrapper {
        position: relative;
        max-width: 235px;
        margin: 0 auto 20px;
        text-align: center;
        overflow: hidden;
    }
    .tag-bodyDestinationCode {
        position: relative;
        margin-bottom: 42px;
        line-height: .7;
        font-size: 167px;
        color: #23201E;
        letter-spacing: 2px;
        font-family: $destination-font--blue;
    }
    .tag-bodyTo {
        width: 100%;
        padding: 10px;
        color: #218EA0;
        background: $tag-color--blue;
        font-size: 28px;
    }
    .tag-bodyDestinationCity {
        font-size: 17px;
        letter-spacing: 1px;
    }
    .tag-bodyCode {
        position: absolute;
        right: 15px;
        bottom: 20px;
        font-size: 21px;
        color: rgba(0,0,0,.6);
        letter-spacing: 2px;
        transform: rotate(-9deg);
    }
}
.tag--brown {
    
    .tag-head {
        height: 17.5%;
        padding: 12.5px;
        border: 1px solid #191715;
        background: #272321;
        align-items: center;
        justify-content: center;
    }
    .tag-headItem {
        padding: 0 5px;
        text-align: center;
    }
    .tag-randomCode {
        display: inline-block;
        padding: 5px 10px;
        border: 2px solid $tag-color--lightbrown;
        text-transform: uppercase;
        color: $tag-color--lightbrown;
        letter-spacing: 2px;
        border-radius: 2px;
    }
    .tag-hole {
        margin: 0 auto;
        background: #464136;
    }
    .tag-arrow {
        max-width: 40px;
    }
    .tag-body {
        position: relative;
        height: 82.5%;
        background: #C4B3A4;
    }
    .tag-bodyInfo {
        flex: 0.78;
        border-bottom: 2px solid #514A44;
        
        &:first-of-type {
            flex: 2.1;
        }
        &:nth-of-type(4) {
            flex: 1;
            border-bottom: 0;
        }
    }
    .tag-bodyInfoHeader {
        padding: 5px 0 0 10px;
        text-transform: uppercase;
        font-size: 14px;
    }
    .tag-bodyInfoBody {
        font-size: 28px;
        text-align: center;
    }
    .tag-bodyInfoBody--destination {
        font-family: $destination-font--brown;
        font-size: 94px;
        line-height: 1.5;
        font-weight: bold;
        color: $tag-color--brown;
        letter-spacing: 8px;
    }
    .tag-bodyInfoBody--date {
        position: absolute;
        right: 40px;
        padding-top: 10px;
        font-size: 20px;
        text-transform: uppercase;
        transform: rotate(-1.5deg);
        color: $grey;
        letter-spacing: 1px;
    }
    .tag-bodyFooter {
        position: absolute;
        bottom: 0;
        height: 25px;
        width: 100%;
        background: repeating-linear-gradient(135deg, $tag-color--brown 25%, $tag-color--brown 50%, transparent 50%, transparent 75%);
        background-size: 43px 49px;
        background-position: -19px 0;
    }
}

//------- Media Queries -------//
@media (min-width: 580px) {
    .tag {
        height: 580px;
        max-width: 340px;
    }
    .tag--blue {
        
        .tag-info {
            font-size: 36px;
        }
        .tag-infoIcon {
            max-width: 55px;
        }
        .tag-bodyHeader {
            font-size: 20px;
        }
        .tag-bodyToWrapper {
            margin: 0 auto 35px;
        }
        .tag-bodyDestinationCode {
            left: -9px;
            font-size: 247px;
        }
        .tag-bodyDestinationCity {
            font-size: 20.5px;
        }
        .tag-bodyCode {
            right: 30px;
            bottom: 15px;
            font-size: 23px;
        }
    }
    .tag--brown {
     
        .tag-bodyInfoHeader {
            font-size: 16px;
        }
        .tag-bodyInfoBody--message,
        .tag-bodyInfoBody--from {
            font-size: 32px;
        }
        .tag-bodyInfoBody--destination {
            font-size: 144px;
            line-height: 1.1;
        }
    }
}
@media (min-width: 800px) {
    .tag.u-gridItem--fit {
        flex: 1;
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.