Editorial cheat sheet
How to use the news upload form – Video
Most of what you need to publish on the FashionUnited platform is supported by markdown. Here’s the relevant links:
Learn more about Markdown
- How to Write Faster, Better & Longer: The Ultimate Guide to Markdown
- 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:
Bad example:
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)
News Article: with 1 extra image
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
categoryExecutive Report
=> will post to.com/executive/management
categoryEducation News
=> will post to.com/education/news
categoryEducation 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
Result
Vimeo
Code
Result
Hyperlink
My favorite website is FashionUnited.
Images
Or, with optional 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.
Image with caption
Markdown does not support figcaption. Therefore we must use HTML.
Caption with links
Linking images
Default image
Label
IM Small
Link to 1 article
Read more box
Frame
Frame with links
Frame within article, grey
Promotional box
See a preview of the promotional boxes in our Storybook.
Promotional box, with a header text
<header>...</header>
Promotional box, with link
class="article-promo"
Promotional box, with alternative styling
class="article-promo--alt"
Details-menu
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 therole="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:
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: