Always a stickler for UI patterns and consistency, I’ve found another pattern that seems to be repeating a lot…

An object that has a title, a description and optionally a Thumbnail Image and (optionally again) a HighRes image.

Instead of leaving it up to us developers to come up with the HTML to display this I’ve encapsulated this standard in a control. It uses the InfoControl I blogged about recently to display the HighRes image (if set) so, you’ve got a nice clean UI, and more importantly a consistant pattern that’s easily altered via CSS.

Here’s the Object Diagram.

Note that (like all the controls I’m writing now) this is a skinnable control, so the only properties you really should need to set are HeaderText, DescriptionText, ImageToolTip and the 2 ImageUrl properties. Unless there's a reason to change the Header or Description tags (maybe you're nested and need something deeper than h2), you shouldn't need to set them.

  Here's a pic of it in action (well wrapped in a PanelTemplateControl) (note that I'm not showing the hover, because I couldn't get the SS to work right).

If you’re interested (you really shouldn’t be) about what HTML this generates…. (this is by default)
<div class=”titleDescriptionControl”>
                <div class=”moreInfoControl”>
                    <image src=’[ImageUrl]’ altText=’[ImageToolTip]’ title=’[ImageToolTip]’ />
                    <div>
                        <img src=’[HighResImageUrl]’ altText=’[ImageToolTip]’ title=’[ImageToolTip]’ />
                   </div>
                </div>
              <h2>[HeaderText]</h2>
<p>[DescriptionText]</p></div>