There are no notes for this item.

<a href="#" class="billing-address-block">

    <div class="billing-address-block__header">
        <h3 class="billing-address-block__title">Billing address</h3>
    </div>

    <div class="billing-address-block__body">
        <p>Marc Jenkins<br>
            14 Abbotswood Close<br>
            Winyates Green<br>
            Redditch<br>
            B98 0QD<br>
            United Kingdom</p>
    </div>

</a>
/* No context defined for this component. */
  • Content:
    /*------------------------------------*\
    	Billing Address Block
    \*------------------------------------*/
    
    .billing-address-block {
    	display: flex;
    	flex-direction: column;
    	min-height: 100%;
    	background: $color-white;
    	color: $color-text-base;
    	border: 1px solid rgba(0,0,0,.1);
        box-shadow: 0 0 3px rgba(39,44,49,.02), 0 5px 22px -6px rgba(39,44,49,.05);
    	border-radius: $radius;
    	padding: 1rem;
    	transition: all ease 0.3s;
    	cursor: pointer;
    
    	&:hover, &:focus, &.is-active {
    		background: $color-grey-xlight;
    		box-shadow: 8px 20px 30px rgba(39,44,49,.05), 1px 6px 12px rgba(39,44,49,.04);
    		color: $color-text-base;
    		text-decoration: none;
    	}
    }
    
    .billing-address-block--add {
    	box-shadow: none;
    	text-align: center;
    	justify-content: center;
    	font-weight: bold;
    	color: $color-primary;
    }
    
    .billing-address-block__icon {
    	display: block;
    	margin: 0 auto 0.5rem auto;
    	height: 100%;
    	width: 100%;
    	max-height: 40px;
    	max-width: 40px;
    }
    
    .billing-address-block__body {
    	margin-bottom: 1rem;
    
    	p {
    		margin: 0;
    		font-size: 0.9rem;
    	}
    }
    
    .billing-address-block__footer {
    	margin-top: auto;
    }
    
    .billing-address-block__btn {
    	display: block;
    	width: 100%;
    	background: $color-white;
    	border: 2px solid $color-primary;
    	color: $color-primary;
    	font-weight: 500;
    	border-radius: $radius;
    	text-align: center;
    	font-size: 0.9em;
    	padding: 4px 0;
    
    	.billing-address-block:hover & {
    		background: $color-primary;
    		color: $color-white;
    	}
    }
    
  • URL: /components/raw/billing-address-block/billing-address-block.scss
  • Filesystem Path: components/02-components/billing-address-block/billing-address-block.scss
  • Size: 1.4 KB
  • Handle: @billing-address-block
  • Preview:
  • Filesystem Path: components/02-components/billing-address-block/billing-address-block.twig