Tutorials

How to style teasers

Teasers do not have any predefined elements or classes that must be styled. They contain only plain text and media URLs.

Styling native ads for an existing site can be done in many ways, but there are two main paths: to use as much as possible of the site's existing styles, or to duplicate styling. The former is preferred, since changes to the site's styling will have affect on native ads as well, minimizing extra work. However, depending on how the styling is structured, it may be impossible (or at least very complicated) to use existing styles.

If the website has a clean structure and stable class names, then it should be possible to use existing styles by adding the proper class names to the elements in the HTML template.

If CSS conflicts cannot be resolved, as a last resort you can load the ad in an iframe, which will isolate the ad styling.

Template

<a class="native-teaser native-settings" href="%url%">
    <div class="native-teaser__marking">AD {#ifdef external}&bull; EXTERNAL LINK{/ifdef}</div>
    <div class="native-teaser__content">
        <img class="native-teaser__image" alt="" %srcAttrs%>
        <div class="native-teaser__text">
            <div class="native-teaser__headline">%headline%</div>
            <div>
                <span class="native-teaser__advertiser">%advertiser%</span>%lead%
            </div>
        </div>
    </div>
</a>

Stylesheet

/*
 * Set up some theme variables, shared
 * between teaser and article styling.
 */
.native-settings {
    --spacing: 12px;
    --spacing-half: calc(var(--spacing) / 2);
    --color: #000;
    --accent-color: #ffcd00;
    --gray: #555;
    --background-color: #fff;
    --advertiser-color: #c33;
    --font-family: 'Nunito Sans', sans-serif;
}

.native-teaser {
    display: block;
    background: var(--background-color);
    color: var(--color);
    text-decoration: none;
    border-radius: 2px;
    overflow: hidden;
    font-family: var(--font-family);
    font-size: 16px;
}

.native-teaser__marking {
    background: var(--accent-color);
    width: 100%;
    font-size: 10px;
    font-weight: 600;
    padding-left: var(--spacing-half);
    vertical-align: middle;
    line-height: 24px;
    letter-spacing: 1px;
}

.native-teaser__advertiser {
    margin-right: var(--spacing-half);
    text-transform: uppercase;
    color: var(--advertiser-color);
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.8px;
}

.native-teaser__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.native-teaser__image {
    min-width: 0;
    max-width: 100%;
}

.native-teaser__text {
    padding: var(--spacing);
}

.native-teaser__headline {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 8px;
}

@media (min-width: 576px) {
    .native-teaser__content {
        flex-direction: row;
        padding: var(--spacing);
    }

    .native-teaser__text {
        margin-left: var(--spacing);
        padding: 0;
        flex: 2;
    }

    .native-teaser__image {
        flex: 1;
    }
}

@media (min-width: 768px) {
    .native-teaser__headline {
        font-size: 24px;
    }
}

/*
 * If your site supports dark mode,
 * you should provide styles for that.
 */
@media (prefers-color-scheme: dark) {
    .native-settings {
        --color: #fff;
        --accent-color: #24517a;
        --background-color: #24292e;
        --advertiser-color: #89c0df;
    }
}

Result