What's New Detail Page


Landing page to promote updates in the social networks.





How to Implement

The content of the page starts in the container div.

In the breadcrumb area (nav) it should contain the aria-label = "Breadcrumb". For each entry in the breadcrumb it must contain a link (a) except the current page which will be a span with the attribute aria-current = "page".

The content of the detail will be placed inside the article, which contains the attributes role = "contentinfo" and aria-label = "article".

The title (h1) and the date of publication (time) must be placed inside the header, and in the time element the datetime attribute must included with the date in YYYY-MM-DD format.

Inside the div below place the image source and alt attribute.

In the div below the image add tags with the respective attribute rel = "tag" and the link must be placed. The margin-right-xs class should be placed in the tags, except for the last existing tag.

The text must be placed inside the p element, unless the content already contains html, in which case change the p to div.

Below the text there is a link where the content and the href must be filled.

Until 992px the content will occupy 10 columns, and below that width it will occupy 12

Tasks Front End


Tasks Back End


Tasks details


Views Path

Component Variations

Default Version

How to use

Undeveloped Options


Example page

Figma Link