Various Section Types

We already have see several examples of various section types on the home and About page. On this page, we will see more examples of section types and their variations. The first one, the one you are reading now, is a text only section. This section will display the body text in two columns if the screen width is large enough. This provides for a better reading experience. When the screen is narrow, text will display in a single column. The text section has a lead-in, title, sub-title, and prose. The prose is markdown text. All of the text parts are optional. At the bottom of the section, can be multiple CTAs, which may be rendered as buttons or links. All CTAs are optional.

Below we see two examples of a simple slider section. One with a typical slider pagination and a second one with a tabbed interface. The sliders are identical but the control is rendered based on the config property. If config is set to isTabs, the slider will be rendered as a tabbed interface. If config is not set, the slider will be rendered as a typical slider with pagination.

Below we see an example of a testimonial section. The section renders a blockquote with a quotee and an optional cite. The quotee can have a portrait, name, title, company, and logo. The quotee is rendered in a flex container, so the portrait, name, title, company, and logo can be rendered in any order.

And here is an example of group of flip cards. The flip cards are rendered in a flex container, so they can be rendered in any order. The flip cards may have an icon, lead-in, title, and prose. The title and image are optional. The prose is markdown text. A CTA may be aded to the back of the card.