AEM started using SFU Groups for access management on Wednesday, December 11.
If you lost access, please reach out to your site owner.
Creating a Gallery Box Button
What is a Gallery Box Button?
The gallery box button is a component style that provides styles to links and makes it appear like navigation buttons. The gallery box style is most effective when using the three columns component. If using the default one column basic page templates, buttons will appear longer in width.
How to build a Gallery Box Button
- Add a Text Component to the page. In the CSS class field enter
galleryBox. - Click the Source Edit button and add the following HTML:
<div> <a class="box" href="#"> <h2>Small button text</h2> <h1>Large button text</h1> </a> </div> - Exit Source Edit mode
- Highlight the "small button text" and "large button text" and click on the hyperlink button. Link the text to an external or internal website.
- Change the "small button text" and "large button text" to a more appropriate button name.
- Select a colour for the button by entering the following CSS class in the CSS class field:
l1
l2
l3
l4
l5
Note that the CSS class is the lowercase letter L (level 1) and not the number 1.
The gallery box should now look and behave like the examples below. These are also the assortment of colours to choose from.
Optional
Authors can add a description directly below the button. To do this, go into the Source Edit mode and insert
<p class="galleryText">Description</p> above </div>. Replace "Description" with the description text. The resulting HTML will look like:
<div>
<a class="box" href="#">
<h2>Small button text</h2>
<h1>Large button text</h1>
</a>
<p class="galleryText">Description</p>
</div>
The text under the gallery box button will look similar to this:
Sample 4
galleryBox l4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum tellus a nulla facilisis tempor.
Sample 5
galleryBox l5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum tellus a nulla facilisis tempor.