Albums

Albums

HTML

<article>
  <h2 class="f3 fw4 pa3 mv0">Albums</h2>
  <div class="cf pa2">
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/blonde/id1146195596?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is4.mzstatic.com/image/thumb/Music62/v4/93/8f/75/938f7536-0188-f9ba-4585-0a77ceaebf0a/source/400x40000bb.png" alt="Frank Ocean Blonde Album Cover" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100">Blonde</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Frank Ocean</dd>
        </dl>
      </a>
    </div>
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/jeffery/id1146718343?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is1.mzstatic.com/image/thumb/Music71/v4/c8/2d/b1/c82db1cd-9dc5-d7cb-2a34-735cf47bb809/source/400x40000bb.png" alt="Young Thug - Jeffery" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100 ttu">Jeffery</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Young Thug</dd>
        </dl>
      </a>
    </div>
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/untitled-unmastered./id1089846273?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is5.mzstatic.com/image/thumb/Music49/v4/1b/36/43/1b3643c6-e6a3-41bc-7f6d-7c2b64b5d60b/source/400x40000bb.png" alt="Kendrick Lamar untitled unmastered. Album Cover" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100">untitled umastered.</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Kendrick Lamar</dd>
        </dl>
      </a>
    </div>
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/99.9/id1092026376?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is4.mzstatic.com/image/thumb/Music49/v4/e9/4c/2d/e94c2d5f-bdb0-c565-4cc2-f9dfcf7f0b87/source/400x40000bb.png" alt="Kaytranada 99%" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100">99%</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Kaytranada</dd>
        </dl>
      </a>
    </div>
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/aa/id1067924003?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is3.mzstatic.com/image/thumb/Music49/v4/b6/b0/a1/b6b0a1dd-998d-9786-ca2f-87470be15250/source/400x40000bb.png" alt="Baauer Aa - Album Cover" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100">Aa</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Baauer</dd>
        </dl>
      </a>
    </div>
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/99-cents/id1054734475?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is3.mzstatic.com/image/thumb/Music62/v4/fa/ae/a6/faaea65f-0819-bb5d-afaa-4f5e84015204/source/400x40000bb.png" alt="Santigold 99 cents - Album cover" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100">99 cents</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Santigold</dd>
        </dl>
      </a>
    </div>
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/a-moon-shaped-pool/id1111577743?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is2.mzstatic.com/image/thumb/Music18/v4/34/03/34/34033451-12e2-2d0b-c100-11a390922a01/source/400x40000bb.png" alt="A Moon Shaped Pool - Album cover" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100">A Moon Shaped Pool</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Radiohead</dd>
        </dl>
      </a>
    </div>
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/the-life-of-pablo/id1123231885?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is3.mzstatic.com/image/thumb/Music20/v4/c0/98/d0/c098d05b-7bcc-0ea3-0213-0f69992fda65/source/400x40000bb.png" alt="The Life of Pablo - Album Cover" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100">The Life of Pablo</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Kanye West</dd>
        </dl>
      </a>
    </div>
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/coloring-book/id1113239004?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is2.mzstatic.com/image/thumb/Music18/v4/5a/42/0f/5a420f73-6490-abc9-bdcc-3001d5c4e9fc/source/400x40000bb.png" alt="Coloring Book - Album cover" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100">Coloring Book</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Chance the Rapper</dd>
        </dl>
      </a>
    </div>
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/everybody-looking/id1135576036?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is4.mzstatic.com/image/thumb/Music30/v4/9b/2e/e1/9b2ee13e-35fd-0cc1-d203-e65b4beafc7f/source/400x40000bb.png" alt="Everybody Looking - Album Cover" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100">Everybody Looking</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Gucci Mane</dd>
        </dl>
      </a>
    </div>
  </div>
</article>

css

.outline {
    outline: 1px solid;
}

.cf:before, .cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

.db {
    display: block;
}

.fl {
    float: left;
    _display: inline;
}

.fw4 {
    font-weight: 400;
}

.lh-copy {
    line-height: 1.5;
}

.link {
    text-decoration: none;
    transition: color .15s ease-in;
}

.link:link, .link:visited {
    transition: color .15s ease-in;
}

.link:hover {
    transition: color .15s ease-in;
}

.link:active {
    transition: color .15s ease-in;
}

.link:focus {
    transition: color .15s ease-in;
    outline: 1px dotted currentColor;
}

.w-50 {
    width: 50%;
}

.w-100 {
    width: 100%;
}

.black-10 {
    color: rgba(0, 0, 0, .1);
}

.black {
    color: #000;
}

.gray {
    color: #777;
}

.pa2 {
    padding: .5rem;
}

.pa3 {
    padding: 1rem;
}

.ml0 {
    margin-left: 0;
}

.mt2 {
    margin-top: .5rem;
}

.mv0 {
    margin-top: 0;
    margin-bottom: 0;
}

.tc {
    text-align: center;
}

.ttu {
    text-transform: uppercase;
}

.f3 {
    font-size: 1.5rem;
}

.f6 {
    font-size: .875rem;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clip {
    position: fixed !important;
    _position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
}

.dim {
    opacity: 1;
    transition: opacity .15s ease-in;
}

.dim:hover, .dim:focus {
    opacity: .5;
    transition: opacity .15s ease-in;
}

.dim:active {
    opacity: .8;
    transition: opacity .15s ease-out;
}

@media screen and (min-width: 30em) and (max-width: 60em) {
    .w-25-m {
        width: 25%;
    }
}

@media screen and (min-width: 60em) {
    .w-20-l {
        width: 20%;
    }
}

Install via npm Only installs the needed tachyons-modules for this component

npm i --save tachyons-outlines tachyons-clears tachyons-display tachyons-floats tachyons-font-weight tachyons-line-height tachyons-links tachyons-widths tachyons-skins tachyons-spacing tachyons-text-align tachyons-text-transform tachyons-type-scale tachyons-typography tachyons-visibility tachyons-hovers

Other Components

articles

Feature Full Bleed Background Large Title Text Left Title Top Border Left Title Photo Essay Single Column Large Title Title Text Image Title Text

avatars

Circle Border Circle Double Ring Rounded Large Rounded Medium Rounded Small Square

banners

Basic

buttons

Basic Pill Grow Pill

cards

Album Centered Album Left News Card Product Card Profile Card Title Subtitle Profile Card Text Card

collections

Albums Movies Posters Dim Posters Square Title Subtitle

definition-lists

Simple

footers

Simple Large Type Small Print Social Circles Social Text Social

forms

Newsletter Subscription Sign In Sign Up

headers

Circle Avatar Title Subtitle Rounded Avatar Title Subtitle Startup Hero

layout

Aspect Ratio 16x9 Aspect Ratio 1x1 Aspect Ratio 3x4 Aspect Ratio 4x3 Aspect Ratio 4x6 Aspect Ratio 5x7 Aspect Ratio 5x8 Aspect Ratio 6x4 Aspect Ratio 7x5 Aspect Ratio 8x5 Aspect Ratio 9x16 Centered Container Five Column Collapse Alternate Five Column Collapse Asymmetrical Five Column Collapse Mixed Five Column Collapse One Five Column Fixed Table Layout Grid Mixed Rows Fixed Table Layout Grid Flag Object Bottom Flag Object Collapse Flag Object Top Flag Object Four Column Collapse Two Collapse One Four Column Collapse Two Four Column Full Bleed 16x9 Full Bleed 4x6 Full Bleed 5x7 Full Bleed 5x8 Full Bleed 6x4 Full Bleed 7x5 Full Bleed 8x5 Full Bleed 9x16 Full Bleed Square Full Screen Centered Title Horizontal Aspect Ratios Three Column Collapse One Three Column Two Column Collapse One Two Column

lists

Border Spaced Border Tight Follower Notifications Rounded Square Avatar Follower Notifications Hashtags Items Image Title Price Large Links Inline Links Animate Color Links Inline Links With Borders Inline Slab Stat Large Slab Stat Small Slab Stat Title Text

nav

Fixed Semi Transparent Large Title Link List List Overflow Logo Links Inline Collapse Logo Links Inline Logo Titles Links Centered Title Link List

pages

4x4 Mixed Grid Double Swiss Cover Five Columns

quotes

Left Border Pull Quote

text

Large Paragraph Narrow Paragraph Paragraph Small Narrow Paragraph Small Paragraph Wide Paragraph