XS - Newsroom (1 col) Template | Axero Documentation

The XS - Newsroom (1 col) 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 (1 col) template in the Template tab

How to Customize the XS - Newsroom (1 col) 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 (1 col) template*/
   .xs-newsroom.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 (e.g.,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 col-one {{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>