The post card with gradient background

Thumbnail

PugSCSS

a.uk-display-block.uk-background-cover.uk-position-relative.background-gradient(data-src=k.src style='padding-top: calc(302 / 375 * 100%)' href=k.href uk-img)
  .uk-position-top-left(style='top: 15px;')
    span.text-default-xl.text-small.text-white.uk-position-relative(style='background-color: red; padding: 2px 15px 2px 22px;')
      sapn.uk-position-relative(style='z-index:5')=k.text
      span.uk-position-center-right(style='right:-10px;width:20px;height:100%;background-color: red; transform: translateY(-50%) skewX(-20deg);z-index:1;')
  .uk-position-bottom-left(style='z-index:5')
    .uk-padding-default
      p.text-xxxlarge.text-white(style='padding-top:11px;')=k.title

.background-gradient {
  position: relative;
  &:after {
    content:'';
    @include pos-a('','',0,0,100%,50%,1);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0));
  }
}

Tags: