600 West

Blast 

<aside id="testBlast" class="Blast items-center bg--aqua-600 c--text-inverse fixed top0 w-100p z9" role="banner" data-controller="blast">
    <p id="" class="f300 grow-1 pa400 tc">
        Two words: Instagram Publishing. Now all you need is one click to schedule and post to Instagram. <a class="underline fw-semibold c--text-inverse" href="https://sproutsocial.com/integrations/instagram/" data-action="#testBlast.click">Discover how.</a>
    </p>

    <button class="button-reset dib f700 ma0" data-action="#testBlast.close" aria-label="Close Announcment">×</button>
</aside>
 
<aside id="{{id}}" class="Blast {{modifier}}" role="banner" data-controller="blast">
	{{> @children}}
	<button class="button-reset dib f700 ma0" data-action="#{{id}}.close" aria-label="{{closelabel}}">×</button>
</aside>
 
{
  "id": "testBlast",
  "modifier": "items-center bg--aqua-600 c--text-inverse fixed top0 w-100p z9",
  "closelabel": "Close Announcment",
  "children": [
    {
      "component": "p",
      "context": {
        "modifier": "f300 grow-1 pa400 tc",
        "text": "Two words: Instagram Publishing. Now all you need is one click to schedule and post to Instagram. <a class=\"underline fw-semibold c--text-inverse\" href=\"https://sproutsocial.com/integrations/instagram/\" data-action=\"#testBlast.click\">Discover how.</a>"
      }
    }
  ]
}
  • Content: 
    .Blast {
    display: none;
    > * {
        opacity: 0;
        transition: opacity $transition-time-300 $transition-in-default $transition-time-200;
    }
    &.is-open {
        display: flex;
        > * {
            opacity: 1;
        }
    }
}
  • URL: /components/raw/blast/Blast.scss
  • Filesystem Path: components/organisms/Blast/Blast.scss
  • Size: 253 Bytes

There are no notes for this item.