[ARCHIVED] Image-Text Combo code

cfelton1
Community Novice

I found in the style guide (which I understand may not work in the content editor as advertised) code for Image-Text combo.  I tried it in the text editor, and it indeed did not work. 

Here is how it rendered:

245638_vignette_rendered.PNG

Here is my code:

<p>In this module we will use two vignettes to show how the information can be put into practice in a preschool classroom.</p>
<div class="grid-row">
<div class="col-xs-12 col-lg-6">
<div class="ic-image-text-combo">
<div class="ic-avatar"><img src="https://uabonline.instructure.com/courses/585/files/164022/download?wrap=1" alt="CorporateHeadshots-01.jpg" data-api-endpoint="https://uabonline.instructure.com/api/v1/courses/585/files/164022" data-api-returntype="File" /></div>
<div class="ic-image-text-combo__text">Vignette 1:  A preschool classroom where the teacher, Miss Martin speaks only English. Two of the children, Luis and Ana, speak Spanish and one of the children, Jun, speaks only Korean.</div>
<div class="ic-image-text-combo__text"></div>
</div>
</div>
<br />
<div class="grid-row">
<div class="col-xs-12 col-lg-6">
<div class="ic-image-text-combo">
<div class="ic-avatar"><img src="https://uabonline.instructure.com/courses/585/files/164023/download?wrap=1" alt="CorporateHeadshots-20.jpg" data-api-endpoint="https://uabonline.instructure.com/api/v1/courses/585/files/164023" data-api-returntype="File" /></div>
<div class="ic-image-text-combo__text">Vignette 2: A preschool classroom where the teacher, Miss Maria, speaks both English and Spanish. About half of the students are Spanish speakers and half are monolingual English speakers.</div>
</div>
</div>
</div>
</div>

Can someone help me correct the code so that:

1. The text fills the entire line.

2. The image shows up as an icon.

3. There is a break between the two sections.

Labels (2)