.article-badge{
   position: absolute;
   height: $article-badge-height;
   left: -8px;
   top: 15px;
   text-align: center;
   line-height: $article-badge-height;
   font-size: 14px;
   color: #fff;
   padding: 0 10px;
   &:before, &:after {
      content: "";
      position: absolute;
   }
   &.article-badge-1{
      background: $article-badge-2-bg;
      &:before {
         @include triangle(8px, darken(#000, 15%), down-right);
         top: -8px;
         left: 0;
      }
      &:after {
         @include triangle($article-badge-height 15px, transparent, right);
         right: -15px;
      }
   }
   &.article-badge-2{
      background: $article-badge-2-bg;
      &:before {
         @include triangle(8px, darken($article-badge-2-bg, 15%), down-right);
         top: -8px;
         left: 0;
      }
      &:after {
         @include triangle($article-badge-height 15px, $article-badge-2-bg, right);
         right: -15px;
      }
   }
   &.article-badge-3{
      background: $article-badge-3-bg;
      &:before {
         @include triangle(8px, darken($article-badge-3-bg, 15%), down-right);
         top: -8px;
         left: 0;
      }
      &:after {
         @include triangle($article-badge-height 15px, $article-badge-3-bg, right);
         right: -15px;
      }
   }
   &.article-badge-4{
      background: $article-badge-4-bg;
      &:before {
         @include triangle(8px, darken($article-badge-4-bg, 15%), down-right);
         top: -8px;
         left: 0;
      }
      &:after {
         @include triangle($article-badge-height 15px, $article-badge-4-bg, right);
         right: -15px;
      }
   }
   &.article-badge-5{
      background: $article-badge-5-bg;
      &:before {
         @include triangle(8px, darken($article-badge-5-bg, 15%), down-right);
         top: -8px;
         left: 0;
      }
      &:after {
         @include triangle($article-badge-height 15px, $article-badge-5-bg, right);
         right: -15px;
      }
   }
   &.article-badge-6{
      background: $article-badge-6-bg;
      &:before {
         @include triangle(8px, darken($article-badge-6-bg, 15%), down-right);
         top: -8px;
         left: 0;
      }
      &:after {
         @include triangle($article-badge-height 15px, $article-badge-6-bg, right);
         right: -15px;
      }
   }
	&.article-badge-custom{
		&:after {
			height: 0;
			width: 0;
			border-top: 20px solid transparent;
			border-bottom: 20px solid transparent;
			border-left: 15px solid transparent;
			right: -15px;
		}
		&:before {
			height: 0;
			width: 0;
			border-left: 8px solid transparent;
			border-bottom: 8px solid #000;
			top: -8px;
			left: 0;
		}
	}
}

.card-body{
   &.has-badge{
      .item-title{
         margin-top: 45px;
      }
      &.has-image{
         .item-title{
            margin-top: 0;
         }
      }
   }
}