Text Image Section
Media Section Composed from Text and Image Partials
A versatile section component designed to seamlessly integrate images with textual content, offering a visually engaging and informative user experience.
Key features of this component include:
Image Integration: The core functionality of this component revolves around the inclusion of images. You can effortlessly insert images into your content to illustrate concepts, convey messages, or enhance the visual appeal of your web pages.
Text Area with Markdown: Accompanying the image is a text area that fully supports Markdown formatting. This feature allows you to provide comprehensive explanations, descriptions, or context related to the image or the content surrounding it. Markdown's flexibility enables you to format and style text for maximum clarity and engagement.
Layout Flexibility: By default, the image is positioned on the left side of the text area, creating a visually pleasing flow. However, you have the flexibility to reverse this layout by setting the isReverse
field to true
.
Usage
- container: section
name: text-image
containerFields:
isDisabled: false
isAnimated: false
containerId: ""
containerClass: ""
inContainer: true
isNarrow: false
background:
color: ""
image: ""
isDark: false
isReverse: true
hasCtas: true
text:
prefix: "the prefix"
title: "the title"
header: "h2"
subtitle: "the subtitle"
prose: "Cras mattis consectetur purus sit amet fermentum."
ctas:
- url: "/sandbox/"
label: "Checkout the Sandbox"
isExternal: false
isButton: true
buttonStyle: ""
image:
src: https://source.unsplash.com/random/800x600
alt: ""
caption: "Image by unsplash.com."