Travel Feature Card

By Kevin Ball

F6
#
real estate travel card
How do I use This?

An extensible and responsive card component for embedding details and features of your travel. You can extend this card simply by adding additional 'travel-feature-card-details' elements below a single 'travel-feature-card-header'.

HTML
<div class="travel-feature-card">
  <div class="travel-feature-card-header{{#if type}} icon {{type}}-icon{{/if}}">
    <div class="row">
       <div class="medium-12 columns">
         <h5 class="travel-feature-card-subtitle">{{#if title}}{{title}}{{else}}Hotel{{/if}}</h5>
          <div class="travel-feature-card-header-controls">
            <span><a href="#"><i class="fa fa-edit"></i></a></span>
            <span><a href="#"><i class="fa fa-remove"></i></a></span>
         </div>
      </div>
    </div>  
  </div>


  <div class="travel-feature-card-details">
    {{#if date}}
    <h6 class="travel-feature-card-date-range">{{date}}</h6>
    {{/if}}
    <div class="row">
      <div class="small-12 medium-9 columns travel-feature-card-content">
        <div class="row">
          <div class="small-4 medium-2 columns">
            <img class="travel-feature-card-image" src="https://unsplash.it/600/600/?image=1081" alt="">
          </div>
          <div class="small-8 medium-10 columns">
            <h6 class="travel-feature-card-title">New York Royale</h6>
            <p>The rooms and suites have free WiFi and flat-screen TVs. Upgrades include outdoor decks with the gorgeous Manhattan views, 24-hour room service, and  cocktail bars.</p>
          </div>
        </div> 
      </div>

      <div class="small-12 medium-3 columns travel-feature-card-price">
        <h6>$2,000.00</h6>
        <p class="travel-feature-card-price-subtext">2 adults for 2 nights</p>
      </div>
    </div> 
  </div>
</div>


$travel-feature-card-header-font-color: $black;
$travel-feature-card-body-color: $dark-gray;
$travel-feature-card-header-background-color: #56524b;

.travel-feature-card-header {
  margin-top: 30px;
  background-color: $travel-feature-card-header-background-color;
  padding: 10px 15px 5px 45px;
  position: relative;
  
  @include breakpoint(small) {
    margin-top: 15px;
  }
 
  &.icon:after {
      font: normal normal normal 14px/1 FontAwesome;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      color: $white;
  }

  &.hotel-icon:after {
    content: "\f236";
  }

  &.car-icon:after {
    content: "\f1b9"
  }
  
  .travel-feature-card-subtitle {
    float: left;
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 1em;
    text-transform: uppercase;
    color: #fff;
  }
}

.travel-feature-card-header-controls {
  a {
    color: $white;
  }
  i {
    height: 20px;
    width: 20px;
    margin-left: 10px;
  }
}

.travel-feature-card-image {
  margin-top: 5px;
}

.travel-feature-card-details{
  background: #f0f0f0;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 20px;
  color: $travel-feature-card-body-color;
  
  button.added-button {
    color: #505050;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 0.8em;
    
    img {
      margin-right: 5px;
    }
  }
  
  button.added-button:hover {
    color: lighten(#505050, 0%);
    border: 1px solid #747474;
  }
  
  button.add-button {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 0.8em;
  }
}

.travel-feature-card-content {
  @include breakpoint(small only) {
    padding-bottom: 15px;
    border-bottom: 1px solid $medium-gray;
  }
}
.travel-feature-card-price {
  text-align: right;
  
  @include breakpoint(small only) {
    padding-top: 15px;
    
    .price-subtext {
      margin-bottom: 0px;
    }
  }

  h6 {
    font-weight: 600;
    font-size: 1.3em;
    color: $travel-feature-card-header-font-color;
    padding: 0;
    margin: 0;
  }
}

.travel-feature-card-title {
  font-weight: 500;
  font-size: 1.25em;
  color: $travel-feature-card-header-font-color;
}

.travel-feature-card-date-range {
  font-size: 0.9em;
  font-weight: 700;
  color: $travel-feature-card-header-font-color;
}

.travel-feature-card-header-controls {
  float: right;
  i {
    height: 20px;
    width: 20px;
    margin-left: 10px;
  }
}



.travel-feature-card-header {
  margin-top: 30px;
  background-color: #56524b;
  padding: 10px 15px 5px 45px;
  position: relative;
  margin-top: 15px;
}

.travel-feature-card-header.icon:after {
  font: normal normal normal 14px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  left: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #fefefe;
}

.travel-feature-card-header.hotel-icon:after {
  content: "\f236";
}

.travel-feature-card-header.car-icon:after {
  content: "\f1b9";
}

.travel-feature-card-header .travel-feature-card-subtitle {
  float: left;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: 1em;
  text-transform: uppercase;
  color: #fff;
}

.travel-feature-card-header-controls a {
  color: #fefefe;
}

.travel-feature-card-header-controls i {
  height: 20px;
  width: 20px;
  margin-left: 10px;
}

.travel-feature-card-image {
  margin-top: 5px;
}

.travel-feature-card-details {
  background: #f0f0f0;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 20px;
  color: #8a8a8a;
}

.travel-feature-card-details button.added-button {
  color: #505050;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 0.8em;
}

.travel-feature-card-details button.added-button img {
  margin-right: 5px;
}

.travel-feature-card-details button.added-button:hover {
  color: #505050;
  border: 1px solid #747474;
}

.travel-feature-card-details button.add-button {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 0.8em;
}

@media screen and (max-width: 39.9375em) {
  .travel-feature-card-content {
    padding-bottom: 15px;
    border-bottom: 1px solid #cacaca;
  }
}

.travel-feature-card-price {
  text-align: right;
}

@media screen and (max-width: 39.9375em) {
  .travel-feature-card-price {
    padding-top: 15px;
  }
  .travel-feature-card-price .price-subtext {
    margin-bottom: 0px;
  }
}

.travel-feature-card-price h6 {
  font-weight: 600;
  font-size: 1.3em;
  color: #0a0a0a;
  padding: 0;
  margin: 0;
}

.travel-feature-card-title {
  font-weight: 500;
  font-size: 1.25em;
  color: #0a0a0a;
}

.travel-feature-card-date-range {
  font-size: 0.9em;
  font-weight: 700;
  color: #0a0a0a;
}

.travel-feature-card-header-controls {
  float: right;
}

.travel-feature-card-header-controls i {
  height: 20px;
  width: 20px;
  margin-left: 10px;
}
JS

Similar Building Blocks

containers

Sticky Footer with CSS Only

F6
by Rafi
containers

Product Card

F6
by Kevin
containers

CSS Grid - Staggered Grid

F6
by John Cheng