<article class="text-box ">
    <div class="text-box__inner">
        <div class="text-box__content">
            <h2 class="heading heading--column ">Text Box header</h2>

            <p>Text Box content.</p>
        </div>
    </div>
</article>
<article class="text-box {{ modifier }}">
	<div class="text-box__inner">
		<div class="text-box__content">
			{{ render '@heading--column' heading }}
			{{#block "textBoxContent"}}
				<p>{{ textBoxContent }}</p>
			{{/block}}
		</div>
		{{#if link }}
			{{ render '@link' }}
		{{/if}}
	</div>
</article>
{
  "heading": {
    "text": "Text Box header"
  },
  "textBoxContent": "Text Box content."
}
  • Content:
    /*
     * Module: Text Box
     */
    
    :root {
        --text-box-background-color: var(--color-white);
        --text-box-border-style: 1px solid var(--color-gray-light);
        --text-box-border-radius: 4px;
        --text-box-padding: 20px;
        --text-box-paragraph-spacing-top: 15px;
    }
    
    .text-box {
        p + p {
            margin-top: var(--text-box-paragraph-spacing-top);
        }
    
        &--centered {
            text-align: center;
        }
    
        &__inner {
            padding: var(--text-box-padding);
        }
    }
    
  • URL: /components/raw/text-box/text-box.css
  • Filesystem Path: src/02-molecules/box/text-box/text-box.css
  • Size: 473 Bytes

There are no notes for this item.