XS - Newsroom (2 col with hero) Template | Communifire 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 Communifire 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. (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 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>