Free shipping on books, Bibles, VBS, and church supplies of $50 or more. View Details

Generic Image Hero

This is some subtext for the hero. Settings on this hero min-height and dark text with background color on desktop and an image on mobile.

test

Components Test Pages

Table of Contents

Headings

  • Heading tag

    • Type of Heading: H1-H6

    • "Link URL" and "Link Text", if populated, will display a link that comes directly after the Heading text, on the same line.

      • "Link URL Target" will determine if the link opens in the same browser tab (_self) or a new browser tab (_blank)

      • Show Arrow Icon on Link will display an arrow icon just after the text of the links (as part of the link) if checked "Yes"

    • Bottom Spacing allows one to add some spacing between the heading tag and next content section

  • Headings in General

    • Please try not to use heading as a means for sizing text. Headings are directly connected to SEO and Accessibility by means of mapping a page's content hierarchy.

      • H1

        • There should always be one H1 on the page, which would be the page title 99.99% of the time

        • There should never be more than one H1 on a page for the same reason as stated above.

      • Most of the full-width components, like the Multicolumn, sliders, and so on, have some variation of a Heading Text field. In most cases this field will render on the page as a H2 (because, in most cases, it's a new page section, which is a driect child of the Page Title (H1)

      • Headings should note a hierarchy of content so

        • don't use the same heading size directly under each other. Example: if a section heading is an H3 and there is another section of content within that section, don't use another h3. The direct child sections' heading should be H4

        • try not to skip using the next smaller heading size. Example: If the section has a heading of H2, and there are other blocks of content with that section that have headings, they should not be H4 or H5. The headings should be H3 in this case.

Background Color and Dark/Light Text (contrast)

  • Several of the components have some variation of the fields "Background Color", "Background Image" and "Text Light"

  • Background Image is an option on many components to add a subtle image to the background of a component. The component content within a page has a max with of 1440px, but the component itself spans full with of the browser window, so the background image will span to cover the background of the component (section) across the full width of the window. Good size for this image would be roughly 1600x600 px. Example

  • Background Color is an option to add a brand color (hopefully subtle) to the background of the component section. This must be a HEX value (i.e. #dee1ef). Example

  • Text Color Light, in most cases, is an option to change the text color from Lifeway Gray (the site default font color: #414042) to white (aside form links). This will be needed when a dark Background Image or Color is applied. Example

  • IMPORTANT: When choosing an background image or color please make sure to check its contrast with the text color chosen to insure that it passes a AA level in order to improve readability for those with vision issues. You can use https://webaim.org/resources/contrastchecker/ to check (the "foreground" would be the text color you have chosen white="#ffffff" or gray="#414042")

Buttons

  • this is a standalone component that may, in most cases, be added or embedded within another component such as the Rich Text Editor, Multicolumn, and Two Column.

  • there are several button color schemes:

    • Yellow

    • Gray-Outlined

    • White

    • White-Outlined

    • Gray (this is actually a light gray)

  • Please, keep in mind the contrast of the background color and the button color you choose.

  • As a standalone component

    • Only one button may be added in a row (it is essentially its own section)

    • Left-aligned by default

Yellow MediumGray OutlinedGray