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 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 tagEducation Schools.
Result: The article will be posted in UKnews/fashion and USeducation/schools
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 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:
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>.