<div class="c-hero">
    <div class="px-1-5 md:px-2 xl:wrapper lg:flex lg:justify-between lg:items-start">
        <div class="sm:w-su-18/24 md:w-su-12/24 lg:w-su-10/24 mb-1-5">
            <h1 class="text-xl text-white" data-motion-text data-speed="0.2">
                We love to talk digital
            </h1>
        </div>
    </div>
</div>
{% import '@helpers' as h %}

<div class="c-hero">
	<div class="px-1-5 md:px-2 xl:wrapper lg:flex lg:justify-between lg:items-start">
		<div class="sm:w-su-18/24 md:w-su-12/24 lg:w-su-10/24 mb-1-5">
			<h1 class="text-xl text-white" data-motion-text data-speed="0.2">
				{{ heading }}
			</h1>
		</div>
	</div>
</div>
{
  "siteTitle": "Mudstone Component Library",
  "craft": {
    "app": {
      "config": {
        "general": {
          "custom": {
            "wrapper": "/wrapper/"
          }
        }
      }
    }
  },
  "tel": "01225 471 465",
  "phone": "01225 471 465",
  "email": "hello@ournameismud.co.uk",
  "twitter": "asclearasmud",
  "copyright": "&copy; 2018 Our Name is Mud",
  "siteUrl": "/components/preview/home",
  "address": "5 Princes Buildings \nBath \nBA1 2ED",
  "cta": "<p>We love to talk digital. So if there’s a project that you’re itching to start or you just want to introduce yourself,&nbsp;<a href=\"/contact\" data-contact-link=\"\" class=\"no-barba\">drop us a line</a>. We’re always happy to chat...</p>",
  "entries": [
    {
      "title": "Projects",
      "url": "/components/preview/listing"
    },
    {
      "title": "About",
      "url": "/components/preview/about"
    },
    {
      "title": "Journal",
      "url": "/components/preview/journal"
    },
    {
      "title": "Contact",
      "url": "/components/preview/contact"
    }
  ],
  "heading": "We love to talk digital",
  "body": "<p>If there’s a project that you’re itching to start or you just want to introduce yourself, drop us a line. We’re always happy to chat.</p>"
}
  • Content:
    .c-hero {
    	@apply .pt-6 .overflow-hidden .relative;
    
    	@screen md {
    		@apply .pt-10;
    	}
    
    	@screen xl {
    		@apply .pt-12;
    	}
    }
    
    @screen lg {
    	.c-hero__clip--home {
    		height: 80vh;
    	}
    }
    
    .c-hero__clip--project {
    	height: 60vh;
    	perspective: 600px;
    
    	@screens md {
    		height: 50vh;
    	}
    }
    
    .c-hero__clip--post {
    	height: 90%;
    }
    
    .c-hero__clip {
    	clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
    }
    
    .c-hero--h {
    	@screen lg {
    		min-height: rem(600px);
    		height: 70vh;
    	}
    
    	@screen xl {
    		min-height: rem(800px);
    	}
    }
    
    .c-hero__heading {
    	transform: translate3d(0, rem(-130px), 0);
    	top: 50%;
    
    	@screen md {
    		transform: translate3d(0, rem(-100px), 0);
    	}
    
    	@screen lg {
    		top: 0;
    		transform: none;
    	}
    }
    
    .c-hero__title-col {
    	@screen lg {
    		grid-column: 1 / 11;
    	}
    }
    
    .c-hero__body-col {
    	@screen lg {
    		grid-column: 14 / 22;
    	}
    }
    
    .c-hero__end {
    	@apply .font-bold;
    
    	opacity: 1;
    	text-align: center;
    }
    
    .c-hero__shout {
    	perspective: 1200px;
    }
    
    .c-hero__start {
    	transform: rotateX(-90deg);
    	max-width: 90%;
    	flex-wrap: wrap;
    
    	@screen md {
    		white-space: nowrap;
    	}
    }
    
    .c-hero__end {
    	transform: rotateX(-90deg);
    }
    
  • URL: /components/raw/hero/_hero.scss
  • Filesystem Path: src/templates/04-components/hero/_hero.scss
  • Size: 1.1 KB

There are no notes for this item.