Media links are there to provide context about document and media files you can interact with.
Media links make it easy to provide users with access to important files while keeping the focus on their tasks. You can display media files in a way that engages users without overwhelming them. Additionally, these components can include a file size option, giving users a quick overview of the file's content.
When to use this component
Media links are designed to highlight key content within a concise preview, capturing the user's attention effectively. They are particularly useful for linking to external resources or detailed documents, such as articles or videos.
Examples in GOSS products
- Related media section of each template
- Document inline within the article's body
Accessibility considerations
When the "opens new window" option is used, the link will clearly indicate this behaviour to users.
Displaying file sizes is also beneficial, as it helps users make informed decisions about downloads, especially for large files or those with limited bandwidth.
Basic media link
A media link with no additional configuration options.
<a href="#" class="media-link media-link--filetype">
<span class="media-link__text">Media link title</span>
<span class="media-link__bracket">(</span>
<span class="media-link__type">Media link type, </span>
<span class="media-link__filesize">100 MB</span>
<span class="media-link__bracket">)</span>
</a><comp:mediaFileLink mediaFile="#{mediaFile}" />Media link opens new window
An alert with the new window element.
<span class="media-link__newwindow"> (opens new window)</span>
By adding "opens new window" text ensures users are aware that the link will open in a new window, which improves accessibility by providing clearer navigation cues for assistive technology users.
The text is currently hidden from view but can be reveal to user by using the media-link__newwindow class
<a href="#" class="media-link media-link--filetype" target="_blank">
<span class="media-link__text">Media link title</span>
<span class="media-link__bracket">(</span>
<span class="media-link__type">Media link type, </span>
<span class="media-link__filesize">100 MB</span>
<span class="media-link__bracket">)</span>
<span class="media-link__newwindow"> (opens new window)</span>
</a><comp:mediaFileLink mediaFile="#{mediaFile}" newWindow="true" />Additional media link styles
Media link with additional modifiers to reflect the file it is representing
Image media link
media-link media-link--image
Spreadsheet media link
media-link media-link--excel
JavaScript media link
media-link media-link--javascript
PDF media link
media-link media-link--pdf
Skin media link
media-link media-link--skin
Text document media link
media-link media-link--word
Video media link
media-link media-link--video
Compressed file media link
media-link media-link--zip
<a href="#" class="media-link media-link--image">
<span class="media-link__text">Image title</span>
<span class="media-link__bracket">(</span>
<span class="media-link__type">image, </span>
<span class="media-link__filesize">1 MB</span>
<span class="media-link__bracket">)</span>
</a>
</br>
<a href="#" class="media-link media-link--excel">
<span class="media-link__text">Spreadsheet title</span>
<span class="media-link__bracket">(</span>
<span class="media-link__type">excel, </span>
<span class="media-link__filesize">10 KB</span>
<span class="media-link__bracket">)</span>
</a>
</br>
<a href="#" class="media-link media-link--javascript">
<span class="media-link__text">JavaScript title</span>
<span class="media-link__bracket">(</span>
<span class="media-link__type">JavaScript, </span>
<span class="media-link__filesize">1 KB</span>
<span class="media-link__bracket">)</span>
</a>
</br>
<a href="#" class="media-link media-link--pdf">
<span class="media-link__text">PDF title</span>
<span class="media-link__bracket">(</span>
<span class="media-link__type">PDF, </span>
<span class="media-link__filesize">1 KB</span>
<span class="media-link__bracket">)</span>
</a>
</br>
<a href="#" class="media-link media-link--skin">
<span class="media-link__text">Subsite skin title</span>
<span class="media-link__bracket">(</span>
<span class="media-link__type">Skin, </span>
<span class="media-link__filesize">50 KB</span>
<span class="media-link__bracket">)</span>
</a>
</br>
<a href="#" class="media-link media-link--word">
<span class="media-link__text">Text doc title</span>
<span class="media-link__bracket">(</span>
<span class="media-link__type">Word doc, </span>
<span class="media-link__filesize">1 GB</span>
<span class="media-link__bracket">)</span>
</a>
</br>
<a href="#" class="media-link media-link--video">
<span class="media-link__text">Video title</span>
<span class="media-link__bracket">(</span>
<span class="media-link__type">Video, </span>
<span class="media-link__filesize">1 GB</span>
<span class="media-link__bracket">)</span>
</a>
</br>
<a href="#" class="media-link media-link--zip">
<span class="media-link__text">Compressed file title</span>
<span class="media-link__bracket">(</span>
<span class="media-link__type">zip, </span>
<span class="media-link__filesize">10 GB</span>
<span class="media-link__bracket">)</span>
</a>
</br><c:forEach var="mediaFile" items="#{comp.media.files}">
<comp:mediaFileLink mediaFile="#{mediaFile}" />
</br>
</c:forEach>Media link with linkText set
A media link with the linkText attribute.
<a href="#" class="media-link media-link--filetype">
<span class="media-link__text">This is the customised link text</span>
<span class="media-link__bracket">(</span>
<span class="media-link__type">Media link type, </span>
<span class="media-link__filesize">100 MB</span>
<span class="media-link__bracket">)</span>
</a><comp:mediaFileLink mediaFile="#{mediaFile}" linkText="This is the customised link text" />
