Add white using the Inline Text component

For the most part AEM styling is beautifully done. Components flow together with the right amount of spacing to create visually pleasing pages that are easily readable. A couple of areas where space can break down and get a little more cramped is around Button and Accordion components (figs. 1 & 2). An easy way to achieve a little more white space between components is to drop an empty Inline Text component where you would like more space. When needed I’ll sometimes add an empty Inline Text component at the bottom of a page if the content is too close the page’s footer.*

Figure 1
Figure 2

Faux Horizontal Rule

The only two tears I’ve shed for Open Text have been for the loss of the blockquote (gray boxes I miss you) and the horizontal rule (sometime you just need a line). LSA’s Opportunity Hub website shows us how to achieve both of these styles by using the Image with Crop component.

The Gist

The basic explanation is if you want a line, you need to create it your preferred image editing program, save it as a JPG or PNG (give it a name that you can easily remember so you can quickly find it using the search feature in AEM), and upload it to your site. Then add it to your page using the Image with Crop component.

Breaking it Down

The Opportunity Hub website goes a step further by creating two images. One image, we’ll call the top line, goes before our text, and the other image, we’ll call the bottom line, goes after our text. When composing the elements on a page they use two Image with Crop components with an Inline Text component sandwiched in between them. Their Inline Text component is a single sentence formatted to Subheading h4. The resulting effect is similar to a pull quote.

So how are these images made? In our examples, each image is 20 pixels tall, but note the position of the actual line in each image. For the top line, the blue line occupies the bottom 10 pixels of the image with 10 pixels of transparent or white space above it. The opposite is true for the bottom line. This empty space can vary in size, but it’s essentially there to create padding around these elements and make the page more visually pleasing. Without it our components would be crushed too closely together.

For the thinner lines used on the Opportunity Hub page, the horizontal line is only a few pixels of the overall 20 pixel image height. But again, they create an upper line image with padding at the top, and a lower line image with padding at the bottom.

Thick Horizontal Rule Top
Example of a Pull Out Quote between the two lines
Thick Horizontal Rule Bottom

Creating your own Faux Horizontal Rule

The pixel dimensions of your images can vary as you see fit. Images are being resized all of the time in AEM based on your layout and what devices are being used view your site, so there’s not a set image dimension you have to use. Just avoid making anything too small as your horizontal line will get fuzzy if AEM has to enlarge it too much. 20px height x 800px width is a good starting place. Use a shape or line tool in your program to create your line and remember to leave white space at the top or bottom. Save it as either a png or jpg and upload it to your AEM WCM. Drop it in your Image with Crop component and test out the spacing. You may need to tweak your image and repeat this process a few times before getting the desired result.

Get crazy?

Instead of horizontal line you could drop an icon or custom shape, like the quote icon shown in the example, onto your 20x800px image. In Photoshop you can use Patterns to create a more abstract horizontal rule or the Define Pattern option to create a custom tiling pattern like the Block M example shown. Maybe a little too cheesy for our department website, but you may come up with something more creative and classy.

Is there an easier way to accomplish this?

If you don’t want to mess with all of this, just drag and drop these faux horizontal line images from the Opportunity Hub’s site onto your desktop and upload them into your assets for use. Just remember that there’s a top and bottom image that you need to copy if you want to pull off the same effect. You could also bring these images into your photo editing software and add a different color line, shape, or pattern over the existing image.

One last note

The last piece of advice is to use these elements sparingly and with purpose. Too much of anything will start to lose it’s effect.

*And now a word from Web Services

Based on feedback from the October Web Editor's meeting, Web Services are working on updating the Department Footer to include some padding above to create more white space at the bottom of web pages. Stay tuned!