Editorial cheat sheet

How to use the news upload form – Video

• How to use the news upload form - YouTube video

Most of what you need to publish on the FashionUnited platform is supported by markdown. Here’s the relevant links:

• Headings
• Paragraphs
• Emphasis (bold, italic)
• Blockquotes
• Lists
• Links
• Images
• HTML

Learn more about Markdown

1. How to Write Faster, Better & Longer: The Ultimate Guide to Markdown
2. Markdown Cheat sheet – For advanced use, the basics are covered on this page.

When using HTML

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself [source].

Use blank lines to separate block-level HTML elements like <div>, <table>, <pre>, and <p> from the surrounding content [source].

Good example:

This is a regular paragraph.

<figure>
  <img src="https://media.fashionunited.com/media/dummy/landscape.jpeg" alt="my alt text">
  <figcaption>This is my caption text.</figcaption>
</figure>

**This is a bold paragraph.**

<div class="article-promo">
  Werken bij een van de merken in Amsterdam The Style Outlets?
</div>

Inline HTML (span, img, etc.) is allowed
<img src="https://media.fashionunited.com/media/dummy/landscape.jpeg"> and will
render fine. _And an italic sentence._

Bad example:

This is a regular paragraph.
<figure>
  <img src="https://media.fashionunited.com/media/dummy/landscape.jpeg" alt="my alt text">
  <figcaption>This is my caption text.</figcaption>
</figure>
**This is bold a paragraph.**
<div class="article-promo">
  Werken bij een van de merken in Amsterdam The Style Outlets?
</div>
Inline HTML (span, img, etc.) is allowed <img src="https://media.fashionunited.com/media/dummy/landscape.jpeg"> and will render fine.
*And an italic sentence.*

News Article: Basic, no extra images

Please note:

• The title is set in a separate field.
• the header image that you upload will insert at the top of your article automatically. This looks like a link: ![](https://fashionunited.com/some-image.jpg)

Net sales at Coach-parent Tapestry Inc totalled 715 million dollars for the
fourth quarter compared to 1.51 billion dollars in the prior year. The company
said in a statement that gross profit totalled 499 million dollars on a reported
basis, while gross margin for the quarter was 69.8 percent compared to 999
million dollars and 66 percent, respectively, in the prior year. Net loss for
the quarter was 294 million on a reported basis, with loss per diluted share of
1.06 dollars compared to net income of 149 million dollars with earnings per
diluted share of 51 cents in the prior year period.

## Review of Tapestry’s fourth quarter performance

On a non-GAAP basis, gross profit for the fourth quarter was 507 million
dollars, while gross margin was 71 percent compared to 1.02 billion dollars and
67.3 percent, respectively, in the prior year. Operating loss was approximately
280 million dollars on a reported basis, while operating margin was negative
39.2 percent versus operating income of 171 million dollars and an operating
margin of 11.3 percent in the prior year. On a non-GAAP basis, operating loss
was 70 million dollars, while operating margin was negative 9.8 percent versus
operating income of 222 million dollars and an operating margin of 14.7 percent
in the prior year.

News Article: with 1 extra image

Net sales at Coach-parent Tapestry Inc totalled 715 million dollars for the
fourth quarter compared to 1.51 billion dollars in the prior year. The company
said in a statement that gross profit totalled 499 million dollars on a reported
basis, while gross margin for the quarter was 69.8 percent compared to 999
million dollars and 66 percent, respectively, in the prior year. Net loss for
the quarter was 294 million on a reported basis, with loss per diluted share of
1.06 dollars compared to net income of 149 million dollars with earnings per
diluted share of 51 cents in the prior year period.

## Review of Tapestry’s fourth quarter performance

On a non-GAAP basis, gross profit for the fourth quarter was 507 million
dollars, while gross margin was 71 percent compared to 1.02 billion dollars and
67.3 percent, respectively, in the prior year.
![](https://fashionunited.com/img/master/2020/08/13/kate-spade-1-coraplf0-2020-08-13.jpeg)
Operating loss was approximately 280 million dollars on a reported basis, while
operating margin was negative 39.2 percent versus operating income of 171
million dollars and an operating margin of 11.3 percent in the prior year. On a
non-GAAP basis, operating loss was 70 million dollars, while operating margin
was negative 9.8 percent versus operating income of 222 million dollars and an
operating margin of 14.7 percent in the prior year.

Executive, Education

To publish to .com/education and .com/executive via dashboard.fashionunited.com, you need to add the tag corresponding to the category you want to publish to. These tags will only change the category you are posting to on fashionunited.com and leave the other newsboards/platforms/domains you are posting to intact.
The tags to use are as follows:

• Executive Management => will post to .com/executive/management category
• Executive Report => will post to .com/executive/management category
• Education News => will post to .com/education/news category
• Education Schools => will post to .com/education/schools category

Example

Posting an article, you select the news/fashion category and post to multiple newsboards, including US and UK. To post the article to executive on .com, you would then add the tag Education Schools.
Result: The article will be posted in UK news/fashion and US education/schools

Embed Video

YouTube

Code

## Youtube
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/cvDVoGUOks4?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

Result

Vimeo

Code

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/366820993"  frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>

Result

Hyperlink

My favorite website is [FashionUnited](https://fashionunited.com)

My favorite website is FashionUnited.

Images

![Alttext](URL)

Or, with optional titletext:

![Alttext](URL "Titletext")

• Alttext is mandatory. Always provide an alt text describing what’s in the picture. This helps SEO and visually impaired people using screenreaders. Read more
• Title text is optional / not needed. The title text will show on mouse hover. On mobile phones, over 50% of users as of 2019, you cannot hover. Hence the title text is useless.

![ALTTEXT](https://media.fashionunited.com/media/dummy/portrait.jpeg "Title text, optional. Shows on mouse hover.")

Image with caption

Markdown does not support figcaption. Therefore we must use HTML.

<figure>
  <img src="https://media.fashionunited.com/media/dummy/landscape.jpeg" alt="my alt text">
  <figcaption>This is my caption text.</figcaption>
</figure>

This is my caption text.

Caption with links

<figure>
  <img src="https://media.fashionunited.com/media/dummy/portrait2.jpeg" alt="Macaque in the trees">
  <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="https://fashionunited.com/">Richard Clark</a></figcaption>
</figure>

A cheeky macaque, Lower Kintaganban River, Borneo. Original by Unsplash

Linking images

[![ALTTEXT!](https://media.fashionunited.com/media/dummy/landscape.jpeg)](https://fashionunited.com)

Default image

<img src="https://static.fashionunited.com/2015/NEWSpicture.jpg" alt="">

Label

<span class="label label-primary">INTERVIEW</span>

IM Small

Link to 1 article

<div class="panel panel-default">
  Also read:
  <div class="panel-body">
    <a href="LINK" target="_self"><u>TEXT</u></a>
  </div>
</div>

Read more box

<div class="article-promo">
  <header>Read more:</header>
<ul>
      <li><a href="LINK" target="_self">TEKST</a></li>
      <li><a href="LINK" target="_self">TEKST</a></li>
      <li><a href="LINK" target="_self">TEKST</a></li>
    </ul>
  </div>

Frame

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Frame with links

<div class="panel panel-default">
  <div class="panel-body">
    <strong><p>Lees ook:</p></strong>
    <ul type="square">
      <li><a href="LINK" target="_self"><u>TEXT</u></a></li>
      <li><a href="LINK" target="_self"><u>TEXT</u></a></li>
      <li><a href="LINK" target="_self"><u>TEXT</u></a></li>
    </ul>
  </div>
</div>

Frame within article, grey

<div class="panel panel-default" style="float: right; padding-left: 10px; border: none;">
  <div class="panel-body">
    <div style="background-color: #eee; padding: 30px;">
      <div class="blokje">
        <strong><small>In het kort (test)</small></strong>
        <ul>
          <li><small>Opgericht in 1988</small></li>
          <li><small>Adres: test test</small></li>
          <li><small>Aantal werknemers: test test</small></li>
          <li><small>Wapenfeiten: test test prijs test</small></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Promotional box

See a preview of the promotional boxes in our Storybook.

<div class="article-promo">
  Werken bij een van de merken in Amsterdam The Style Outlets?
</div>

Promotional box, with a header text

<header>...</header>

<div class="article-promo">
  <header>Promotion</header>
  Werken bij een van de merken in Amsterdam The Style Outlets?
</div>

Promotional box, with link

class="article-promo"

<div class="article-promo">
  <header>Achtergrondinformatie</header>
  <p>
    De mode-industrie is een van de vervuilendste industrieën wereldwijd. We quoten de Amerikaanse modejournalist Dana Thomas: ‘van het vergaren van grondstoffen tot <a rel="noopener noreferrer" href="https://fashionunited.nl/v1/leads/ophef-afvalberg-kleding/20080828131" target="_self"><u>de afvalberg vol kleding</u></a>’. Enerzijds is de modesector dus zo vervuilend omdat modebedrijven gigantisch veel kleren produceren, anderzijds omdat consumenten - jij en ik - enorme hoeveelheden kleding kopen - en weggooien.
  </p>
</div>

Promotional box, with alternative styling

class="article-promo--alt"

<div class="article-promo--alt">
  <header>Promotion</header>
  Werken bij een van de merken in Amsterdam The Style Outlets? <a href="https://fashionunited.com/">Bekijk hier alle vacatures &gt;&gt;</a>
</div>

Details-menu

<details>
  <summary>Een ander idee is dichter bij huis produceren.<span class="dropdown-icon"></span>Dat doet Zara overigens ook.</summary>
  <details-menu role="menu">
    <div class="article-promo">
      <p>
        <u>Mode wordt weer dicht bij de afzetmarkt gemaakt</u><br>
        Voor <em>nearshoring</em>, waarbij de productie dus dichter bij de
        afzetmarkt plaatsvindt, en <em>reshoring</em>, het terughalen van de
        productie uit lagelonenlanden, is steeds meer interesse in de branche. Zo
        blijkt ook uit het in 2018 verschenen rapport 'Is apparel manufacturing
        coming home?' en het 2021 onderzoek 'Revamping fashion sourcing: Speed and
        flexibility to the fore' van het Amerikaanse adviesbureau McKinsey. Daarin
        gaf 71 procent van de Chief Purchasing Officers (CPO’s) die McKinsey
        ondervroeg, aan <a rel="noopener noreferrer" href="https://fashionunited.nl/nieuws/business/minder-opties-meer-in-season-en-meer-analytics-nieuw-onderzoek-onthult-sourcingtrends/2021111651666" target="_self"><u>meer te willen gaan <em>nearshoren</em></u></a>.
      </p>

      <p>
        Dat er in de modewereld een toenemende interesse is voor productie in de
        buurt van de afzetmarkt, stelt ook de Amerikaanse (mode)journalist Dana
        Thomas. Thomas schrijft in haar boek Fashionolopis (over de opkomst en
        keerzijde van fast fashion) dat deze <em>nearshoring</em> trend in Amerika
        en Engeland al een paar jaar geleden in gang is gezet. <small>(Bron: De
        Correspondent artikel 'Van Made in Bangladesh naar Made in Europe’ van Emy
        Demkes, uit oktober 2019.)</small>
      </p>

      <p>
        Han Bekke, voorzitter van branchevereniging Modint, verklaarde tegenover
        NOS eveneens "een duidelijke trend" te zien. In het artikel 'Groeiend
        aantal modebedrijven wil weg van 'race to bottom' in China' uit april 2021
        stelt Bekke: "Steeds meer orders gaan naar landen als Turkije, Portugal en
        Italië en Oost-Europese landen."
      </p>
    </div>
  </details-menu>
</details>
<p>The rest of the article.....</p>

Additional information to use this tag:

• Make sure that the paragraph is wrapped with a <details> tag.
• The <summary> tag is used to define a visible heading for the <details> element.
• Make sure the <span class="dropdown-icon"></span> tag is added to the <summary> tag to show the dropdown icon.
• The <details-menu> tag is used to define the content of the details menu.
• The <details-menu> tag must have the role="menu" attribute.
• The <details-menu> tag must have a <div class="article-promo"> tag as a child.
• The <div class="article-promo"> should contain <p> tags with the content of the details menu.
• Continue the article after the <details> tag, so that the DOM looks like:

<p></p>
<details></details>
<p></p>

closed:

open:

Dropdown for credit details / references, using an asterisk (*) icon

In order to display a dropdown with an asterisk, use the same element as the details-menu, but replace <span class="dropdown-icon"></span> with <span class="asterisk-icon"></span>.

Example:

<details>
  <summary aria-haspopup="menu" role="button">
    Example of credit details.
    <span class="asterisk-icon"></span>Notice how it uses an asterisk instead of
    a chevron icon
  </summary>
  <details-menu role="menu">
    <div class="article-promo">
      <p>Credits to FashionUnited</p>
    </div>
  </details-menu>
</details>