Skip to main content

Media

The media object is, typically, an image on the left with descriptive content on the right. They can be used standalone, stacked, or as part of other components like block lists.

GitHub logo

Title

Description

Basic usage​

{{
  html.media({
    'image': 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Octicons-mark-github.svg/48px-Octicons-mark-github.svg.png',
    'image_alt': 'GitHub logo',
    'title': 'Title',
    'description': 'Description'
  })
}}

Helper options​

You can configure this helper using the common helper options, the following options are specific to this helper.

OptionTypeDescription
actionshtml/twigA button or indicator to display in the top right hand corner of the media object
descriptionstringShort descriptive text to display underneath the title
hrefstringIf the type is set to link you must provide the href
iconstringIcon name (following conventions in the icon helper) to display on the left hand side as an alternative to the image
icon_colourstringThe text colour to use for the icon, useful for branding
imagestringURL for hte image to display on the right hand side
image_altstringAlt attribute for the image, required for accessibility reasons
titlestringThe main title for this object
typestringMarkup scheme to use, can be either div (default) or link

Icons instead of images​

Supply an icon instead of image to choose from the hundreds of icons available within Pulsar. Use in conjunction with the optional icon_colour to improve how they look or to maintain branding for brand icons.

YouTube

Upload video to YouTube
{{
  html.loading({
    'type': 'block'
  })
}}

Optional action​

You can place an action such as a button or status indicator depending on the needs of your user interface.

Twitter

Automatically push content to your timeline

Twitter

Automatically push content to your timeline
online

Twitter

Automatically push content to your timeline
{{
    html.media({
        'icon': 'twitter-square',
        'icon_colour': '#0084b4',
        'title': 'Twitter',
        'description': 'Automatically push content to your timeline',
        'action': html.remove_button({ 'target': '#example' })
    })
}}

{{
    html.media({
        'icon': 'twitter-square',
        'icon_colour': '#0084b4',
        'title': 'Twitter',
        'description': 'Automatically push content to your timeline',
        'action': html.button({ 'label': 'disconnect', 'class': 'btn--small btn--outline' })
    })
}}

{{
    html.media({
        'icon': 'twitter-square',
        'icon_colour': '#0084b4',
        'title': 'Twitter',
        'description': 'Automatically push content to your timeline',
        'action': html.status('online')
    })
}}