Ratio
A small helper-component that displays image or video children at a specific aspect ratio.
{% include "@bolt-components-ratio/ratio.twig" with {
children: '<img src="https://via.placeholder.com/350x150">',
ratio: "350/150",
attributes: {
style: [
"max-width: 400px;",
"margin: 0 auto;",
]
}
} only %}
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
|
attributes
|
A Drupal attributes object. Used to apply with extra HTML attributes to the outer <bolt-ratio> tag. |
object
| — |
|
|
children
|
Nested content to nest inside the <bolt-ratio> component when used in a Twig template. |
string
, object
, array
|
— |
|
|
ratio
|
Set the aspect ratio for the ratio object via slash-separated width and height values, e.g. 4/3, 16/9, 1/1, etc. |
string
| — |
|
|
aspectRatioWidth
(deprecated) |
Twig-specific prop for setting the width portion of the component's aspect ratio. Will be removed in Bolt v3.0. Use the simpler ratio prop instead. |
number
| — |
|
|
aspect-ratio-width
(deprecated) |
Web component-specific prop for setting the width portion of the bolt-ratio web component's aspect ratio. Will be removed in Bolt v3.0. Use the simpler ratio prop instead. |
number
| — |
|
|
aspectRatioHeight
(deprecated) |
Twig-specific prop for setting the height portion of the component's aspect ratio. Will be removed in Bolt v3.0. Use the simpler ratio prop instead. |
number
| — |
|
|
aspect-ratio-height
(deprecated) |
Web component-specific prop for setting the height portion of the bolt-ratio web component's aspect ratio. Will be removed in Bolt v3.0. Use the simpler ratio prop instead. |
number
| — |
|
Advanced Schema Options
|
no_css_vars
|
Manually disables CSS Variable-based rendering for <bolt-ratio> in Twig templates. Useful for testing cross browser functionality. By default this is automatically enabled / disabled based on browser support for CSS Vars. |
boolean
| — |
|
|
no-css-vars
|
Manually disables CSS Variable-based rendering on the <bolt-ratio> custom element. Useful for testing cross browser functionality. By default this is automatically enabled / disabled based on browser support for CSS Vars. |
boolean
| — |
|
|
no_shadow
|
Manually disables the component from rendering to the Shadow DOM in a Twig template. Useful for testing cross browser functionality / rendering behavior. By default this is enabled / disabled based on browser support. |
boolean
| — |
|
|
no-shadow
|
Manually disables the web component from rendering to the Shadow DOM. Useful for testing cross browser functionality / rendering behavior. By default this is enabled / disabled based on browser support. |
boolean
| — |
|
npm install @bolt/components-ratio
