* My demo might look slightly different in Joomla's frontend, this is due to WYSIWYG styling I cannot get rid off.

As you can see here i have built up a basic module layout to show you what it would look like. The main things to consider are that i have applied the .frame-1a class to the module suffix and a manually created incontainer div (in the module) to hold the content. The inner content has a fixed size as a block element witht he margins set to auto so it centres.

Because the inner content is a fixed size you can now have varying amounts of content and the modules will alwyas be the same size. you could created a class with the modules settings in and apply them by the template but it is far easier tocontrol them from within the WYSIWYG as layput is king.

Obviously if your content is deeper that the box can hold you can just make the boxes deeper, but make sure that you apply the changs to all of the boxes and not just the one.

In the code I have only showed the inner content code to keep things easy to understand as this is all you need to create a matching module, and the class code.

I have included the class code here that I have used but you can use an Image Frame style to replace the class,. You could evene try a mix and match approach to see what unique styles you can make. I have a KB article on Image Frames to have a look at.

The Process to get this feature

Create the class

.frame-1a {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: transparent -moz-linear-gradient(center top , #fafafa, #dddddd) repeat scroll 0 0;
    border-color: #c9cbcd;
    border-image: none;
    border-radius: 0;
    border-style: solid;
    border-width: 1px 1px 2px;
    box-shadow: 0 8px 6px -6px black;
    display: inline-block;
    outline: medium none;
    padding: 4px;
    transition: all 300ms ease-out 0s;
}

• Add this class to your template.css or a suitable CSS file.

Create the module

This what the inner content should look like.

1. Goto the Joomla backend and create a new 'Custom HTML' module
2. add .frame-1a module class suffix
3. Insert the following content

   <div style="height: 360px; width: 300px;" class="frame-1a">
   	<p style="text-align: center;">Put your own content here !!!<p>
   	<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
   		<li>And list items here !!!</li>
   	</ul>
   </div>

   Or with the code in the element

   <div style="height: 360px; width: 300px; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: transparent -moz-linear-gradient(center top , #fafafa, #dddddd) repeat scroll 0 0; border-color: #c9cbcd; border-radius: 0; border-style: solid; border-width: 1px 1px 2px; box-shadow: 0 8px 6px -6px black; outline: medium none; padding: 4px; transition: all 300ms ease-out 0s;">
   	<p style="text-align: center;">Put your own content here !!!<p>
   	<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
   		<li>And list items here !!!</li>
   	</ul>
   </div>

   NB:
   • Either use the .frame-1a class as above, or you paste all of the classe's code into the inner content <div style="">. Obviously you need to remove the .frame-1a class declaration if you choose this method (or copy and paste the relevant bit if code).
   • If you use the class method you might not see the styling in the WYSIWYG
4. Save and publish your new module where you want.

What now?

Alter the box size to your own preferences if required and why not try some different styles.