When publishing StoryChief sends out raw HTML to your website. Below is a reference of the possible elements and their output.

Inline elements
Block elements
Rich media alternatives
1. Sizing
2. Positioning

1. Inline elements

1a. Bold

This is <strong>bold</strong> text.

1b. Italic

This is <em>italic</em> text.

1c. Underline

This is <u>underline</u> text.

1d. Strikethrough

This is <s>strikethrough</s> text.

1e. Small

This is <small>strikethrough</small> text.

1f. Code

This is <code>code</code> text.

1g. Link

This is <a href="https://storychief.io">link</a> text.

Alternatives
Link defined to open in a new browser

This is <a href="https://storychief.io" target="_blank" rel="noopener noreferrer">link</a> text.

Link defined with nofollow

This is <a href="https://storychief.io" rel="nofollow">link</a> text.

2. Block elements

2a. Image

<figure class="image strchf-type-image regular strchf-size-regular strchf-align-center">
  <picture>
    <source srcset="https://images.storychief.com/.../image_800.jpg 1x, https://images.storychief.com/.../image_1600.jpg 2x" media="(max-width: 768px)">
    <source srcset="https://images.storychief.com/.../image_800.jpg 1x, https://images.storychief.com/.../image_1600.jpg 2x" media="(min-width: 769px)">
    <img alt="Alt text" src="https://images.storychief.com/.../image_800.jpg">
  </picture>
  <figcaption>Image caption</figcaption>
</figure>

2b. Video

<figure class="video strchf-type-video regular strchf-size-regular strchf-align-center">
  <div class="embed-container">
    <div style="max-width: 100%; position: relative; padding-top: 56.5%;">

      <!-- The embed content -->
      <iframe width="200" height="113" src="https://www.youtube.com/embed/QQiizdWAWw8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
      <!-- The embed content -->

    </div>
  </div>
  <figcaption>Optional video caption</figcaption>
</figure>

🔔 Note: The inline styling provides for responsive scaling of the video depending on your website's container width.

2c. Embed

<figure class="embed strchf-type-embed regular strchf-size-regular strchf-align-center">
  <div class="embed-container">

    <!-- The embed content -->
    <div class="twitter-tweet twitter-tweet-rendered">
      ...
    </div>
    <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    <!-- The embed content -->

  </div>
</figure>

2d. Divider

<hr />

3. Rich media alternatives

For media block items like image, gallery, video, embed there is alternative displaying available. These alternatives can be enabled/disabled. See the help article on how to disable it and examples of layouts.

3a. Sizing

regular (default)

<figure class="image strchf-type-image regular strchf-size-regular strchf-align-center">
  ...
</figure>

large

<figure class="image strchf-type-image large strchf-size-large strchf-align-center">
  ...
</figure>

full

<figure class="image strchf-type-image full strchf-size-full strchf-align-center">
  ...
</figure>

3b. Positioning

center (default)

<figure class="image strchf-type-image regular strchf-size-regular strchf-align-center">
  ...
</figure>

left

<figure class="image strchf-type-image regular strchf-size-regular strchf-align-left">
  ...
</figure>

right

<figure class="image strchf-type-image regular strchf-size-regular strchf-align-right">
  ...
</figure>