<header class="hero _split" style=" ">
    <div class="row " style="">
        <div class="col _span-12  " style="">
            <h1 class=" " style="max-width: 44rem;">
                A Social Business Platform to Power the Enterprise of Power.
            </h1>

            <div class="centeredblock " style="">
                <button class="button _large ">
        Start Your Free Trial
    </button>

                <p id="" class="fineprint " style="">No credit card required. No software to install.</p>

            </div>

        </div>

    </div>

</header>
<header class="hero {{modifier}}" style="{{#if background}}background-image: url({{background}});{{/if}} {{style}}">
	{{> @children}}
</header>
{
  "background": null,
  "style": null,
  "children": [
    {
      "component": "row",
      "context": {
        "children": [
          {
            "component": "column",
            "context": {
              "span": 12,
              "children": [
                {
                  "component": "heading",
                  "context": {
                    "text": "A Social Business Platform to Power the Enterprise of Power.",
                    "level": 1,
                    "style": "max-width: 44rem;"
                  }
                },
                {
                  "component": "centeredblock",
                  "context": {
                    "children": [
                      {
                        "component": "button",
                        "context": {
                          "modifier": "_large",
                          "text": "Start Your Free Trial"
                        }
                      },
                      {
                        "component": "fineprint",
                        "context": {
                          "text": "No credit card required. No software to install."
                        }
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
      }
    }
  ],
  "modifier": "_split"
}
  • Content:
    @import "../../Axioms";
    .hero {
        @include hero;
        &._angled {
            &._bottom + .hero,
            &._bottom + .section {
                @include angle(before);
            }
        }
        &._light {
            background-color: theme-color(background-hero, light);
        }
        &._dark {
            background-color: theme-color(background-hero, dark);
        }
        &._overlay {
            @include background-overlay(theme-color(main, dark), .6);
        }
        &._centercontent {
            @include hero-alignment("center");
        }
        &._left {
            @include hero-alignment("left");
        }
        &._split {
            background-color: get-color(aqua, 600);
            background-image: linear-gradient(to bottom, get-color(aqua, 600) 50%, get-color(aqua, 800) 50%);
        }
        &._tall {
            @include hero-size(12vh, 12vh);
            &:not(._centercontent) {
                @include hero-alignment("left");
            }
        }
        &._inverse {
            h1,
            h2,
            h3,
            h4,
            p,
            ul,
            li {
                color: theme-color(text);
            }
        }
        .certified {
            display: flex;
            margin-top: 1.5rem;
            align-items: center;
            text-align: right;
            pointer-events: none;
            p {
                margin-top: 0; // To fight against the _tall hero's strict margins
                margin-right: 0; // To fight against the _tall hero's strict margins
                margin-left: auto; // To fight against the _tall hero's strict margins
            }
            &::after,
            p,
            strong {
                color: rgba(get-color(neutral, 0), .8);
            }
            &::after {
                @include font-size-head;
                margin-left: .75rem;
            }
        }
        @media #{$mobile-media} {
            background-image: none !important;
            &._centercontent {
                @include hero-alignment("left"); // only center on big screens
            }
            &._features {
                background-color: theme-color(background, dark);
            }
        }
        @media #{$desktop-media} {
            &._split {
                background: url("//media.sproutsocial.com/uploads/desktop-1@2x-1.png") no-repeat center center, linear-gradient(to right, get-color(aqua, 600) 50%, get-color(aqua, 800) 50%);
                background-size: 25% auto, cover;
            }
            .certified {
                position: absolute;
                right: 1.5rem;
                bottom: 3rem;
                text-shadow: 1px 1px 2px get-color(neutral, 500);
            }
        }
        @media screen and (min-width: 980px) {
            &._split {
                background: url("//media.sproutsocial.com/uploads/desktop-1@2x-1.png") no-repeat center center, linear-gradient(to right, get-color(aqua, 600) 50%, get-color(aqua, 800) 50%);
                background-size: 336px 307px, cover;
            }
        }
    }
    
  • URL: /components/raw/hero/Hero.scss
  • Filesystem Path: components/organisms/Hero/Hero.scss
  • Size: 2.8 KB

There are no notes for this item.