Blog Tag Cloud

By Laurel Beyers

tags blog label

How do I use This?

A tag cloud section that wraps accordingly to it's container and content.

HTML

<section class="tag-cloud-section">
  <h5 class="tag-cloud-title">LUNCH TIME</h5>
  <div class="tag-cloud">
    <a class="tag-cloud-individual-tag" href="#">Peanut Butter<i class="fa fa-times-circle" aria-hidden="true"></i></a>
    <a class="tag-cloud-individual-tag" href="#">Jelly Jam<i class="fa fa-times-circle" aria-hidden="true"></i></a>
    <a class="tag-cloud-individual-tag" href="#">Grapes<i class="fa fa-times-circle" aria-hidden="true"></i></a>
    <a class="tag-cloud-individual-tag" href="#">Bread<i class="fa fa-times-circle" aria-hidden="true"></i></a>
    <a class="tag-cloud-individual-tag" href="#">Bananas<i class="fa fa-times-circle" aria-hidden="true"></i></a>
    <a class="tag-cloud-individual-tag" href="#">Chicken Salad<i class="fa fa-times-circle" aria-hidden="true"></i></a>
    <a class="tag-cloud-individual-tag" href="#">LEmonaide<i class="fa fa-times-circle" aria-hidden="true"></i></a>
    <a class="tag-cloud-individual-tag" href="#">Cheese<i class="fa fa-times-circle" aria-hidden="true"></i></a>
    <a class="tag-cloud-individual-tag" href="#">Mayonaisse<i class="fa fa-times-circle" aria-hidden="true"></i></a>
    <a class="tag-cloud-individual-tag" href="#">Lettuce<i class="fa fa-times-circle" aria-hidden="true"></i></a>
  </div>
</section>

$tag-cloud-tag-color: #2c3840;
$tag-cloud-type-color: $light-gray;
$tag-cloud-separator-color: $medium-gray;
$tag-cloud-section-bg: lighten($tag-cloud-tag-color, 35%);
$tag-cloud-section-width: 800px;

.tag-cloud-section {
  background: $tag-cloud-section-bg;
  padding: 4rem;
  max-width: $tag-cloud-section-width;
  margin: 0 auto;
}

.tag-cloud-title {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  color: $tag-cloud-type-color;
  border-bottom: 1px solid $tag-cloud-separator-color;
  padding: 1rem 0;
  margin-bottom: 1rem;
}

.tag-cloud {
  margin: 1rem;
  text-align: center;
  list-style: none;

  .tag-cloud-individual-tag {
    @include label;
    border-radius: 5000px;
    background: $tag-cloud-tag-color;
    display: inline-block;
    color: $tag-cloud-type-color;
    margin: 3px;
    text-transform: uppercase;
    font-weight: bold;

    .fa {
      margin-left: 7px;
      color: $tag-cloud-type-color;
    }

    &:hover {
      background: darken($tag-cloud-tag-color, 25%);
      transition: background-color .2s ease-in;
    }
  }
}

.tag-cloud-section {
  background: #7b93a4;
  padding: 4rem;
  max-width: 800px;
  margin: 0 auto;
}

.tag-cloud-title {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  color: #e6e6e6;
  border-bottom: 1px solid #cacaca;
  padding: 1rem 0;
  margin-bottom: 1rem;
}

.tag-cloud {
  margin: 1rem;
  text-align: center;
  list-style: none;
}

.tag-cloud .tag-cloud-individual-tag {
  display: inline-block;
  padding: 0.33333rem 0.5rem;
  border-radius: 0;
  font-size: 0.8rem;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
  border-radius: 5000px;
  background: #2c3840;
  display: inline-block;
  color: #e6e6e6;
  margin: 3px;
  text-transform: uppercase;
  font-weight: bold;
}

.tag-cloud .tag-cloud-individual-tag .fa {
  margin-left: 7px;
  color: #e6e6e6;
}

.tag-cloud .tag-cloud-individual-tag:hover {
  background: black;
  transition: background-color .2s ease-in;
}

Blog Tag Cloud

By Laurel Beyers

Mobile App Modal

Clipped Circle Graph

Status Update with Input Box

Blog Tag Cloud

By Laurel Beyers

Similar Building Blocks

Mobile App Modal

Clipped Circle Graph

Status Update with Input Box