Global Alert

There are no notes for this item.

<div class="global-alert">
    <div class="row">
        <div class="column small-12">
            <a href="https://modmore.com/blog/2019/cyber-sale/" title="See all the sales" class="global-alert__link">
				<strong>
					Cyber Sale: Save up to 50% on our extras
					<svg role="img" class="icon global-alert__icon">
						<use xlink:href="/svg/svg-symbols.svg#long-arrow-right"></use>
					</svg>
				</strong>
            	<span>(Expires <span id="countdown"> in 1 day, 13 hours, 13 minutes and 47 seconds</span>)</span>
			</a>
        </div>
    </div>
</div>
/* No context defined for this component. */
  • Content:
    .global-alert {
    	background: $color-grey-xlight;
    	padding: 1em 0.5em;
    }
    
    .global-alert__link {
    	display: flex;
    	flex-direction: column;
    	text-align: center;
    
    	@include mq(medium-major) {
    		flex-direction: row;
    		justify-content: space-between;
    	}
    
    	&:hover {
    		text-decoration: none;
    	}
    }
    
    .global-alert__icon {
    	width: 18px;
    	height: 18px;
    	position: relative;
    	top: 3px;
    }
    
  • URL: /components/raw/global-alert/global-alert.scss
  • Filesystem Path: components/02-components/global-alert/global-alert.scss
  • Size: 375 Bytes