Prototyping Demo

Text Box: Centered 

<article class="text-box text-box--centered">
    <div class="text-box__inner">
        <div class="text-box__content">
            <h2 class="text-box__heading">Text Box Centered header</h2>
            <p>Text Box Centered content.</p>
        </div>
        <a href="#" title="Textbox link" target="" class="link" property="url">Textbox link</a>
    </div>
</article>
 
{{> @text-box modifier="text-box--centered" }}
 
{
  "heading": {
    "text": "Text Box Centered header"
  },
  "text": "Text Box Centered content.",
  "link": {
    "url": "#",
    "text": "Textbox link",
    "target": null,
    "title": "Textbox link"
  }
}
  • 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 {
    &__heading {
        font-size: 30px;
        margin-bottom: 20px;
        margin-top: 0;

        @media (--viewport-sm-min) {
            font-size: 40px;
        }
    }

    p + p {
        margin-top: var(--text-box-paragraph-spacing-top);
    }

    &--centered {
        text-align: center;
    }
}
  • URL: /components/raw/text-box/text-box.css
  • Filesystem Path: patterns/02-molecules/box/text-box/text-box.css
  • Size: 571 Bytes