In most cases, your StoryChief articles will automatically match the design of your website.

When you publish an article, StoryChief sends structured HTML to your website. Your website’s theme then controls the fonts, colors, spacing, headings, links, and other visual styles.

In short: StoryChief provides the content and structure. Your website controls the final appearance.

Some advanced elements—such as media alignment, full-width images, galleries, callouts, tables, and accordions—may require additional styling in your website’s CSS.

Preview your article before publishing

The most reliable way to check an article’s appearance is to publish it as a draft and preview it on your website.

See How to preview an article before publishing for instructions.

If a draft does not match your website’s design, your website developer can adjust the theme’s CSS using the elements and classes below.

How StoryChief content is published

The article body is converted to semantic HTML. Information such as the title, cover image, author, excerpt, categories, tags, and SEO settings is sent separately, allowing your CMS or website template to place it in the appropriate location.

The examples below are simplified. The published HTML may also contain responsive image sources, dimensions, inline styles, provider-specific embed code, and internal block identifiers.

Text formatting

StoryChief supports the following inline formatting:

Formatting	HTML output
Bold	`<strong>Bold text</strong>`
Italic	`<em>Italic text</em>`
Underline	`<u>Underlined text</u>`
Strikethrough	`<s>Strikethrough text</s>`
Small text	`<small>Small text</small>`
Inline code	`<code>Inline code</code>`

Your website’s CSS determines how each element looks.

Links

StoryChief supports four types of links:

External: Links to another webpage
Section: Jumps to a heading within the article
Email: Opens the visitor’s email application
Phone: Starts a phone call on supported devices

Links can also be configured to open in a new tab or include a nofollow relationship.

<a href="https://www.storychief.io">External link</a>  
<a href="#section-id">Section link</a>  
<a href="mailto:hello@example.com">Email us</a>  
<a href="tel:+3212345678">Call us</a>

A link that opens in a new tab:

<a href="https://www.storychief.io" target="_blank" rel="noopener noreferrer">External link</a>

A nofollow link:

<a href="https://www.storychief.io" rel="nofollow">External link</a>

Section links can be used to build a manual table of contents. See Add a table of contents to your article.

Text and structure blocks

Paragraphs

<p>Paragraph text</p>

Headings

The article editor supports headings from level 2 through level 4:

<h2 id="section-id">Heading 2</h2> 
<h3 id="section-id">Heading 3</h3> 
<h4 id="section-id">Heading 4</h4>

The article title is normally displayed as the page’s level-one heading by your website template.

Blockquotes

<blockquote>A highlighted quotation</blockquote>

Ordered and unordered lists

<ul>
   <li>First item</li>
   <li>Second item
     <ul>
       <li>Nested item</li>
     </ul>
   </li>
</ul>

<ol>
   <li>First step</li>
   <li>Second step</li> 
</ol>

Code blocks

Code blocks use <pre> and <code>. When a language is selected, StoryChief adds a language class that can be used by a syntax-highlighting library.

<pre>
   <code class="language-javascript">const message = 'Hello';</code> 
</pre>

Media blocks

Images

Images are published inside a <figure>. Responsive image sources, alternative text, captions, and optional links are included when configured.

<figure
  class="image strchf-type-image regular strchf-size-regular strchf-align-center"
>
  <picture>
    <source srcset="..." media="(max-width: 768px)">
    <source srcset="..." media="(min-width: 769px)">
    <img
      src="..."
      alt="Image description"
      loading="lazy"
      style="max-width:100%; height:auto;"
    >
  </picture>
  <figcaption>Optional image caption</figcaption>
</figure>

Images can have:

Alternative text
A caption
A destination link
Open-in-new-tab and nofollow link options
Regular, large, or full-width sizing
Center, left, or right alignment
Responsive and retina image sources

Large and full-width options may be unavailable when the source image is too small.

Image galleries

<figure class="gallery regular">
  <div class="strchf-gallery">
    <!-- Gallery images and controls -->
  </div>
  <figcaption>Optional gallery caption</figcaption>
</figure>

Individual gallery images can also have captions and alternative text.

Videos

<figure
  class="video strchf-type-video regular strchf-size-regular strchf-align-center"
>
  <div class="embed-container">
    <!-- Responsive video or iframe -->
  </div>
  <figcaption>Optional video caption</figcaption>
</figure>

StoryChief normally makes video embeds responsive to the width of your article container.

External embeds

External content—such as social posts, audio players, forms, and interactive media—uses the same media structure:

<figure
  class="embed strchf-type-embed regular strchf-size-regular strchf-align-center"
>
  <div class="embed-container">
    <!-- Provider-specific embed code -->
  </div>
  <figcaption>Optional embed caption</figcaption>
</figure>

Some providers load additional scripts. Your CMS, security configuration, or Content Security Policy must allow those scripts for the embed to work.

See Add external content to your article.

Lead-capture forms

<figure class="capture strchf-type-capture">
  <div class="strchf-embed-container embed-container">
    <iframe><!-- Lead-capture form --></iframe>
  </div>
  <figcaption>Optional form caption</figcaption>
</figure>

Content blocks

Divider

<hr>

Button

Buttons have a default portable style and can be customized using the StoryChief classes.

<p class="strchf-button-wrapper">
  <a
    class="strchf-button strchf-button--primary"
    href="https://www.storychief.io"
    target="_blank"
    rel="nofollow"
  >
    Button label
  </a>
</p>

Buttons support open-in-new-tab and nofollow options.

Table

<figure class="strchf-table">
  <table>
    <thead>
      <tr>
        <th>Heading</th>
        <th>Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Value</td>
        <td>Value</td>
      </tr>
    </tbody>
  </table>
</figure>

Table cells support bold, italic, underline, strikethrough, and links.

Callout

Callouts are published as an <aside> element:

<aside class="strchf-callout strchf-callout-info">
  <p>Helpful information for the reader.</p>
</aside>

The available types are:

Type	CSS class	Default background
Info	`strchf-callout-info`	`#e6f0ff`
Warning	`strchf-callout-warning`	`#fffbea`
Error	`strchf-callout-error`	`#ffecec`
Success	`strchf-callout-success`	`#ebf9eb`
Note	`strchf-callout-note`	`#efefef`

Use .strchf-callout to style every callout or a type-specific class to style one variation.

See Add a callout to your article.

Accordion

Accordions use the native HTML <details> and <summary> elements:

<details class="strchf-accordion">
  <summary class="strchf-accordion-summary">
    Accordion title
  </summary>

  <div class="strchf-accordion-content">
    <p>Accordion content</p>
  </div>
</details>

If the accordion is configured to be open by default, StoryChief adds the open attribute:

<details class="strchf-accordion" open>

See Add accordion blocks to your article.

Media size and alignment

Media can include the following classes:

Option	Classes
Regular	`regular strchf-size-regular`
Large	`large strchf-size-large`
Full width	`full strchf-size-full`
Center	`strchf-align-center`
Left	`strchf-align-left`
Right	`strchf-align-right`

You can enable or disable advanced media sizing and alignment under Settings → Articles → Editor.

Regular and centered media should work with most themes. Large, full-width, left-aligned, and right-aligned layouts require your website to define how those classes should behave.

Suggested CSS starter template

StoryChief articles inherit most styling from your website. The following CSS provides a practical starting point for media, tables, buttons, callouts, and accordions.

Replace .article-content with the class used by your website’s article-body container.

Some StoryChief blocks include basic inline styles for portability. The template uses !important only where necessary to override those defaults.

/* ========================================
   StoryChief article design tokens
   ======================================== */

.article-content {
  --sc-color-primary: #1d4ed8;
  --sc-color-primary-hover: #1e40af;
  --sc-color-on-primary: #ffffff;

  --sc-color-text: #1f2937;
  --sc-color-muted: #64748b;
  --sc-color-border: #dbe2ea;
  --sc-color-surface: #ffffff;
  --sc-color-surface-muted: #f8fafc;

  --sc-radius-sm: 0.375rem;
  --sc-radius-md: 0.625rem;

  --sc-space-sm: 0.75rem;
  --sc-space-md: 1rem;
  --sc-space-lg: 1.5rem;
  --sc-space-xl: 2rem;

  color: var(--sc-color-text);
}


/* ========================================
   Responsive media
   ======================================== */

.article-content figure {
  max-width: 100%;
  margin-block: var(--sc-space-xl);
}

.article-content picture,
.article-content img {
  display: block;
  max-width: 100%;
}

.article-content img {
  height: auto;
}

.article-content .embed-container,
.article-content .strchf-embed-container {
  max-width: 100%;
}

.article-content .embed-container iframe,
.article-content .strchf-embed-container iframe {
  max-width: 100%;
}


/* ========================================
   Media captions
   ======================================== */

.article-content figcaption {
  max-width: 65ch;
  margin: 0.625rem auto 0;
  color: var(--sc-color-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
}


/* ========================================
   Media alignment
   ======================================== */

.article-content figure.strchf-align-center {
  margin-inline: auto;
  text-align: center;
}

@media (min-width: 768px) {
  .article-content figure.strchf-align-left {
    float: left;
    width: min(50%, 28rem);
    margin: 0.25rem var(--sc-space-lg) var(--sc-space-md) 0;
  }

  .article-content figure.strchf-align-right {
    float: right;
    width: min(50%, 28rem);
    margin: 0.25rem 0 var(--sc-space-md) var(--sc-space-lg);
  }

  /* Clear floated media at the end of the article. */
  .article-content::after {
    display: block;
    clear: both;
    content: "";
  }
}

@media (max-width: 767px) {
  .article-content figure.strchf-align-left,
  .article-content figure.strchf-align-right {
    float: none;
    width: auto;
    margin-inline: auto;
  }
}


/* ========================================
   Large and full-width media
   ======================================== */

/*
 * Review these rules when the article layout contains a sidebar.
 * Adjust the maximum widths to fit your website.
 */

.article-content figure.strchf-size-large {
  width: min(calc(100% + 12rem), calc(100vw - 2rem));
  max-width: none;
  margin-inline: 50%;
  transform: translateX(-50%);
}

.article-content figure.strchf-size-full {
  width: 100vw;
  max-width: none;
  margin-inline: 50%;
  transform: translateX(-50%);
}

@media (max-width: 767px) {
  .article-content figure.strchf-size-large,
  .article-content figure.strchf-size-full {
    width: 100%;
    margin-inline: auto;
    transform: none;
  }
}


/* ========================================
   Tables
   ======================================== */

.article-content .strchf-table {
  max-width: 100%;
  margin-block: var(--sc-space-xl);
  overflow-x: auto;
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-md);
}

.article-content .strchf-table table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  background: var(--sc-color-surface);
}

.article-content .strchf-table th,
.article-content .strchf-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--sc-color-border);
  text-align: left;
  vertical-align: top;
}

.article-content .strchf-table th {
  background: var(--sc-color-surface-muted);
  font-weight: 600;
}

.article-content .strchf-table tr:last-child td {
  border-bottom: 0;
}


/* ========================================
   Buttons
   ======================================== */

.article-content .strchf-button-wrapper {
  margin-block: var(--sc-space-lg);
}

.article-content .strchf-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.75rem 1.25rem !important;

  border: 1px solid transparent;
  border-radius: var(--sc-radius-sm) !important;

  background-color: var(--sc-color-primary) !important;
  color: var(--sc-color-on-primary) !important;

  font: inherit;
  font-weight: 600;
  line-height: 1.2 !important;
  text-align: center;
  text-decoration: none !important;

  cursor: pointer;
  transition:
    background-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.article-content .strchf-button:hover {
  background-color: var(--sc-color-primary-hover) !important;
  color: var(--sc-color-on-primary) !important;
  transform: translateY(-1px);
}

.article-content .strchf-button:active {
  transform: translateY(0);
}

.article-content .strchf-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sc-color-primary) 35%, transparent);
  outline-offset: 3px;
}


/* ========================================
   Callouts
   ======================================== */

.article-content .strchf-callout {
  --sc-callout-background: var(--sc-color-surface-muted);
  --sc-callout-border: var(--sc-color-muted);
  --sc-callout-text: var(--sc-color-text);

  margin-block: var(--sc-space-xl);
  padding: var(--sc-space-lg) !important;

  border: 0;
  border-inline-start: 4px solid var(--sc-callout-border);
  border-radius: var(--sc-radius-md) !important;

  background-color: var(--sc-callout-background) !important;
  color: var(--sc-callout-text);
}

.article-content .strchf-callout-info {
  --sc-callout-background: #eff6ff;
  --sc-callout-border: #2563eb;
  --sc-callout-text: #1e3a5f;
}

.article-content .strchf-callout-warning {
  --sc-callout-background: #fffbeb;
  --sc-callout-border: #d97706;
  --sc-callout-text: #5f3a0a;
}

.article-content .strchf-callout-error {
  --sc-callout-background: #fef2f2;
  --sc-callout-border: #dc2626;
  --sc-callout-text: #5f1d1d;
}

.article-content .strchf-callout-success {
  --sc-callout-background: #f0fdf4;
  --sc-callout-border: #16a34a;
  --sc-callout-text: #14532d;
}

.article-content .strchf-callout-note {
  --sc-callout-background: #f8fafc;
  --sc-callout-border: #64748b;
  --sc-callout-text: #334155;
}

.article-content .strchf-callout > :first-child {
  margin-block-start: 0;
}

.article-content .strchf-callout > :last-child {
  margin-block-end: 0;
}

.article-content .strchf-callout a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}


/* ========================================
   Accordions
   ======================================== */

.article-content .strchf-accordion {
  margin-block: var(--sc-space-md);
  overflow: clip;

  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-md);

  background: var(--sc-color-surface);
}

.article-content .strchf-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-md);

  padding: var(--sc-space-md) var(--sc-space-lg);
  font-weight: 600;
  line-height: 1.4;

  cursor: pointer;
  list-style: none;
  transition: background-color 150ms ease;
}

.article-content .strchf-accordion-summary::-webkit-details-marker {
  display: none;
}

.article-content .strchf-accordion-summary::after {
  flex: 0 0 auto;
  color: var(--sc-color-muted);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  content: "+";
}

.article-content .strchf-accordion[open]
  > .strchf-accordion-summary::after {
  content: "−";
}

.article-content .strchf-accordion-summary:hover {
  background: var(--sc-color-surface-muted);
}

.article-content .strchf-accordion-summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sc-color-primary) 30%, transparent);
  outline-offset: -3px;
}

.article-content .strchf-accordion-content {
  padding: 0 var(--sc-space-lg) var(--sc-space-lg);
  border-top: 1px solid var(--sc-color-border);
}

.article-content .strchf-accordion-content > :first-child {
  margin-block-start: var(--sc-space-lg);
}

.article-content .strchf-accordion-content > :last-child {
  margin-block-end: 0;
}


/* ========================================
   Reduced-motion preference
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .article-content .strchf-button,
  .article-content .strchf-accordion-summary {
    transition: none;
  }
}

This gives developers one customizable foundation while keeping each component identifiable through StoryChief’s existing classes. The variables at the top make it easy to adapt the template to a website’s brand colors, spacing, and border radius.

Why can the published article look different?

Some differences are expected because the StoryChief editor is not your website theme. Common causes include:

Your theme applies its own fonts, colors, margins, and heading sizes.
Advanced StoryChief classes have not yet been styled.
Your CMS removes unsupported HTML, scripts, or iframe attributes.
An embed provider is blocked by a security or cookie-consent setting.
A third-party publishing destination does not support a particular block.
The same image was added as both the cover image and an image in the article body.

Advanced blocks can be transformed or simplified on destinations that do not support their original HTML. Always test important layouts on every destination you plan to use.

Still not displaying correctly?

Check the following:

Publish the article as a draft and preview it on your website.
Confirm that your StoryChief CMS plugin or integration is up to date.
Check whether regular text and headings are styled correctly.
Check whether the problem only affects an advanced block or layout option.
Ask your developer to inspect the StoryChief classes listed above.
If content is missing, verify that the CMS is not removing HTML, iframes, or scripts.
Contact StoryChief Support with the article URL, destination, affected block, and a screenshot.

Will my articles look correct on my website?