Skip to main content

Text Image

Overview#

Text-image component is used to display text and image in different positions.

Image above the text#

Use property position="top" to position the image above the text.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, at, consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus.


<uxf-text-image position="top">    <img slot="image" src="https://source.unsplash.com/random/800x300" />    <p slot="text">        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam.        Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda,        consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus. Lorem ipsum dolor        sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque        illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, consectetur et eum laudantium magni        minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.        Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem.        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, at, consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint        sit suscipit temporibus ullam ut vero voluptatem voluptatibus.    </p></uxf-text-image>

Image bellow the text#

Use property position="bottom" to position the image bellow the text.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, at, consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus.


<uxf-text-image position="bottom" size="6" align-img="end">    <img slot="image" src="https://source.unsplash.com/random/800x300" />    <p slot="text">        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam.        Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda,        consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus. Lorem ipsum dolor        sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque        illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, consectetur et eum laudantium magni        minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.        Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem.        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, at, consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint        sit suscipit temporibus ullam ut vero voluptatem voluptatibus.    </p></uxf-text-image>

Image left from the text#

Use property position="left" to position the image left from the text.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, at, consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus.


<uxf-text-image position="left" size="6">    <img slot="image" src="https://source.unsplash.com/random/800x300" />    <p slot="text">        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam.        Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda,        consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus. Lorem ipsum dolor        sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque        illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, consectetur et eum laudantium magni        minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.        Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem.        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, at, consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint        sit suscipit temporibus ullam ut vero voluptatem voluptatibus.    </p></uxf-text-image>

Image right from the text#

Use property position="right" to position the image right from the text.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, at, consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus.


<uxf-text-image position="right" size="3">    <img slot="image" src="https://source.unsplash.com/random/800x300" />    <p slot="text">        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam.        Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda,        consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus. Lorem ipsum dolor        sit amet, consectetur adipisicing elit. Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque        illum magnam nam quibusdam sed. Dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, consectetur et eum laudantium magni        minus quae quos reprehenderit sequi sint sit suscipit temporibus ullam ut vero voluptatem voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.        Accusamus debitis hic ipsum iure libero minima quibusdam quisquam rerum soluta totam. Asperiores aut consequuntur cumque illum magnam nam quibusdam sed. Dolorem.        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda, at, consectetur et eum laudantium magni minus quae quos reprehenderit sequi sint        sit suscipit temporibus ullam ut vero voluptatem voluptatibus.    </p></uxf-text-image>

Properties#

PropertyAttributeDescriptionTypeDefault
alignImgalign-imgstring"center"
positionpositionstringundefined
sizesizestring"12"