XS - Newsroom Wide Template | Axero Documentation

The XS - Newsroom Wide template displays content and showcases featured images. 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 Wide template in the Template tab

How to Customize the XS - Newsroom Wide 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 Wide template*/
   .xs-newsroom-wide.blue .xs-content ul li a .tile-content .tile-content-text .tile-head .category-eyebrow {
       color: #34a8e1;
   }

3. This code is for a blue accent. You can replace #34a8e1 with your desired color. If you change the color, also replace blue with a name that describes your color. (For example, green )
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 blue (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 {{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}}</time>
                        </div>
                    </div>
                </a>
            </li>
            {{/each}}
        </ul>
    </div>
</div>