Sha256: e5f2d1d4ad740d2b15dd94a8041f8ce3d34c622d85f512ada5b4712c8776eccd
Contents?: true
Size: 1.92 KB
Versions: 12
Compression:
Stored size: 1.92 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
12 entries across 12 versions & 1 rubygems