XS - Newsroom (Horizontal Items with Hero) Template | Axero Documentation

The XS - Newsroom (Horizontal Items with Hero) template displays content in a colorful design. The first item spans the width of the template, and subsequent items are displayed in a 3-column layout.

The template is a built-in template and comes with your Axero site. To use the template:

1. Add a Content List Widget on a Page Builder page
2. Edit the widget
3. Select the XS - Newsroom (Horizontal Items with Hero) template in the Template tab

How to Customize the XS - Newsroom (Horizontal Items with Hero) Template

Change the accent color

1. Go to Control Panel > System > CSS Overrides.
2. Add the following code, at the bottom.

   /*Style for XS - Newsroom (Horizontal Items with Hero) template*/
   .xs-newsroom-wide-columns.purple .xs-content ul li:first-child a .tile-content .tile-content-text {
       background-color: #800080;
   }
   
   .xs-newsroom-wide-columns.purple .xs-content ul li a .tile-content .tile-content-text .tile-head .category-eyebrow {
       color: #800080;
   }

3. This code is for a purple accent. You can replace #800080with your desired color. If you change the color, also replace purple with a name that describes your color (e.g., blue ). (Note that there are two instances of both #800080 and purple in the CSS code above.)
4. Click Save CSS Overrides.
5. Click System > Page Builder.
6. Edit the page with the widget.
7. Edit the widget.
8. Click the Advanced tab.
9. In Custom CSS class, enter purple(or the name you created in step 3).
10. Save the widget and page.

Template HTML

Below is the HTML of this template for your reference.

<div class="xs-newsroom-wide-columns {{CustomCSSClass}}">
    <div class="xs-content">
        <ul>
            {{#each Contents}}
            <li>
                <a class="tile" href="{{ContentURL}}">
                    <div class="tile-content">
                        <div class="tile-media" style="background-image:url({{ContentImageURL}});"></div>
                        <div class="tile-content-text">
                            <div class="tile-head">
                                <div class="category-eyebrow">{{{SpaceName}}}</div>
                                <h4>{{{Title}}}</h4>
                                <p>{{{Summary}}}</p>
                            </div>
                            <time class="tile-time">{{DatePublishedString}} by {{AuthorUserDisplayName}}</time>
                        </div>
                    </div>
                </a>
            </li>
            {{/each}}
        </ul>
    </div>
</div>