Component Library

Text Box: Centered 

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

            <p>Text Box content.</p>
        </div>
        <a href="url" title="Link title" target="_blank" class="link   " property="url">Link text</a>

    </div>
</article>
 
{{> @text-box modifier="text-box--centered" }}
 
{
  "heading": {
    "text": "Text Box Centered header"
  },
  "textBoxContent": "Text Box content.",
  "content": "Text Box Centered content.",
  "link": {
    "url": "url",
    "text": "Link text",
    "target": null,
    "title": "Link title"
  }
}
  • 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.