Component Library

Box Image 

<article class="box-image">
    <div class="box-image__inner" style="background-image: url(https://images.unsplash.com/photo-1492970471430-bc6bd7eb2b13?ixlib&#x3D;rb-0.3.5&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;s&#x3D;9893bc89e46e2b77a5d8c091fbba04e9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1955&amp;q&#x3D;80);">
        <div class="box-image__content">
            <h2 class="heading heading--column ">Column header</h2>

            <p>Box Image content.</p>
        </div>
    </div>
</article>
 
<article class="box-image">
	<div class="box-image__inner" style="background-image: url({{ boxImage.url }});">
		<div class="box-image__content">
			{{ render '@heading--column' header }}
			{{#block "content"}}
				<p>{{ boxImage.content }}</p>
			{{/block}}
		</div>
	</div>
</article>
 
{
  "heading": {
    "text": "Box Image header"
  },
  "boxImage": {
    "url": "https://images.unsplash.com/photo-1492970471430-bc6bd7eb2b13?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9893bc89e46e2b77a5d8c091fbba04e9&auto=format&fit=crop&w=1955&q=80",
    "content": "Box Image content."
  }
}
  • Content: 
    /*
 * Module: Box Image
 */

:root {
    --box-background-color: var(--color-white);
    --box-border-radius: 4px;
    --box-content-opacity: 25%;
    --box-min-height: 300px;
    --box-padding: 20px;
    --box-paragraph-spacing-top: 15px;
    --box-shadow: 2px 5px 15px 0 rgba(0, 0, 0, 0.15);
}

.box-image {
    position: relative;
    width: 100%;
    box-shadow: var(--box-shadow);

    &__inner {
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: var(--box-min-height);
        border-radius: var(--box-border-radius);
    }

    &__content {
        background-color: color-mod(
            var(--box-background-color) alpha(var(--box-content-opacity))
        );
        bottom: 0;
        left: 0;
        padding: var(--box-padding);
        position: absolute;
        right: 0;
    }

    p + p {
        margin-top: var(--box-paragraph-spacing-top);
    }
}
  • URL: /components/raw/box-image/box-image.css
  • Filesystem Path: src/02-molecules/box/box-image/box-image.css
  • Size: 938 Bytes

There are no notes for this item.