Hero: Post

Test

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-hero relative mb-2">
    <div class="absolute pin c-hero__clip bg-black c-hero__clip--post bg-gradient overflow-hidden bg-black">
        <svg class="absolute pin" style="overflow: visible" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1622.963 792.478" data-lines data-spon-track="true">
			<linearGradient id='grad1'>
				<stop stop-color='#0e0f26'/>
				<stop data-stop-color offset='30%' stop-color='#671eb8'/>
			</linearGradient>
			<linearGradient id='grad2'>
				<stop stop-color='#28BBDE'/>
				<stop data-stop-color offset='90%' stop-color='#1C1E4B'/>
			</linearGradient>
			<linearGradient id='grad3'>
				<stop stop-color='#0e0f26'/>
				<stop data-stop-color offset='70%' stop-color='#ffffff'/>
			</linearGradient>
			<linearGradient id='grad4'>
				<stop stop-color='#671EB8'/>
				<stop data-stop-color offset='70%' stop-color='#1C1E4B'/>
			</linearGradient>
			<path data-speed="-0.46" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad1)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M-98.445 775.219L498.527 641.47S315.03 329.936 307.692 325.043l-348.834-82.68" />
			<path data-speed="-0.14" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad2)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M482.056-40.886l187.645 176L1118.879-46.19"/>
			<path data-speed="-0.11" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad3)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M766.701 898.364c3-3 393-701.005 396-699.005s284 362.005 284 362.005l233-48.003" />
			<path data-speed="-0.12" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad4)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M1707.701 319.364l-405 173-45 386"/>
		
		</svg>
    </div>
    <div class="relative z-10">
        <div class="px-1-5 md:px-2 lg:px-3 lg:w-su-18/24 max-w-post mx-auto">
            <h1 class="text-h2 font-light mb-1-5 xl:mb-2 text-white">Curiously <br />Creative Digital.</h1>
            <div class="w-full relative image-container" style="padding-top: 66.68%">
                <noscript>
			<img class="absolute pin object-fit w-full h-full" src="http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg" srcset="http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg 768w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_71b9264554597c4f219c11a5f412f624.jpg 1024w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_c778f9fd339f8d233fb1ecbf954502b9.jpg 1600w" alt="Unsplash Placeholder 4" />
		</noscript>
                <img class="lazyload absolute pin object-fit w-full h-full " src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg"
                    data-srcset="http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg 768w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_71b9264554597c4f219c11a5f412f624.jpg 1024w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_c778f9fd339f8d233fb1ecbf954502b9.jpg 1600w"
                    alt="Unsplash Placeholder 4" />
            </div>

        </div>
    </div>
</div>


        {% import '@helpers' as h %}

<div class="c-hero relative mb-2">
  <div class="absolute pin c-hero__clip bg-black c-hero__clip--post bg-gradient overflow-hidden bg-black">
		<svg class="absolute pin" style="overflow: visible" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1622.963 792.478" data-lines data-spon-track="true">
			<linearGradient id='grad1'>
				<stop stop-color='#0e0f26'/>
				<stop data-stop-color offset='30%' stop-color='#671eb8'/>
			</linearGradient>
			<linearGradient id='grad2'>
				<stop stop-color='#28BBDE'/>
				<stop data-stop-color offset='90%' stop-color='#1C1E4B'/>
			</linearGradient>
			<linearGradient id='grad3'>
				<stop stop-color='#0e0f26'/>
				<stop data-stop-color offset='70%' stop-color='#ffffff'/>
			</linearGradient>
			<linearGradient id='grad4'>
				<stop stop-color='#671EB8'/>
				<stop data-stop-color offset='70%' stop-color='#1C1E4B'/>
			</linearGradient>
			<path data-speed="{{ random(range(10, 50)) * -1 / 100 }}" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad1)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M-98.445 775.219L498.527 641.47S315.03 329.936 307.692 325.043l-348.834-82.68" />
			<path data-speed="{{ random(range(10, 50)) * -1 / 100 }}" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad2)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M482.056-40.886l187.645 176L1118.879-46.19"/>
			<path data-speed="{{ random(range(10, 50)) * -1 / 100 }}" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad3)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M766.701 898.364c3-3 393-701.005 396-699.005s284 362.005 284 362.005l233-48.003" />
			<path data-speed="{{ random(range(10, 50)) * -1 / 100 }}" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad4)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M1707.701 319.364l-405 173-45 386"/>
		
		</svg>
	</div>
  <div class="relative z-10">
		<div class="px-1-5 md:px-2 lg:px-3 lg:w-su-18/24 max-w-post mx-auto">
			<h1 class="text-h2 font-light mb-1-5 xl:mb-2 text-white">{{ heading }}</h1>
			{{ h.srcset(image) }}
		</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": "Curiously <br />Creative Digital.",
  "date": "12th July 2017",
  "url": "#0",
  "image": {
    "url": "http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg",
    "aspect": 66.68,
    "src": "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271%27%20height%3D%271%27%20style%3D%27background%3Atransparent%27%2F%3E",
    "srcset": "http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg 768w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_71b9264554597c4f219c11a5f412f624.jpg 1024w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_c778f9fd339f8d233fb1ecbf954502b9.jpg 1600w",
    "alt": "Unsplash Placeholder 4"
  }
}

File:

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

Handle: @hero--post
Variants (7): Default , Home , About , Project , Contact , Post , Journal
Preview:
- With layout
- Component only
Filesystem Path: src/templates/04-components/hero/hero--post.twig
References (1): @helpers
Referenced by (1): @article

There are no notes for this item.

Hero: Post

Block

Hero

Teaser

Text Image