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

Sticky Teaser 

<div class=" sticky-teaser ">
    <a class="btn -cta" href="#">
        <i class="icon -contact"></i>
        Contacts</a>
</div>
 
<div class="{{mixes}} sticky-teaser {{modifiers}}">
  {{#link}}
  <a class="btn -cta" href="{{href}}">
    {{#icon}}<i class="icon {{.}}"></i>{{/icon}}
    {{text}}</a>
  {{/link}}
</div>
 
{
  "modifiers": null,
  "link": {
    "icon": "-contact",
    "href": "#",
    "text": "Contacts"
  }
}
  • Content: 
    .sticky-teaser {
  position: fixed;
  right: 0;
  bottom: 50%;
  z-index: 15;
  transform: rotate(-90deg) translateX(50%);
  transform-origin: 100% 100%;

  a {
    padding-right: 1.2rem;

    .icon {
      transform: rotate(90deg);
    }

    &::after {
      display: none;
    }
  }
}
  • URL: /components/raw/molecules-sticky-teaser/_sticky-teaser.scss
  • Filesystem Path: src/components/02-ui-components/02-molecules/21-sticky-teaser/_sticky-teaser.scss
  • Size: 288 Bytes
  • Handle: @molecules-sticky-teaser
  • Preview:
  • Filesystem Path: src/components/02-ui-components/02-molecules/21-sticky-teaser/sticky-teaser.hbs

There are no notes for this item.