FTSE Russell Styleguide

Big Button 

<div class="big-button">
    <a href="#americas">
        <div class="big-button__wrapper">
            <div class="big-button__background-image" style="background: url(../../assets/images/convergence-background-e1484316906564.jpg) no-repeat scroll center center/cover;"></div>
            <div class="big-button__filter"></div>
            <div class="big-button__content__container">
                <h3 class="big-button__content text--center">Americas</h3>
            </div>
        </div>
    </a>
</div>
 
<div class="big-button">
  <a href="#{{ link }}">
    <div class="big-button__wrapper">
      <div class="big-button__background-image" style="background: url({{ image_src }}) no-repeat scroll center center/cover;"></div>
      <div class="big-button__filter"></div>
      <div class="big-button__content__container">
        <h3 class="big-button__content text--center">{{ region }}</h3>
      </div>
    </div>
  </a>
</div>
 
{
  "region": "Americas",
  "link": "americas",
  "image_src": "../../assets/images/convergence-background-e1484316906564.jpg"
}
  • Content: 
    .big-button {
  position: relative;
  max-height: 140px;
  flex:1;
  background: $primary;
  transition: all 0.3s ease-in-out;
  overflow: hidden;

  @include mq($breakpoint-lg) {
    max-height: 300px;
  }

  &::after {
    background-color: $primary;
    bottom: 0;
    content: '';
    display: block;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.3s ease-in-out;
  }

  &:hover::after {
    opacity: .9;
    transition: all 0.3s ease-in-out;
  }

  &__background-image {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all 0.3s ease-in-out;
  }

  &__wrapper {
    display: flex;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  &__content {
    color: $white;
    font-weight: $font-weight-light;
    font-size: $font-size-xl;
    z-index: $zindex-tooltip;
    align-self: center;
    text-align: center;
    margin-bottom: 0;
  }

  &__content__container {
    margin: auto;
    position: relative;
    min-height: 140px;
    display: flex;
    align-items: center;

    @include mq($breakpoint-lg) {
      min-height: 300px;
    }
  }  

  &__filter {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0,0,0,0.45);
    opacity: .9;
  }

}
  • URL: /components/raw/big_button/_big_button.scss
  • Filesystem Path: src/components/molecules/big_button/_big_button.scss
  • Size: 1.3 KB

There are no notes for this item.