<section class="cta-section _leaf" style="">
<div class="row " style="">
<div class="col _span-12 " style="">
<p id="" class="lead _large" style="">In addition to being an effective social media marketing solution, Sprout is a leading social media management platform that provides world-class engagement, publishing, analytics and collaboration tools.</p>
<button class="button _inverse _large ">
Start Your Free Trial
</button>
</div>
</div>
</section>
<section class="cta-section {{modifier}}" style="{{style}}">
{{> @children}}
</section>
{
"modifier": "_leaf",
"children": [
{
"component": "row",
"context": {
"children": [
{
"component": "column",
"context": {
"span": 12,
"children": [
{
"component": "lead",
"context": {
"modifier": "_large",
"text": "In addition to being an effective social media marketing solution, Sprout is a leading social media management platform that provides world-class engagement, publishing, analytics and collaboration tools."
}
},
{
"component": "button",
"context": {
"modifier": "_inverse _large",
"text": "Start Your Free Trial"
}
}
]
}
}
]
}
}
]
}
$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;
}
}
}
There are no notes for this item.