600 West

Ctasection: Bordered 

<section class="cta-section _bordered" style="">
    <div class="row _centeritems" style="">
        <div class="col _span-7  " style="">
            <h2 class="_small " style="">
                Try Sprout Social free for 30 days or click to learn more about Sprout’s analytics suite.
            </h2>

        </div>

        <div class="col _span-5  " style="">
            <button class="button _large ">
        Start Your Free Trial
    </button>

        </div>

    </div>

</section>
 
<section class="cta-section {{modifier}}" style="{{style}}">
    {{> @children}}
</section>
 
{
  "modifier": "_bordered",
  "children": [
    {
      "component": "row",
      "context": {
        "modifier": "_centeritems",
        "children": [
          {
            "component": "column",
            "context": {
              "span": 7,
              "children": [
                {
                  "component": "heading",
                  "context": {
                    "level": "2",
                    "modifier": "_small",
                    "text": "Try Sprout Social free for 30 days or click to learn more about Sprout’s analytics suite."
                  }
                }
              ]
            }
          },
          {
            "component": "column",
            "context": {
              "span": 5,
              "children": [
                {
                  "component": "button",
                  "context": {
                    "modifier": "_large",
                    "text": "Start Your Free Trial"
                  }
                }
              ]
            }
          }
        ]
      }
    }
  ]
}
  • Content: 
    $leaf-background: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMin' viewBox='-333 124.4 292.1 292.6' enable-background='new -333 124.4 292.1 292.6'%3E%3Cpath fill='%2359CB59' d='M-333 124.4v292.6l68.6-68.6h91.1c73.2 0 132.4-59.1 132.4-132.4l-.1.2v-91.8h-292z'/%3E%3Cpath fill='%230CA750' d='M-264.4 348.4h-66.3l41.4 24.9 24.9-24.9z'/%3E%3Cpath fill='%232BB656' d='M-218 124.4v91.8l91.4-91.8h-91.4z'/%3E%3Cpath fill='%2375DD66' d='M-127.2 124.4l-91.6 92h177.8v-92h-86.2z'/%3E%3Cpath fill='%230CA750' d='M-333 330.1l115-113.9v-91.8h-115v205.7z'/%3E%3C/svg%3E";
.cta-section {
    padding: Space(600) 0;
    text-align: center;
    background: theme-color(background);
    .button {
        margin: 0 Space(300);
    }
    h2 {
        max-width: 54rem;
        margin: 0 auto Space(400);
    }
    .lead {
        max-width: 44rem;
        margin: 0 auto Space(500);
    }
    &._large {
        padding: Space(700) 0;
    }
    &._bordered {
        border-top: 1px solid get-color(neutral, 200);
    }
    &._gray {
        background: theme-color(background, light);
        border-top: none;
    }
    &._leaf {
        color: theme-color(text, inverse);
        background: url($leaf-background) theme-color(link) no-repeat top left / auto 80%;
        h2 {
            color: theme-color(text, inverse);
        }
        ._link {
            color: theme-color(text, inverse);
        }
    }
    &._wide {
        h2,
        .lead {
            max-width: none;
        }
    }
}
  • URL: /components/raw/ctasection/CtaSection.scss
  • Filesystem Path: components/organisms/CtaSection/CtaSection.scss
  • Size: 1.5 KB

There are no notes for this item.