Skip to main content

Raven Design System

Text-Image Block

The Text-Image block allows you to display text to the right or the left of an image with an appropriate amount of whitespace padding around the image.

Image to the Right

It is important to note the text is not intended to wrap around the image. In general, the amount of text used should be the same height as the image on large screens. This will, of course, differ if you use a large or small block size.

<div class="u-block u-block--white">
    <div class="b-textimg">
        <div class="textimg__wrapper">
            <section>
                <h2>Image to the Right</h2>
                <img src="https://via.placeholder.com/640x480" alt="" />
                <div class="textimg__text">
                    <p>It is important to note the text is not intended to wrap around the image. In general, the amount of text used should be the same height as the image on large screens. This will, of course, differ if you use a large or small block size.</p>
                </div>
             </section>
        </div>
    </div>
</div>

Image to the Left

The b-textimg--imgtext modifier is used to move the image to the left. This modifier looks a bit odd at first. But, if the default is text on the left, image on the right - textimg. Then the reverse is -imgtex...image first, then text.

<div class="u-block u-block--white">
    <div class="b-textimg b-textimg--imgtext">
        <div class="textimg__wrapper">
            <section>
                <h2>Image to the Left</h2>
                <img src="https://via.placeholder.com/640x480" alt="" />
                <div class="textimg__text">
                    <p>The <code>b-textimg--imgtext</code> modifier is used to move the image to the left.  This modifier looks a bit odd at first. But, if the default is text on the left, image on the right - textimg. Then the reverse is -imgtex...image first, then text.</p>
                </div>
             </section>
        </div>
    </div>
</div>

HTML order remains the same

Resize your browser window to a small screen and you will notice in the examples above that order of the HTML, h2 then img then text remains the same, whether the image is on the right or the left.

Block details

Text-Image block meta values
handle textimg
width type fixed
colour options u-block--white, u-block--grey
section use <main>
has heading true
theme(s) CU
variants Left image
Codepen https://codepen.io/cuweb/pen/pozdQzK

Properties

Props Description Type Default
blockSize* block width, options: s, l string s
blockColor* block color, options: white, grey string white
heading* <h2> or <h3> heading string -
img* URL of 640x480 image string -
text* ** Text content in one or more <p> tags HTML -

* = required.
** = HTML tags available include: <p>,<a>,<strong>, <b>, <code>, <h4>

Supports grey background row

It is important to note the text is not intended to wrap around the image. In general, the amount of text used should be the same height as the image on large screens. This will, of course, differ if you use a large or small block size.

<div class="u-block u-block--grey">
    <div class="b-textimg">
        <div class="textimg__wrapper">
            <section>
                <h2>Supports grey background row</h2>
                <img src="https://via.placeholder.com/640x480" alt="" />
                <div class="textimg__text">
                    <p>It is important to note the text is not intended to wrap around the image. In general, the amount of text used should be the same height as the image on large screens. This will, of course, differ if you use a large or small block size.</p>
                </div>
             </section>
        </div>
    </div>
</div>

Supports default block headings

In addition, it supports subheadings.

Heading requirements

At least one heading is required when using the Text-Image block, Note: in this example, how porper heading usage is used with the second heading now uses and H3. Make sure to follow proper heading rank rules in all of your blocks.

<section class="u-block u-block--grey">
    <h2 class="c-heading-">Supports default block headings</h2>
    <p>In addition, it supports subheadings.</p>
    <div class="b-textimg b-textimg--imgtext">
        <div class="textimg__wrapper">
            <section>
                <h3>Heading requirements</h3>
                <img src="https://via.placeholder.com/640x480" alt="" />
                <div class="textimg__text">
                    <p>At least one heading is required when using the Text-Image block, <b>Note</b>: in this example, how porper heading usage is used with the second heading now uses and H3. Make sure to follow proper heading rank rules in all of your blocks.</p>
                </div>
             </section>
        </div>
    </div>
</section>

Supports centered block headings

In addition, it supports subheadings.

At least one heading is required when using the Text-Image block. But if a block heading is used, you do not need to add a heading within the block...as per this example.

Multiple paragraphs can be used in the text are of this block.

<section class="u-block u-block--grey">
    <h2 class="c-heading- c-heading--center">Supports centered block headings</h2>
    <p>In addition, it supports subheadings.</p>
    <div class="b-textimg b-textimg--imgtext">
        <div class="textimg__wrapper">
            <div>
                 <img src="https://via.placeholder.com/640x480" alt="" />
                <div class="textimg__text">
                    <p>At least one heading is required when using the Text-Image block. But if a block heading is used, you do not need to add a heading within the block...as per this example.</p><p>Multiple paragraphs can be used in the text are of this block.</p>
                </div>
             </div>
        </div>
    </div>
</section>

Supports the large width block setting

It is important to note the text is not intended to wrap around the image. In general, the amount of text used should be the same height as the image on large screens. This will, of course, differ if you use a large or small block size.

Important do not mix and match large and small blocks on one page. Please keep them uniform.

<div class="u-block u-block--white">
    <div class="b-textimg">
        <div class="textimg__wrapper">
            <section>
                <h2>Supports the large width block setting</h2>
                <img src="https://via.placeholder.com/640x480" alt="" />
                <div class="textimg__text">
                    <p>It is important to note the text is not intended to wrap around the image. In general, the amount of text used should be the same height as the image on large screens. This will, of course, differ if you use a large or small block size.</p>
<p>Important do not mix and match large and small blocks on one page. Please keep them uniform.</p>
                </div>
             </section>
        </div>
    </div>
</div>

Grouping blocks

While all blocks are separate, a pattern for this block is to use the same background colour and group several blocks that share related content. These should be grouped by setting a Block Heading on the first block and wrapping all of them in another <section> tag.

Supports centered block headings

In addition, it supports subheadings.

At least one heading is required when using the Text-Image block. But if a block heading is used, you do not need to add a heading within the block...as per this example.

Multiple paragraphs can be used in the text are of this block.

Example header

It is important to note the text is not intended to wrap around the image. In general, the amount of text used should be the same height as the image on large screens. This will, of course, differ if you use a large or small block size.

Example header

It is important to note the text is not intended to wrap around the image. In general, the amount of text used should be the same height as the image on large screens. This will, of course, differ if you use a large or small block size.

<section class="u-block u-block--grey">
    <h2 class="c-heading- c-heading--center">Supports centered block headings</h2>
    <p>In addition, it supports subheadings.</p>
    <div class="b-textimg">
        <div class="textimg__wrapper">
            <div>
                <img src="https://via.placeholder.com/640x480" alt="">
                <div class="textimg__text">
                    <p>At least one heading is required when using the Text-Image block. But if a block heading is used, you do not need to add a heading within the block...as per this example.</p><p>Multiple paragraphs can be used in the text are of this block.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="u-block u-block--grey">
    <div class="b-textimg">
        <div class="textimg__wrapper">
            <section>
                <h2>Example header</h2>
                <img src="https://via.placeholder.com/640x480" alt="" />
                <div class="textimg__text">
                    <p>It is important to note the text is not intended to wrap around the image. In general, the amount of text used should be the same height as the image on large screens. This will, of course, differ if you use a large or small block size.</p>
                </div>
            </section>
        </div>
    </div>
</div>
<div class="u-block u-block--grey">
    <div class="b-textimg">
        <div class="textimg__wrapper">
            <section>
                <h2>Example header</h2>
                <img src="https://via.placeholder.com/640x480" alt="" />
                <div class="textimg__text">
                    <p>It is important to note the text is not intended to wrap around the image. In general, the amount of text used should be the same height as the image on large screens. This will, of course, differ if you use a large or small block size.</p>
                </div>
            </section>
        </div>
    </div>
</div>

Dude, where's my left-side nav?

To show full width elements on this page, we removed the <--