Contact Card (study)

contact-card-study.markdown

Contact Card (study)

A Pen by Libor Gabrhel on CodePen.

License.

index.html

<div class="contactCard">
  <div class="nameContainer">
    <div class="line">
      <h20>John Doe</h20>
      <p>executive director</p>
    </div>
  </div>
  <div class="infoContainer">
    <div class="line">
      <div class="icon">
        <svg class="icon-phone" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/>
</svg>
      </div>
      <p>+000 123 456 789</p>
    </div>
    <div class="line">
      <div class="icon">
        <svg class="icon-mail" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/>
</svg>
      </div>
      <p><a href="mailto:mail@domain.com">mail@domain.com</a></p>
    </div>
  </div>
</div>

style.sass

$myFont: "Montserrat"
@import url(https://fonts.googleapis.com/css?family=Montserrat)
$fontColor1: #fff
$fontColor2: #333
$background1: whitesmoke
$background2: steelblue
@mixin wMax-hMax
  width: 100%
  height: 100%
@mixin flexBasic
  display: flex
  position: relative

p
  margin: 0
body
  @include flexBasic
  justify-content: center
  align-items: center
  width: 100vw
  height: 100vh

.contactCard
  @include flexBasic
  flex-direction: column
  width: 400px
  height: auto
  border-radius: 4px
  background: $background1
  overflow: hidden
  box-shadow: 0px 6px 12px -8px #aaa
  
  .nameContainer
    @include flexBasic
    justify-content: flex-start
    align-items: center
    width: 100%
    height: 80px
    background: $background2
    font-family: $myFont
    color: $fontColor1
    cursor: default
    
    .line
      @include flexBasic
      justify-content: center
      align-items: baseline
      margin-left: 30px
    
      h20
        font-size: 1.9em
        padding-right: 1em
      p
        font-size: 1em
      
  .infoContainer
    @include flexBasic
    flex-direction: column
    width: 100%
    height: auto
    
    .line
      @include flexBasic
      justify-content: flex-start
      align-items: center
      width: 100%
      height: 60px
      font-family: $myFont
      font-size: 1.1em
      color: $fontColor2
      
      a
        text-decoration: none
        color: $fontColor2
      
      .icon
        @include flexBasic
        width: 1.2em
        height: 1.2em
        margin: 0 30px
        
        .icon-phone
          fill: $fontColor2
          
        .icon-mail
          fill: $fontColor2