Tag: Images

Capsule provides three shortcodes for embedding images, responsive images, and groups of images with relevant metadata. img The {{< img >}} shortcode simply adds an img tag with the following parameters: align: aligns the image and wrap text around (‘right’ or ’left’) alt (or caption): set the alt text for the image class: adds CSS classes to the img tag link: wraps the img in anchor tags so that the image has a clickable link.

The {{< banner >}} and {{< banner-fluid >}} shortcodes use the Bulma hero class to display banners that can either fill the entire container width or the entire viewport width, respectively. Parameters: title: the text to be displayed prominently in the center of the banner class: string of classes to add to banner subtitle: smaller text displayed under the title img: url to background image mode: how the image is used to fill the banner space (‘stretch’ or ‘repeat’) Text to display in the body of the banner goes in between the {{< banner >}} tags.