Tutorials

How to style articles

Unlike teasers, articles require styling of some predefined elements. For example, when an advertiser includes a figure with a caption, these must be styled to look good on each site the ad is published. Here is a table of elements that are used out of the box of ADK

Selector	Description	Recommendation
figure	An image with caption	No margins
figcaption	The caption of a figure	Smaller font, gray color
h2	Section heading	Larger font, bold
h6	Smallprint, e.g., disclaimers.	Smaller font, gray color, italic
iframe	Embedded content	Iframes can be tricky since they are not naturally responsive. See example below.
ol	Ordered list	Restore bullet kind if removed by existing styling.
ul	Unordered list	Restore bullet kind if removed by existing styling.
.adk-native-body	This is the wrapper element the replaces the `%body%` template parameter.	No specific styling, but this can be used to style all the children of the body element.
.adk-box	Highlighted content, commonly used for fact boxes	Padded, accentuated background color

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-article {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--color);
}

/* Reset all margin */
.native-article * {
    margin: 0;
}

.native-article__marking {
    background: var(--accent-color);
    width: 100%;
    font-size: 0.625em;
    font-weight: bold;
    vertical-align: middle;
    line-height: 30px;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
}

.native-article__image {
    margin-bottom: var(--spacing);
}

.native-article__image img {
    display: block;
    max-width: 100%;
}

.native-article__image figcaption {
    font-size: 0.875em;
    color: var(--gray);
}

.native-article__advertiser {
    text-transform: uppercase;
    color: var(--advertiser-color);
    font-size: 0.875em;
    font-weight: bold;
    letter-spacing: 0.8px;
}

.native-article__headline {
    font-size: 1.6em;
    font-weight: bold;
    margin-bottom: var(--spacing);
}

.native-article__lead {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: var(--spacing);
}

.native-article__lead>p:not(:last-child) {
    margin-bottom: var(--spacing);
}

.adk-native-body p,
.adk-native-body ol,
.adk-native-body ul,
.adk-native-body img,
.adk-native-body figure,
.adk-native-body table,
.adk-native-body iframe,
.adk-native-body .adk-box {
    max-width: 100%;
    overflow: hidden;
}

.adk-native-body p:not(:last-child),
.adk-native-body ol:not(:last-child),
.adk-native-body ul:not(:last-child),
.adk-native-body img:not(:last-child),
.adk-native-body figure:not(:last-child),
.adk-native-body table:not(:last-child),
.adk-native-body iframe:not(:last-child),
.adk-native-body .adk-box:not(:last-child) {
    margin: 0 0 var(--spacing) 0;
}

/* The wrapping figure already has margin */
.adk-native-body figure>img {
    margin: 0 !important;
}

.adk-native-body img {
    margin: 0;
}

.adk-native-body a {
    color: #1581e4;
    text-decoration: none;
}

.adk-native-body h2 {
    font-size: 1.25em;
    font-weight: bold;
    margin-bottom: var(--spacing-half);
}

.adk-native-body h6 {
    font-size: 0.75em;
    line-height: 1.5;
    font-weight: normal;
    font-style: italic;
    color: var(--gray);
}

.adk-native-body img {
    display: block;
    max-width: 100%;
    height: auto;
}

.adk-native-body figcaption {
    font-size: 0.75em;
    line-height: 1.5;
    color: var(--gray);
    margin-top: var(--spacing-half);
}

.adk-native-body iframe {
    border: none;
    display: block;
}

.adk-native-body iframe[src^="https://www.youtube.com"] {
    height: auto;
    aspect-ratio: 16 / 9;
}

/* Styling is commonly removed for list elements. These rules can be used to reset them. */
.adk-native-body li {
    list-style-type: inherit;
    list-style-position: initial;
}

.adk-native-body ol {
    list-style-type: decimal;
}

.adk-native-body ul {
    list-style-type: disc;
}

/* Style the builtin adk-box */
.adk-box {
    padding: var(--spacing);
    background: #ddd;
}

@media (min-width: 576px) {
    .native-article__headline {
        font-size: 1.8em;
    }
}

@media (min-width: 768px) {
    .native-article__headline {
        font-size: 2em;
    }
}

/*
 * 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;
    }

    .adk-box {
        background: #24292e;
    }
}

Result