A ratio displays an image or video embed at a specific aspect ratio.

Published Last updated: 5.8.0 Change log Github NPM
Twig Usage
{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      alt: 'Alt text.',
      src: 'https://via.placeholder.com/400x300',
      width: 400,
      height: 300,
  } only %}
{% endset %}
{% include '@bolt-elements-ratio/ratio.twig' with {
  content: image,
  ratio: 'wide',
} only %}
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)

A Drupal-style attributes object with extra attributes to append to this element.


A nested element with proportions defined through ratio property. It can be for example image or video.


An aspect ratio between the width and height. Expressed as width divided by height. You can choose from: standard(4/3), square(1/1), wide(16/9). Custom aspect ratio can be set via the CSS custom property --e-bolt-aspect-ratio.

string standard
  • standard, square, wide
Install Install
npm install @bolt/elements-ratio
Dependencies @bolt/core-v3.x