Sha256: b08271ab02139065b01abbb3e07715c4a06719afa067a37e6ec1daa93f8bb99c
Contents?: true
Size: 1.91 KB
Versions: 10
Compression:
Stored size: 1.91 KB
Contents
// @page Pattern Library/Components
// @name USPs
//
// @description
// USPs (Unique Selling Points) are used within tables and on splash pages to highlight offers within a deal, and also to differentiate deals.
// General guidelines; There should only be one USP per deal. Text within USPs should be written in sentence case (not uppercase).
//
// @state .us-usp--blue - uSwitch related
// @state .us-usp--orange - Rewards (money/points)
// @state .us-usp--purple - Gifts eg. free TV
// @state .us-usp--yellow - Vouchers
// @state .us-usp--typecyan - Micro persuasions eg. most popular, half price
// @state .us-usp--green - Renewable and environmentally friendly
// @state .us-usp--navy - Generic vertical specific USP
// @state .us-usp--cyan - Generic vertical specific USP
// @state .us-usp--typegrey - Generic vertical specific USP
// @state .us-usp--red - Generic vertical specific USP
//
// @markup
// <div class='us-usp {$modifiers}'>Shortened USP</div>
// <div class='us-usp us-usp--annotated'>
// <div class='us-usp {$modifiers}'>Annotated USP</div>
// More information about USP goes here
// </div>
$variants: (
('cyan', $c-cyan, $c-navy),
('typecyan', $c-typecyan),
('blue', $c-blue),
('navy', $c-navy),
('red', $c-red),
('green', $c-green),
('purple', $c-purple),
('orange', $c-orange),
('yellow', $c-yellow, $c-typegrey),
('typegrey', $c-typegrey)
) !default;
.us-usp {
display: inline-block;
padding: 0 10px;
font-weight: bold;
line-height: $base-line-ratio;
color: #fff;
text-align: center;
background-color: $c-typecyan;
}
@each $colour in $variants {
.us-usp--#{nth($colour, 1)} {
background-color: #{nth($colour, 2)};
@if length($colour) == 3 {
color: #{nth($colour, 3)};
}
}
}
.us-usp--annotated {
font-weight: normal;
color: $c-typegrey;
text-align: left;
background-color: $c-bggrey;
.us-usp {
margin-right: 10px;
margin-left: -10px;
}
}
Version data entries
10 entries across 10 versions & 1 rubygems