Coral Ui 3 Component.

[#1]

Hi @All,

I have one query like, In my component i have one image on right side and text will b on left side. So my requirement is the image and Text  location is not fixed i have to add that image into left side or right side same for text also. How i need to build the components like this can anyone help me here please.  

[imadullakhan]

Hi @imadullakhan , 

This is pretty simple requirement and you can easily achieve this in a single component.

You can follow the below steps. 

1. Create a component which has dropdown to choose image or text. 

2 Based on dropdown selection it's respective place holder can appear, say when you choose image, placeholder to drop an image, alt text box etc and when you choose text a simple text box or richtext. 

3. You can use OOTB column control to divide the layout 5O% (you can choose option available in column control) 

4. Add a custom component created(step 1)inside column control. Considering 50-50 layout. Add it twice. Left and right side. 

5. Choose image on left side of component and text on right side of component or vise versa. You can achieve image-image, image-text, text-image, text-text any of this combination. 

[imadullakhan]

Could you please give me a full description how do i need to use OOTB in component Script i tried this one but didn't worked.

[Vaibhavi]

Hi @imadullakhan ,

Added the OOTB component image below. 

It is just one of the option to divide your page layout to make it 50% 50%

You can choose any of the below option to divide page layout. 

• Column control component
• Responsive grid 
• Use simple css to make it 50-50 %

[imadullakhan]

Okay got it! Thank you soo much in that i need to add particular components right

[imadullakhan]

Thank you soo much @Vaibhavi i followed your first procedure i got the output. Thank you