Studios

HTML

<footer class="pa4 pa5-l black-70 bt b--black-10">
  <div class="mb4-l cf">
    <h1 class="fl w-100 pv0 f6 fw6 ttu tracked mb4">Studios</h1>
    <article class="fl w-50 dib-ns w-auto-ns mr4-m mr5-l mb4 pr2 pr0-ns">
      <h4 class="f5 f4-l fw6">SF</h4>
      <span class="f7 f6-l db black-70">837 Larkin St.</span>
      <span class="f7 f6-l black-70">San Francisco, CA 94109 </span>
      <a class="f6 db fw6 pv3 black-70 link dim" title="Call SF" href="tel:+12075555555">
        +1 207-555-5555
      </a>
    </article>
    <article class="fl w-50 dib-ns w-auto-ns mr4-m mr5-l mb4 pl2 pl0-ns">
      <h4 class="f5 f4-l fw6">LA</h4>
      <span class="f7 f6-l db black-70">
        1111 Manor Way
      </span>
      <span class="f7 f6-l di black-70">
        Los Angeles, CA 90048
      </span>
      <a href="tel:+13235555555" class="f6 db fw6 pv3 link dim black-70" title="Call the LA office.">
        +1 323-555-5555
      </a>
    </article>
    <article class="fl w-50 dib-ns w-auto-ns mr4-m mr5-l mb4 pr2 pr0-ns">
      <h4 class="f5 f4-l fw6">London</h4>
      <span class="f7 f6-l db black-70">11 Downey St.</span>
      <span class="f7 f6-l black-70">London, UK</span>
      <a href="tel:+5555555555" class="link dim f6 db fw6 pv3 black-70" title="Call the London office">+44 0 5555-5555</a>
    </article>
    <article class="fl w-50 dib-ns w-auto-ns mb4 pl2 pl0-ns">
      <h4 class="f5 f4-l fw6">Tokyo</h4>
      <span class="f7 f6-l db black-70">1982 Flangan Rd.</span>
      <span class="f7 f6-l">Shinjuku, Tokyo</span>
      <a href="tel:+444444444444" class="f6 db dim fw6 pv3 link black-70" title="Call Tokyo Office">
        +99 5555-5555
      </a>
    </article>
  </div>
  <section class="cf mb5">
    <div class="mb4 mb0-ns w-100 w-50-l fr">
      <a class="black-70 f3 f2-ns fw6 tl link dim dib pv3 mt2 mb4 mb0-l" href="mailto:[email protected]" >
        [email protected]
      </a>
    </div>
    <div class="mb4 mb0-ns fl w-100 w-50-l" >
      <p class="f4 fw6 mb2 f6 mt0">
        Sign up for our newsletter.
      </p>
      <input placeholder="Email Address" class="mw-100 w-100 w5-ns f5 input-reset ba b--black-20 pv3 ph4 border-box">
      <input type="submit" class="input-reset w-100 w-auto-ns bg-black-80 white f5 pv2 pv3-ns ph4 ba b--black-80 bg-hover-mid-gray">
    </div>
  </section>
  <div class="dt dt--fixed w-100" >
    <div class="dn dtc-ns v-mid">
      <p class="f7 black-70 dib pr3 mb3">
        Copyright © Your Company 2048
      </p>
    </div>
    <div class="db dtc-ns black-70 tc tr-ns v-mid">
      <a href="https://www.facebook.com/" class="link dim dib mr3 black-70" title="Impossible Labs on Facebook">
        <svg class="db w2 h2" data-icon="facebook" viewBox="0 0 32 32" fill="currentColor">
          <title >facebook icon</title>
          <path d="M8 12 L13 12 L13 8 C13 2 17 1 24 2 L24 7 C20 7 19 7 19 10 L19 12 L24 12 L23 18 L19 18 L19 30 L13 30 L13 18 L8 18 z"
          ></path>
        </svg>
      </a>
      <a href="https://twitter.com/" class="link dim dib mr3 black-70">
        <svg class="db w2 h2" data-icon="twitter" viewBox="0 0 32 32"
          fill="currentColor" >
          <title >twitter icon</title>
          <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"
          ></path>
        </svg>
      </a>
      <a href="https://medium.com/" class="link dim dib mr3 black-70" title="Impossible Labs on Medium">
        <svg class="db w2 h2" x="0px" y="0px" viewBox="0 0 290 248.6"
          fill="currentColor" >
          <g >
            <path fill="currentColor" class="st0" d="M287.8,46.3L196,0.3c-0.4-0.2-0.9-0.3-1.3-0.3c0,0-0.1,0-0.1,0c-1.1,0-2.2,0.6-2.8,1.5l-56.6,92l63.2,102.7 l90.4-146.9C289.4,48.3,289,46.8,287.8,46.3z"
            ></path>
            <polygon fill="currentColor" points="105.2,61.2 105.2,160.3 193.3,204.4 	"
            ></polygon>
            <path fill="currentColor" d="M201,208.2l80.9,40.5c4.4,2.2,8,0,8-5v-180L201,208.2z"
            ></path>
            <path fill="currentColor" d="M95.5,46.7L10.7,4.3L5.4,1.7C4.6,1.3,3.8,1.1,3.2,1.1c-0.9,0-1.7,0.4-2.3,1.1C0.3,2.8,0,3.8,0,5v193.4 c0,3.3,2.4,7.2,5.4,8.7l83.3,41.6c1.2,0.6,2.3,0.9,3.3,0.9c2.8,0,4.8-2.2,4.8-5.8V48.7C96.7,47.8,96.2,47.1,95.5,46.7z"
            ></path>
          </g>
        </svg>
      </a>
      <a href="https://www.linkedin.com/company/" class="link dim dib black-70">
        <svg class="db w2 h2" x="0px" y="0px" viewBox="0 0 48 48" >
          <linearGradient gradientUnits="userSpaceOnUse" x1="23.9995"
            y1="0" x2="23.9995" y2="48.0005" >
            <stop offset="0" ></stop>
            <stop offset="1" ></stop>
          </linearGradient>
          <path fill="currentColor" d="M48,42c0,3.313-2.687,6-6,6H6c-3.313,0-6-2.687-6-6V6 c0-3.313,2.687-6,6-6h36c3.313,0,6,2.687,6,6V42z"
          ></path>
          <g >
            <g >
              <path fill="#FFFFFF" d="M15.731,11.633c-1.608,0-2.658,1.083-2.625,2.527c-0.033,1.378,1.018,2.494,2.593,2.494 c1.641,0,2.691-1.116,2.691-2.494C18.357,12.716,17.339,11.633,15.731,11.633z M13.237,35.557h4.988V18.508h-4.988V35.557z M31.712,18.748c-1.595,0-3.222-0.329-4.956,2.36h-0.099l-0.087-2.599h-4.417c0.065,1.411,0.074,3.518,0.074,5.52v11.529h4.988 v-9.854c0-0.46,0.065-0.919,0.196-1.248c0.328-0.919,1.149-1.871,2.527-1.871c1.805,0,2.527,1.411,2.527,3.479v9.494h4.988V25.439 C37.455,20.713,34.993,18.748,31.712,18.748z"
              ></path>
            </g>
          </g>
        </svg>
      </a>
    </div>
  </div>
  <div class="db dn-ns">
    <p class="f7 black-70 mt4 tc">
      Copyright © Your Company 2038
    </p>
  </div>
</footer>

css

.border-box {
    box-sizing: border-box;
}

.ba {
    border-style: solid;
    border-width: 1px;
}

.bt {
    border-top-style: solid;
    border-top-width: 1px;
}

.b--black-80 {
    border-color: rgba(0, 0, 0, .8);
}

.b--black-20 {
    border-color: rgba(0, 0, 0, .2);
}

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

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

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

.dn {
    display: none;
}

.di {
    display: inline;
}

.db {
    display: block;
}

.dib {
    display: inline-block;
}

.dt {
    display: table;
}

.dt--fixed {
    table-layout: fixed;
    width: 100%;
}

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

.fr {
    float: right;
    _display: inline;
}

.fw6 {
    font-weight: 600;
}

.input-reset {
    -webkit-appearance: none;
       -moz-appearance: none;
}

.input-reset::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.h2 {
    height: 2rem;
}

.tracked {
    letter-spacing: .1em;
}

.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;
}

.mw-100 {
    max-width: 100%;
}

.w2 {
    width: 2rem;
}

.w-50 {
    width: 50%;
}

.w-100 {
    width: 100%;
}

.black-70 {
    color: rgba(0, 0, 0, .7);
}

.white {
    color: #fff;
}

.bg-black-80 {
    background-color: rgba(0, 0, 0, .8);
}

.pa4 {
    padding: 2rem;
}

.pl2 {
    padding-left: .5rem;
}

.pr2 {
    padding-right: .5rem;
}

.pr3 {
    padding-right: 1rem;
}

.pv0 {
    padding-top: 0;
    padding-bottom: 0;
}

.pv2 {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.pv3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.ph4 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.mr3 {
    margin-right: 1rem;
}

.mb2 {
    margin-bottom: .5rem;
}

.mb3 {
    margin-bottom: 1rem;
}

.mb4 {
    margin-bottom: 2rem;
}

.mb5 {
    margin-bottom: 4rem;
}

.mt0 {
    margin-top: 0;
}

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

.mt4 {
    margin-top: 2rem;
}

.tl {
    text-align: left;
}

.tc {
    text-align: center;
}

.ttu {
    text-transform: uppercase;
}

.f3 {
    font-size: 1.5rem;
}

.f4 {
    font-size: 1.25rem;
}

.f5 {
    font-size: 1rem;
}

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

.f7 {
    font-size: .75rem;
}

.v-mid {
    vertical-align: middle;
}

.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) {
    .dn-ns {
        display: none;
    }

    .dib-ns {
        display: inline-block;
    }

    .dtc-ns {
        display: table-cell;
    }

    .w5-ns {
        width: 16rem;
    }

    .w-auto-ns {
        width: auto;
    }

    .pl0-ns {
        padding-left: 0;
    }

    .pr0-ns {
        padding-right: 0;
    }

    .pv3-ns {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .mb0-ns {
        margin-bottom: 0;
    }

    .tr-ns {
        text-align: right;
    }

    .f2-ns {
        font-size: 2.25rem;
    }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
    .mr4-m {
        margin-right: 2rem;
    }
}

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

    .pa5-l {
        padding: 4rem;
    }

    .mr5-l {
        margin-right: 4rem;
    }

    .mb0-l {
        margin-bottom: 0;
    }

    .mb4-l {
        margin-bottom: 2rem;
    }

    .f4-l {
        font-size: 1.25rem;
    }

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

Css stats for this component

Gzipped Size
1001B
Selectors
84
Declarations
99

Modules referenced

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

npm i --save tachyons-box-sizing tachyons-borders tachyons-border-colors tachyons-clears tachyons-display tachyons-floats tachyons-font-weight tachyons-forms tachyons-heights tachyons-letter-spacing tachyons-links tachyons-max-widths tachyons-widths tachyons-skins tachyons-spacing tachyons-text-align tachyons-text-transform tachyons-type-scale tachyons-vertical-align tachyons-hovers

Other Components

Article Lists

Title Preview Author Media Flipped Title Preview Author Media

Articles

Feature Full Bleed Background Headline Title Text Large Title Text Left Title Top Border Left Title Photo Essay Single Column Large Title Title Highlight Header Cover Title Text Image Title Text

Avatars

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

Banners

Basic Info Single Cta

Buttons

Basic Previous Next Basic Rounded Extra Small Basic Rounded Small Basic Rounded Basic Centered Icons Pill Grow Pill

Cards

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

Collections

Albums Movies Posters Dim Posters Square Title Subtitle Vinyl

Definition Lists

Inline Simple

Error Pages

404

Footers

Centered Icons Hover Glow Inline Text Simple Large Type Small Print Social Circles Social Simple Text Social Simple Social Text Social Studios

Forms

Checkbox List Input Text Label Newsletter Subscription Password Sign In Sign Up Textarea Label

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

Links

Animate Background Color Animate Color Dim No Underline Underline On Hover

Lists

Block Item Dotted Border Border Spaced Border Tight Contact Phone 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

Marketing

Iphone App

Nav

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

Pages

4x4 Mixed Grid Double Portfolio Project Swiss Cover Five Columns

Quotes

Left Border Pull Quote

Tables

Basic Striped Dark

Text

Large Paragraph Narrow Paragraph Paragraph Small Narrow Paragraph Small Paragraph Title Subtitle Centered Wide Paragraph