Page Comparison

...

• To display a tag icon, add the css classname .events-tag. To hide the tag icon, delete the .events-tag.

• To display the light button styled design, ensure that .events-btn-light is in replacement of .events-btn-dark

• You will also need to add the below styles to your scss documents.

• Applying the below variables @mixin tag-bg($color) will help ensure that your college colors are applied to the event tag icon. See below.
  

  Image Added

• You also want to add your branding to the events.scss file. Below is how you would do this.
  

  Image Added

// Events Article
.events {
  &-category {

    a {
      color: $white;

      &:hover, &:focus {
        background-color: darken($gray-500, 15%);
      }
    }
  }

  // Event Tag
  &-tag {
    a {
      @include tag-bg('%23002b5c');
    }
  }

  &-tag.events-btn-light {
    a {
      &:hover, &:focus {
        @include tag-bg('%23002b5c');
      }
    }
  }

  &-tag.events-btn-dark {
    a {
      &:hover, &:focus {
        @include tag-bg('%23ffffff');
      }
    }
  }

  &-btn-light {
    a {
      background-color: $gray-100;
      color: $gray-700;

      &:hover, &:focus {
        background-color: darken($gray-100, 7.5%);
        color: $gray-700;
      }
    }
  }

  &-btn-dark {
    a {
      background-color: $gray-100;
      color: $gray-700;

      &:hover, &:focus {
        background-color: $primary;
        color: $white;
      }
    }
  }

  // end
}

• Be sure to include the new events.scss file in your main style.scss.

• Make sure to change the color values to your colleges brand colors. One of the color values needs to ba a data uri for the tag icon. Use the blah tool to convert a normal color hex value to a color data uri value.

  Code Block
  // Event Tag &-tag { a { @include tag-bg('%23002b5c'); } } &-tag.events-btn-light { a { &:hover, &:focus { @include tag-bg('%23002b5c'); } } }

• Make sure that your .events-btn-dark css class is using your college primary colors.

  &-btn-dark {
    a {
      background-color: $gray-100;
      color: $gray-700;

      &:hover, &:focus {
        background-color: $primary;
        color: $white;
      }
    }
  }

...