Sha256: df5798ecc874274baf012fc5cdaf9ac04a4e9fafebcab23622b7e65e01d9173b
Contents?: true
Size: 1.4 KB
Versions: 5
Compression:
Stored size: 1.4 KB
Contents
// @page Pattern Library/Components
// @name CTAs
//
// @description
// Used within guide and news articles, these CTAs (Calls to Action) are intended to not interupt the content but to integrate in more subtle means.
//
// @markup
// <section class="us-cta cta cta-column">
// <form>
// <h3 class="us-cta__title">It's your report</h3>
// <p>Join the campaign to fight for free annual credit reports for everyone</p>
// <a href="/money/itsmyreport/" class="us-btn us-btn--primary" rel="nofollow">Sign the petition</a>
// </form>
// </section>
.us-cta {
padding: $gutter-width / 2;
margin-bottom: 1.5em;
background-color: $c-white;
border: 1px solid $c-grey;
border-left: 8px solid $c-light-purple;
@include respond-to(tablet, true) {
padding: $gutter-width;
}
label {
display: block;
@include respond-to(desktop, true) {
display: inline-block;
}
}
p {
font-size: 1.125em;
}
}
.us-cta__title.us-cta__title {
@include heading-font;
margin-top: 0;
font-size: 1.5em;
@include respond-to(tablet) {
@include heading(4, $extend: false);
}
@include respond-to(desktop, true) {
@include heading(3, $extend: false);
}
}
.us-cta--side {
padding: $gutter-width / 2;
border-bottom: 10px solid $c-navy;
border-left: 0;
@include respond-to(desktop, true) {
padding: $gutter-width / 1.5;
}
.us-form-input {
width: 100%;
}
}
Version data entries
5 entries across 5 versions & 1 rubygems