Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Eyecatcher 

<!-- Default -->
<div class=" eyecatcher ">
    <div class="eyecatcher__content">
        Lorem impsum dolor
    </div>
</div>
<div class="-clearfix"></div>


<!-- Primary -->
<div class=" eyecatcher -clr-primary -size-s">
    <div class="eyecatcher__content">
        Lorem impsum dolor
    </div>
</div>
<div class="-clearfix"></div>


<!-- Secondary -->
<div class=" eyecatcher -clr-secondary -size-m">
    <div class="eyecatcher__content">
        Lorem impsum dolor
    </div>
</div>
<div class="-clearfix"></div>


<!-- Black -->
<div class=" eyecatcher -clr-black -size-l">
    <div class="eyecatcher__content">
        Lorem impsum dolor
    </div>
</div>
<div class="-clearfix"></div>


<!-- White -->
<div class=" eyecatcher -clr-white -size-l -bg-black">
    <div class="eyecatcher__content">
        Lorem impsum dolor
    </div>
</div>
<div class="-clearfix"></div>


<div class="{{mixes}} eyecatcher {{modifiers}}">
  <div class="eyecatcher__content">
    {{content}}
  </div>
</div>
<div class="-clearfix"></div>
 
/* Default */
{
  "modifiers": null,
  "content": "Lorem impsum dolor"
}


/* Primary */
{
  "modifiers": "-clr-primary -size-s",
  "content": "Lorem impsum dolor"
}


/* Secondary */
{
  "modifiers": "-clr-secondary -size-m",
  "content": "Lorem impsum dolor"
}


/* Black */
{
  "modifiers": "-clr-black -size-l",
  "content": "Lorem impsum dolor"
}


/* White */
{
  "modifiers": "-clr-white -size-l -bg-black",
  "content": "Lorem impsum dolor"
}
  • Content: 
    .eyecatcher {
  $root: &;

  position: relative;
  float: left;
  margin: 0 4.8rem $paragraph-margin 0;
  border-style: solid;

  &:last-child {
    margin-bottom: 0;
  }

  &::after {
    content: '';
    display: block;
    padding-bottom: 100%;
  }

  &__content {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  &.-float-right {
    float: right;
    margin: 0 0 $paragraph-margin 4.8rem;
  }

  &.-size-s {
    width: rem-calc(150px);
    border-width: 6px;

    #{$root}__content {
      @include typography-level('heading-3');

      padding: 1.2rem;
    }
  }

  &.-size-m {
    width: rem-calc(175px);
    border-width: 7px;

    #{$root}__content {
      @include typography-level('heading-3');

      padding: 1.4rem;
    }
  }

  &.-size-l {
    width: rem-calc(200px);
    border-width: 8px;

    #{$root}__content {
      @include typography-level('heading-2');

      padding: 1.6rem;
    }
  }

  &.-clr-primary {
    border-color: $primary;
    color: $primary;
  }

  &.-clr-secondary {
    border-color: $secondary;
    color: $secondary;
  }

  &.-clr-white {
    border-color: $white;
    color: $white;
  }

  &.-clr-black {
    border-color: $black;
    color: $black;
  }
}
  • URL: /components/raw/molecules-eyecatcher/_eyecatcher.scss
  • Filesystem Path: src/components/02-ui-components/02-molecules/19-eyecatcher/_eyecatcher.scss
  • Size: 1.2 KB

There are no notes for this item.