metawish

by Laura Kishimoto

HTML

<div class="items items--grid">
    <div class="item">
        <span class="item__number">
            <span class="sr-only">item number</span>
            1
        </span>
        

        <a href="#" class="item__image" title="item name" style="background-image: url(http://placehold.it/250x300);"></a>
        <div class="item__info">
            <a href="#" class="item__name">item name</a>
        </div>
        <div class="item__info">
            <a href="#" class="item__action">edit</a>
            <a href="#" class="item__action">remove</a>
        </div>
    </div>
    
    <div class="item item--list">
        <span class="item__number">
            <span class="sr-only">item number</span>
            2
        </span>
        <a href="#" class="item__image" title="item name" style="background-image: url(http://placehold.it/250x300);"></a>
        <div class="item__info">
            <a href="#" class="item__name">item name</a>
            <a href="#" class="item__action">edit</a>
            <a href="#" class="item__action">remove</a>
        </div>
    </div>
    
    <div class="item item--list">
        <span class="item__number">
            <span class="sr-only">item number</span>
            3
        </span>
        <a href="#" class="item__image" title="item name" style="background-image: url(http://placehold.it/250x300);"></a>
        <div class="item__info">
            <a href="#" class="item__name">item name</a>
            <a href="#" class="item__action">edit</a>
            <a href="#" class="item__action">remove</a>
        </div>
    </div>
    
    <div class="item item--list">
        <span class="item__number">
            <span class="sr-only">item number</span>
            1
        </span>
        <a href="#" class="item__image" title="item name" style="background-image: url(http://placehold.it/250x300);"></a>
        <div class="item__info">
            <a href="#" class="item__name">item name that is very very long and will...

SCSS

$grey: #ddd;
$white: #fff;
$red: #c00;

$ribbon-size: 3em;

$border-default: 1px solid $grey;

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.items {
    &--grid {
        display: flex;
        flex-wrap: wrap;
    }
    &--list {
        display: flex;
    }
}

.item {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1em;
    border: $border-default;
    &__number {
        position: absolute;
        top: 0;
        left: 0;
        height: 0;
        width: 0;
        color: $white;
        line-height: $ribbon-size * 0.7;
        text-indent: $ribbon-size * -0.8;
        border-bottom: $ribbon-size solid transparent;
        border-left: $ribbon-size solid $red;
    }
    &__name {
        width: 100%;
    }
    &__image {
        padding-bottom: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-color: $grey;
    }
    &__info {
        margin: 1em;
        & + & {
            margin-top: 0;
        }
    }
}



/* temporary */

.item {
    .items--list & {
    }
    .items--grid & {
        width: 25%;
    }
}