Used to display a group of Text, Header and Image. Embed any other shortcodes in the content - those shordcodes are supported as well.

Attributes

Syntax:

attr="value"

Example:

[text_group header="Heading" header_tag="h2"]Cras sit amet nibh libero...[/text_group]

Supported attributes:

Attribute Value Description
image URL Specifies the URL of an image
image_link URL Specifies the URL of the page the image link goes to
image_position left
right		 Specifies the alignment of an image
By default: left
image_width pixels Specifies the width of an image by adding 'width' attribute
image_height pixels Specifies the height of an image by adding 'height' attribute
image_css CSS Specifies an inline CSS style for an image
header text Specifies the text of the TextGroup Header
header_tag <h1>...<h6> Specifies the heading tag used for TextGroup Header
By default: <h4>
header_css CSS Specifies an inline CSS style for the header

Basic Layouts

Text Only

Example
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
[text_group]Cras sit amet nibh libero... [/text_group]

Text with Header

Example

Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
[text_group header="Heading"]Cras sit amet nibh libero...[/text_group]

Text with Header and Image

Example

Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
[text_group header="Heading" image="http://..."]Cras sit amet nibh libero...[/text_group]

Header Options

Specify header_tag to change Header. Supported Values: h1, h2, h3, h4, h5, h6. The h3 is the default value.

Example

Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
[text_group header="Heading" header_tag="h2"]Cras sit amet nibh libero...[/text_group]

Image Options

Image Link

Specify a link to image with the image_link attribute.

[text_group image="http://" image_link="http://"]Cras sit amet nibh libero...[/text_group]

Image Size

Specify the Image's Width and Height with the image_width and image_height attributes.

[text_group image="http://" image_link="http://" image_width="140px" image_height="140px"]Cras sit amet nibh libero...[/text_group]

Alternative Image Positions

Supported Values: left, right, top, middle, bottom. The left is default.

Left and Right

Example

Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

[text_group header="Heading" image="http://..." image_position="left"]Cras sit amet nibh libero...[/text_group]

[text_group header="Heading" image="http://..." image_position="right"]Cras sit amet nibh libero...[/text_group]

Top, Middle and Bottom

Example

Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

[text_group header="Heading" image="http://..." image_position="top"]Cras sit amet nibh libero...[/text_group]

[text_group header="Heading" image="http://..." image_position="middle"]Cras sit amet nibh libero...[/text_group]

[text_group header="Heading" image="http://..." image_position="bottom"]Cras sit amet nibh libero...[/text_group]

See Also

Shortcodes Overview

Used to display a group of Text, Header and Image. Embed any other shortcodes in the content - those shordcodes are supported as well. ## Attributes #### Syntax: `attr="value"` #### Example: `[text_group header="Heading" header_tag="h2"]Cras sit amet nibh libero...[/text_group]` #### Supported attributes: <table class="table"> <thead> <th>Attribute</th> <th>Value</th> <th>Description</th> </thead> <tbody> <tr> <td><tt>image</tt></td> <td><i>URL</i></td> <td>Specifies the URL of an image</td> </tr> <tr> <td><tt>image_link</tt></td> <td><i>URL</i></td> <td>Specifies the URL of the page the image link goes to</td> </tr> <tr> <td><tt>image_position</tt></td> <td>left<br>right</td> <td>Specifies the alignment of an image<br><i>By default: left</i></td> </tr> <tr> <td><tt>image_width</tt></td> <td><i>pixels</i></td> <td>Specifies the width of an image by adding 'width' attribute</td> </tr> <tr> <td><tt>image_height</tt></td> <td><i>pixels</i></td> <td>Specifies the height of an image by adding 'height' attribute</td> </tr> <tr> <td><tt>image_css</tt></td> <td><i>CSS</i></td> <td>Specifies an inline CSS style for an image</td> </tr> <tr> <td><tt>header</tt></td> <td><i>text</i></td> <td>Specifies the text of the TextGroup Header</td> </tr> <tr> <td><tt>header_tag</tt></td> <td>&lt;h1&gt;...&lt;h6&gt;</td> <td>Specifies the heading tag used for TextGroup Header<br><i>By default: &lt;h4&gt;</i></td> </tr> <tr> <td><tt>header_css</tt></td> <td><i>CSS</i></td> <td>Specifies an inline CSS style for the header</td> </tr> </tbody> </table> ## Basic Layouts ### Text Only <div class="panel panel-default"> <div class="panel-heading">Example</div> <div class="panel-body"> <div class="media"> <div class="media-body"> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </div> </div> <div class="panel-footer"> [text_group]Cras sit amet nibh libero... [/text_group] </div> </div> ###Text with Header <div class="panel panel-default"> <div class="panel-heading">Example</div> <div class="panel-body"> <div class="media"> <div class="media-body"> <h2 class="media-heading">Heading</h2> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </div> </div> <div class="panel-footer"> [text_group header="Heading"]Cras sit amet nibh libero...[/text_group] </div> </div> ###Text with Header and Image <div class="panel panel-default"> <div class="panel-heading">Example</div> <div class="panel-body"> <div class="media"> <a class="pull-left" href="#"><img class="bd-imagestyles media-object img-responsive" style="width: 140px; height: 140px" src="http://attachments.answers.billiondigital.com/31/1031/defaultImage.jpg"></a> <div class="media-body"> <h3 class="media-heading">Heading</h3> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </div> </div> <div class="panel-footer"> [text_group header="Heading" image="http://..."]Cras sit amet nibh libero...[/text_group] </div> </div> ##Header Options Specify `header_tag` to change Header. Supported Values: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`. The h3 is the default value. <div class="panel panel-default"> <div class="panel-heading">Example</div> <div class="panel-body"> <div class="media"> <div class="media-body"> <h2 class="media-heading">Heading</h2> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </div> </div> <div class="panel-footer"> [text_group header="Heading" header_tag="h2"]Cras sit amet nibh libero...[/text_group] </div> </div> ##Image Options ###Image Link Specify a link to image with the `image_link` attribute. [text_group image="http://" image_link="http://"]Cras sit amet nibh libero...[/text_group] ###Image Size Specify the Image's Width and Height with the `image_width` and `image_height` attributes. [text_group image="http://" image_link="http://" image_width="140px" image_height="140px"]Cras sit amet nibh libero...[/text_group] ##Alternative Image Positions Supported Values: `left`, `right`, `top`, `middle`, `bottom`. The `left` is default. ###Left and Right <div class="panel panel-default"> <div class="panel-heading">Example</div> <div class="panel-body"> <div class="row"> <div class="col-sm-6"> <div class="media"> <a class="pull-left" href="#"><img class="bd-imagestyles media-object img-responsive" style="width: 140px; height: 140px" src="http://attachments.answers.billiondigital.com/31/1031/defaultImage.jpg"></a> <div class="media-body"> <h3 class="media-heading">Heading</h3> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> </div> </div> </div> <div class="col-sm-6"> <div class="media"> <a class="pull-right" href="#"><img class="bd-imagestyles media-object img-responsive" style="width: 140px; height: 140px" src="http://attachments.answers.billiondigital.com/31/1031/defaultImage.jpg"></a> <div class="media-body"> <h3 class="media-heading">Heading</h3> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> </div> </div> </div> </div> </div> <div class="panel-footer"> <p>[text_group header="Heading" image="http://..." image_position="left"]Cras sit amet nibh libero...[/text_group]</p> <p>[text_group header="Heading" image="http://..." image_position="right"]Cras sit amet nibh libero...[/text_group]</p> </div> </div> ### Top, Middle and Bottom <div class="panel panel-default"> <div class="panel-heading">Example</div> <div class="panel-body"> <div class="row"> <div class="col-sm-4"> <div class="media"> <div class="media-body"> <a href="#"><img class="bd-imagestyles media-object img-responsive" style="width: 140px; height: 140px" src="http://attachments.answers.billiondigital.com/31/1031/defaultImage.jpg"></a> <h3 class="media-heading">Heading</h3> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> </div> </div> </div> <div class="col-sm-4"> <div class="media"> <div class="media-body"> <h3 class="media-heading">Heading</h3> <a href="#"><img class="bd-imagestyles media-object img-responsive" style="width: 140px; height: 140px" src="http://attachments.answers.billiondigital.com/31/1031/defaultImage.jpg"></a> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> </div> </div> </div> <div class="col-sm-4"> <div class="media"> <div class="media-body"> <h3 class="media-heading">Heading</h3> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> <a href="#"><img class="bd-imagestyles media-object img-responsive" style="width: 140px; height: 140px" src="http://attachments.answers.billiondigital.com/31/1031/defaultImage.jpg"></a> </div> </div> </div> </div> </div> <div class="panel-footer"> <p>[text_group header="Heading" image="http://..." image_position="top"]Cras sit amet nibh libero...[/text_group]</p> <p>[text_group header="Heading" image="http://..." image_position="middle"]Cras sit amet nibh libero...[/text_group]</p> <p>[text_group header="Heading" image="http://..." image_position="bottom"]Cras sit amet nibh libero...[/text_group]</p> </div> </div> ### See Also [Shortcodes Overview](page:3621)