XS - Newsroom (2 col with hero) Template | Axero Documentation

The XS - Newsroom (2 col with hero) template displays content and showcases featured images. The first item spans the width of the template and subsequent items are displayed in a 2 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 (2 col with hero) template in the Template tab

How to Customize the XS - Newsroom (2 col 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 (2 col with hero) 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 with-hero {{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>