Download Cards // Responsive Grid & List View Switcher

download-cards-responsive-grid-list-view-switcher.markdown

Download Cards // Responsive Grid & List View Switcher

A Pen by jsabbath on CodePen.

License.

index.html

<div class="container">
  <div class="dc-view-switcher">
    <button data-trigger="grid-view"></button>
    <button data-trigger="list-view" class="active"></button>
  </div>
  <div data-view="list-view" class="download-cards">
    <article class="download-card">
      <div class="download-card__icon-box"><img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder3.png" /></div>
      <div class="download-card__content-box">
        <div class="content">
          <h2 class="download-card__content-box__catagory">Photos</h2>
          <h3 class="download-card__content-box__title">Tool Safety Products</h3>
          <p class="download-card__content-box__description">High & low-res photos for print and web media. </p>
          <a class="button"> <i class="fa fa-cloud-download"></i> Download</a>
        </div>
      </div>
    </article>
    <article class="download-card">
      <div class="download-card__icon-box"><img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder3.png" /></div>
      <div class="download-card__content-box">
        <div class="content">
          <h2 class="download-card__content-box__catagory">PDF</h2>
          <h3 class="download-card__content-box__title">Tool Safety Catalogues</h3>
          <p class="download-card__content-box__description">Print and web ready PDF's. </p>
          <a class="button"> <i class="fa fa-cloud-download"></i> Download</a>
        </div>
      </div>
    </article>
    <article class="download-card">
      <div class="download-card__icon-box"><img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder3.png" /></div>
      <div class="download-card__content-box">
        <div class="content">
          <h2 class="download-card__content-box__catagory">Photos</h2>
          <h3 class="download-card__content-box__title">Height Safety Products</h3>
          <p class="download-card__content-box__description">High & low-res photos for print and web media. </p>
          <a class="button"> <i class="fa fa-cloud-download"></i> Download</a>
        </div>
      </div>
    </article>
    <article class="download-card">
      <div class="download-card__icon-box"><img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder3.png" /></div>
      <div class="download-card__content-box">
        <div class="content">
          <h2 class="download-card__content-box__catagory">Document</h2>
          <h3 class="download-card__content-box__title">Course Booking Form</h3>
          <p class="download-card__content-box__description">Word document </p>
          <a class="button"> <i class="fa fa-cloud-download"></i> Download</a>
        </div>
      </div>
    </article>
    <article class="download-card">
      <div class="download-card__icon-box"><img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder3.png" /></div>
      <div class="download-card__content-box">
        <div class="content">
          <h2 class="download-card__content-box__catagory">Photos</h2>
          <h3 class="download-card__content-box__title">Height Safety Products</h3>
          <p class="download-card__content-box__description">High & low-res photos for print and web media. </p>
          <a class="button"> <i class="fa fa-cloud-download"></i> Download</a>
        </div>
      </div>
    </article>
  </div>
</div>

script.js

var downloadGrid = (function(){
  
  "use strict";
  
  var $cardContainer = $('.download-cards');
  var $downloadCard  = $('.download-card__content-box');
  var $viewTrigger   = $('button').attr('data', 'trigger');

  function swapTriggerActiveClass(e) {   
    $viewTrigger.removeClass('active');
    $(e.target).addClass('active');
  }

  function swapView(e) {
    var $currentView = $(e.target).attr('data-trigger');
    $cardContainer.attr('data-view', $currentView);
  }

  $(document).ready(function(){
    // Event Listener
    $viewTrigger.click(function(e){
      swapTriggerActiveClass(e);
      swapView(e);        
    });  
  });
  
})();
    

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

$dg-narrow: 700px;
$dg-wide: 1000px;

@mixin dg-wide {
  @media (min-width: #{$dg-wide}) {
    @content;
  }
}

@mixin dg-narrow {
  @media (min-width: #{$dg-narrow}) {
    @content;
  }
}

body { 
  background-color: #e8e8e8;
  font-family: 'proxima nova';
}

* { box-sizing: border-box; }

.clearfix {
  content: '';
  display: table;
  clear: both;
}

.container { 
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 3em 1em;
}

.download-cards {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.download-card {  
  display: flex;
  flex-direction: column;
  width: calc(100% - 2em);
  background: #fbfbfb;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 2em;
  box-shadow: 0 1px 25px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid #d2d2d2;
  border-left: 1px solid #dadada;
  margin: 0 1em 2em 1em;
  
  // -- Card in Grid View 
  .download-cards[data-view='grid-view'] & {
    
    @include dg-narrow { 
      float: left;
      width: calc( 50% - 2em );
      &:nth-child(3){ clear: both; }
      &:nth-child(4){ clear: initial; }
    }
    
    @include dg-wide { 
      width: calc( (100% / 3) - 2em );
      &:nth-child(3){ clear: initial; }
      &:nth-child(4){ clear: both; }
    }
  } // -- End Grid View
  
  &__icon-box {   
    display: flex;
    align-items: center;
    background: #f1f1f1;
    padding: 2em;
    text-align: center;
    
    @include dg-narrow { justify-content :center;}
    
    img {
      width: 100%;
      max-width: 300px;   
      margin: 0 auto;
    }
    
    // --- Icon Box in List View 
    .download-cards[data-view='list-view'] & {    
      @include dg-narrow {
        width: 200px;
        position: absolute;    
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-right: 1px solid #e6e6e6;
      }  
    } // --- End Icon Box in List View   
  }
 
  &__content-box {  
    padding: 2em 2em 3em;  
    flex: 1;
    
    // -- Content Box in List View
    .download-cards[data-view="list-view"] & {
      @include dg-narrow { padding-left: calc(200px + 2em); }
    } // -- End Content Box in List View
    
    &__catagory {
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 10px;
      margin: 0 0 2em;   
      &::before {
        content: '| ';
        color: #ff4500;
      }
    }

    &__title {
      line-height: 1;
      margin: 0 0 .5em;
      font-size: 18px;}
    
    &__description {
      line-height: 1.5;
      padding: 0;
      margin: 0 0 1em;
      clear: both;
      color: #929292;
      font-size: 16px;
    } 
    .button {
      position:absolute;
      bottom:2em;   
      margin:0;
      color: #ff4500;
      display: inline-block;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: bold;
      font-size: 13px;
    }
  }
}


.dc-view-switcher {
  display: none;
  margin: 1em;
  text-align: right;
  
  @include dg-narrow {
    display: block;
  } 
  
  & > button {
    font-family: 'fontAwesome';  
    background-color: transparent; 
    background-repeat: no-repeat; 
    background-position: 0px 0px; 
    border: none;    
    cursor: pointer;  
    font-size: 1.5em;
    vertical-align: middle;
    color: gray;
    opacity: 0.3;
    outline: none;
    transition: opacity .4s ease;

    &[data-trigger="list-view"] { &::before { content: "\f00b"; } }
    &[data-trigger="grid-view"] { &::before { content: "\f009"; } }
    &[data-trigger].active { opacity: 1; }
  
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />