Work Feature Block

By Kevin Ball

portfolio work feature

How do I use This?

A page component for featuring work

HTML

<div class="work-feature-block row">
  <div class="columns medium-7">
    <img class="work-feature-block-image" src="https://placehold.it/600x400"/>
  </div>
  <div class="columns medium-5">
    <h2 class="work-feature-block-header">Project Description</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sodales diam ac hendrerit aliquet. Phasellus pretium libero vel molestie maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis est quam. Aenean blandit a urna laoreet tincidunt.</p>
    <h2>Project Details</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </div>
</div>

$work-feature-image-offset-padding: 10px 0;

.work-feature-block {
  padding: 10px 0;
  border-top: 1px solid $medium-gray;
  border-bottom: 1px solid $medium-gray;
}

.work-feature-block-image {
  display: block;
  margin: auto;
  padding: $work-feature-image-offset-padding;
}

.work-feature-block {
  padding: 10px 0;
  border-top: 1px solid #cacaca;
  border-bottom: 1px solid #cacaca;
}

.work-feature-block-image {
  display: block;
  margin: auto;
  padding: 10px 0;
}

Work Feature Block

By Kevin Ball

Featured Testimonials

Marketing Site Hero Section

Hover Callout

Work Feature Block

By Kevin Ball

Similar Building Blocks

Featured Testimonials

Marketing Site Hero Section

Hover Callout