Box

<article class="box">
    <div class="box__inner">
        <div class="box__image">
            <img data-src="../../dist/images/placeholder-images/greg-rakozy-129733.jpg" alt="Image" class="image lazyload">
        </div>
        <div class="box__content">
            <h2 class="heading heading--column ">
                Column header
            </h2>

            <p>Box content.</p>

            <a href="url" title="Link title" target="" class="link" property="url">A link specified on the molecule</a>

        </div>
    </div>
</article>
<article class="box">
	<div class="box__inner">
    {{#if image }}
      <div class="box__image">
        {{ render '@image' image }}
      </div>
    {{/if}}
	<div class="box__content">
        {{ render '@heading--column' }}
    
        {{#block "content"}}
            <p>{{ box.content }}</p>
        {{/block}}

        {{#if link }}
            {{ render '@link' link }}
        {{/if}}
	</div>
	</div>
</article>
{
  "heading": {
    "text": "Box header"
  },
  "image": {
    "url": "/dist/images/placeholder-images/greg-rakozy-129733.jpg",
    "alt": "Image"
  },
  "box": {
    "content": "Box content.",
    "url": "/dist/images/placeholder-images/greg-rakozy-129733.jpg"
  },
  "link": {
    "url": "url",
    "text": "A link specified on the molecule",
    "target": null,
    "title": "Link title"
  }
}
  • Content:
    /*
     * Module: Box
     */
    
    :root{
        --box-background-color: var(--color-white);
        --box-border-radius: 4px;
        --box-padding: 20px;
        --box-paragraph-spacing-top: 15px;
        --box-shadow: 2px 5px 10px 0 rgba(0,0,0, .2);
    }
    
    .box {
        box-shadow: var(--box-shadow);
    
        &__inner {
            border-radius: var(--box-border-radius);
            background-color: var(--box-background-color);
        }
    
        &__image {
            width: 100%;
        }
    
        &__content {
            padding: var(--box-padding);
        }
        
        p + p {
            margin-top: var(--box-paragraph-spacing-top);
        }  
    }
  • URL: /components/raw/box/box.css
  • Filesystem Path: patterns/02-molecules/box/box/box.css
  • Size: 577 Bytes