Content Components

This guide explains how to style embedded content components that can appear inside articles. Add the CSS in your frontend and also in the editor preview so authors see accurate styling while editing.

Where to add the CSS

Add the CSS to your site or app stylesheet used on article pages.
In News Suite, go to Administration -> Publisher Configuration -> Editor CSS and paste the same CSS.

You can adjust the colors, spacing, and typography to match your brand.

Components

Embedded content from the CMS

This component renders a linked card that embeds another article or content item from the CMS.

HTML template (prefilled by the CMS)

<div class="inline-embedded-article">
  <a href="https://example.com/story">
    <div class="article-info">
      <div class="inline-embedded-article-title">Embedded article title</div>
      <div class="inline-embedded-article-teaser">Short teaser text for the embedded item.</div>
      <div class="inline-embedded-article-date">February 10, 2026</div>
    </div>
    <figure>
      <img loading="lazy" src="https://example.com/image.jpg" alt="" />
    </figure>
  </a>
</div>

If the embedded article is premium, the CMS will add the inline-article-premium class to the root element.

CSS

.inline-embedded-article {
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 14px;
  background: #fff;
  max-width: 720px;
}

/* Make whole card clickable */
.inline-embedded-article > a {
  display: flex;
  gap: 16px;
  text-decoration: none !important;
  color: inherit !important;
  align-items: center;
}

/* Image block */
.inline-embedded-article figure {
  margin: 0;
  flex: 0 0 140px;
  height: 100px;
  overflow: hidden;
  border-radius: 4px;
}

.inline-embedded-article figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text column */
.article-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

/* Title */
.inline-embedded-article-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: #1a1a1a;
}

/* Teaser */
.inline-embedded-article-teaser {
  font-size: 14px;
  line-height: 1.4;
  color: #555;
}

/* Date */
.inline-embedded-article-date {
  font-size: 12px;
  color: #888;
}

/* Hover effect */
.inline-embedded-article:hover {
  border-color: #d0d0d0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Premium modifier */
.inline-article-premium {
  border-left: 4px solid #c9a227;
  padding-left: 10px;
}

/* Responsive */
@media (max-width: 520px) {
  .inline-embedded-article > a {
    flex-direction: column;
    align-items: stretch;
  }

  .inline-embedded-article figure {
    width: 100%;
    height: 180px;
    flex: none;
  }
}

Embedded external URL

This component renders a small callout card for an external link. The CMS can optionally apply a float class to align it left or right inside the article.

HTML template (prefilled by the CMS)

<div class="embed custom-link-embed float-left">
  <div class="custom-link-embed-title">Sponsored</div>
  <div class="custom-link-embed-text">Read the full report</div>
  <a href="https://example.com" target="_blank" class="custom-link-embed-button">Open</a>
</div>

Use float-left or float-right to control alignment. If you do not want floating behavior, omit the float class.

CSS

.custom-link-embed {
  padding: 10px;
  border: 1px solid black;
  border-radius: 4px;
  margin: 10px 0;
  text-align: center;
  width: 350px;
}

.custom-link-embed.float-left {
  float: left;
  text-align: left;
  border-left: 0;
  border-top: 0;
  margin-right: 10px;
}

.custom-link-embed.float-right {
  float: right;
  text-align: right;
  border-top: 0;
  border-right: 0;
  margin-left: 10px;
}

.custom-link-embed-title {
  font-size: 14px;
  text-transform: uppercase;
  margin: 10px 5px;
}

.custom-link-embed-text {
  font-size: 20px;
  margin: 10px 5px;
}

.custom-link-embed-button {
  text-transform: uppercase;
  margin: 10px 5px;
}

Audio embed

This component renders an inline HTML audio player inside article content.

HTML template (prefilled by the CMS)

<audio controls class="inline-audio">
  <source src="https://example.com/audio.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

CSS

.inline-audio {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 14px 0;
}

Inline image

This component renders an image with optional caption and optional link wrapper. It can also be floated left or right by inline style attributes added by the CMS.

HTML template (prefilled by the CMS)

<figure style="float: right; margin: 5px; width: 45%;">
  <a href="https://example.com" target="_blank">
    <img
      src="https://example.com/image.jpg"
      alt="Image description"
      title="Image title"
      srcset="https://example.com/image-320.jpg 320w, https://example.com/image-640.jpg 640w"
      style="object-position: 50% 50%; width: 100%;"
    />
  </a>
  <figcaption>Image title</figcaption>
</figure>

If no float or width is provided by the CMS, render it as a regular block-level image.

CSS

figure {
  margin: 14px 0;
}

figure img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

figure figcaption {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: #666;
}

Photo gallery

This component renders a responsive grid of images with optional captions.

HTML template (prefilled by the CMS)

<div class="gallery">
  <figure class="gallery-item">
    <img
      src="https://example.com/photo-1.jpg"
      srcset="https://example.com/photo-1-320.jpg 320w, https://example.com/photo-1-640.jpg 640w"
      sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
      alt="Photo description"
    />
    <figcaption>Photo caption</figcaption>
  </figure>

  <figure class="gallery-item">
    <img
      src="https://example.com/photo-2.jpg"
      srcset="https://example.com/photo-2-320.jpg 320w, https://example.com/photo-2-640.jpg 640w"
      sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
      alt="Another photo description"
    />
    <figcaption>Another caption</figcaption>
  </figure>
</div>

CSS

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.gallery-item {
  margin: 0;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}

.gallery-item figcaption {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: #666;
}

@media (max-width: 900px) {
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

Live blog

This component renders a stream of timestamped updates with author details, optional image, and optional urgent state.

Implementing Live Blogs

HTML template (prefilled by the CMS)

<div data-context="production" class="liveBlog" data-time="1739952000" data-blogid="12345">
  <div class="messages">
    <div class="message" data-timestamp="2026-02-19T12:15:00Z" rel="msg-1">
      <div class="message-header">
        <div class="time-details">
          <span class="time">12:15</span>
        </div>
        <ul class="social-share"></ul>
        <div class="message-author">Editor Name</div>
      </div>
      <div class="message-container">
        <h3>Update title</h3>
        <img src="https://example.com/live-update.jpg" alt="Update title" />
        <p class="image_caption">Image caption text</p>
        <p>Live update body text appears here.</p>
      </div>
    </div>

    <div class="message urgent" data-timestamp="2026-02-19T12:30:00Z" rel="msg-2">
      <div class="message-header">
        <div class="time-details">
          <span class="time">12:30</span>
        </div>
        <ul class="social-share"></ul>
        <div class="message-author">Reporter Name</div>
      </div>
      <div class="message-container">
        <p>Urgent live update text.</p>
      </div>
    </div>
  </div>
</div>

CSS

.liveBlog {
  margin: 18px 0;
}

.liveBlog .messages {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.liveBlog .message {
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  padding: 12px;
  background: #fff;
}

.liveBlog .message.urgent {
  border-left: 4px solid #c62828;
  padding-left: 10px;
}

.liveBlog .message-header {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.liveBlog .time {
  font-weight: 700;
  font-size: 13px;
}

.liveBlog .message-author {
  font-size: 13px;
  color: #666;
}

.liveBlog .message-container h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.3;
}

.liveBlog .message-container img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 0 8px;
}

.liveBlog .image_caption {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #666;
}

.liveBlog .message-container p {
  margin: 0;
  line-height: 1.5;
}

Poll

This component renders an inline poll with selectable choices.

HTML template (prefilled by the CMS)

<div class="poll" data-poll-id="42">
  <header class="poll__header">
    <h3 class="poll__question">Which topic should we cover next?</h3>
  </header>

  <form class="poll__form" action="/api/poll/42" method="post">
    <div class="poll__choices">
      <div class="poll__choice" data-choice="1" data-percentage="0">
        <button type="button" class="poll__choice-button" aria-label="Vote for Option A">
          <span class="poll__choice-text">Option A</span>
        </button>
      </div>
    </div>
  </form>
</div>

Use poll__choice--results when showing percentages and bars. Use poll__choice--selected to highlight the selected choice.

CSS

.poll {
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  padding: 14px;
  margin: 16px 0;
  background: #fff;
}

.poll__question {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.3;
}

.poll__choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.poll__choice {
  position: relative;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.poll__choice-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.poll__choice-button:disabled {
  cursor: default;
}

.poll__choice--selected {
  border-color: #1f6feb;
}

.poll__choice-text {
  position: relative;
  z-index: 1;
}

Final reminder

Make sure this CSS is added in your frontend and also under Administration -> Publisher Configuration -> Editor CSS so the editor preview matches the live site. Adjust the styles to match your visual design.