promoted?

merp

by Augustus Yuan

HTML

<div class="promoted">
↖ Promoted
</div>

<div class="promoted">
<svg class="icon"width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1C1.44772 1 1 1.44772 1 2V8C1 8.55228 1.44772 9 2 9H8C8.55228 9 9 8.55228 9 8V2C9 1.44772 8.55228 1 8 1H2ZM5.5 3H6.5V7H5.5V3ZM3.5 5H4.5V7H3.5V5Z" fill="white" fill-opacity="0.7"/>
</svg>
<span>Promoted</span>
</div>


<div class="section-below">
  <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1C1.44772 1 1 1.44772 1 2V8C1 8.55228 1.44772 9 2 9H8C8.55228 9 9 8.55228 9 8V2C9 1.44772 8.55228 1 8 1H2ZM5.5 3H6.5V7H5.5V3ZM3.5 5H4.5V7H3.5V5Z" fill="white" fill-opacity="0.7"/>
</svg>
  
</div>

CSS

body {
  background: black;
}

.promoted {
  /* Tag Label */
  display: inline-block;
  padding: 3px 8px 3px 8px;

  /* Footnote */
  font-family: Roobert TW;
  font-size: 12px;
  /* identical to box height, or 14px */
  text-align: center;

  /* $white */
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-sizing: border-box;
  border-radius: 30px;
}

.icon {
  width: 10px;
  height: 10px;
}

.section