arrow_back
View code

<div class="card">
  <figure>
    <img src="/static/images/1a.jpg" alt="Card preview img">
  </figure>
  <div class="card-content">
    <h6 class="label">Label</h6>
    <h4 class="headline">Card title comes here</h4>
    <p class="color-mid">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum placeat eum
      molestiae accusamus magni et expedita rerum veritatis quia consequatur!</p>
  </div>
  <div class="info">
    <div class="info-extra">
      <div class="author text-xs">
        By
        <span class="author-name">Sebastian filing</span>
      </div>
      <span class="date">Apr 11, 2021</span>
    </div>
    <a href="#0">
      <svg class="action arrow" viewBox="0 0 32 32">
        <polygon points="16,0 13.2,2.8 24.3,14 0,14 0,18 24.3,18 13.2,29.2 16,32 32,16">
        </polygon>
      </svg>
    </a>
  </div>
                        
Copy HTML

/*
 * File: _card.scss
 * Location /src/scss/components
 * Card component
 */

:root {
    --card-picture-height: 200px;
    --card-margin-bottom: 2em;
}

.card {
	width: 100%;
	box-shadow: var(--shadow-xs);
	border-radius: var(--radius-lg);
	overflow: hidden;
    a {
        text-decoration: none;
        color: inherit;
    }
    .is-link {
        will-change: box-shadow;
        transition: box-shadow 0.3s;
        &:hover {
            box-shadow: var(--shadow-sm);
            a .arrow {
                fill: var(--primary-color);
            }
        }
    }
    figure {
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: var(--card-picture-height);
        img {
            width: 100%;
        }
    }
    &-content {
        padding: var(--space-md);
        .label, .headline {
            font-weight: var(--font-light);
        }
        .label {
            text-transform: uppercase;
        }
    }
    .info {
        padding: var(--space-md) var(--space-md) var(--space-lg) var(--space-md);
        display: flex;
        justify-content: space-between;
        align-items: center;
        &-extra {
            display: flex;
            .author:after {
                content: "-";
                margin: 0 0.2em 0 0.1em;
            }
            .date {
                display: inline-block;
            }
        }
        .arrow {
            width: 18px;
            height: 18px;
            transition: fill 0.4s;
        }
        a:hover .action.arrow {
            fill: var(--primary-color);
        }
    }
}
                        
Copy SCSS
Upgrade to professional version

Using professional version, you will have unlimited number of projects and unlimited access to materials in Kodhus.com.