{% include '@bolt-elements-shape/shape.twig' with {
content: 'MM',
} only %}
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
content
*
|
Content of the shape. |
any
| — |
|
attributes
|
A Drupal-style attributes object with extra attributes to append to this element. |
object
| — |
|
size
|
Changes the size of the interior element |
string
|
small
|
|
border_radius
|
Customizes the outside radius of the shape. "none" will render as a square shape, "small" and "large" will render as a rounded corners square and "full" will render as a circle. |
string
|
full
|
|
npm install @bolt/elements-shape
{% include '@bolt-elements-shape/shape.twig' with {
content: 'MM',
} only %}
<span class="e-bolt-shape">
<span class="e-bolt-shape__content">
<!-- Letters, icon, or image go here -->
</span>
</span>
{% include "@bolt-elements-shape/shape.twig" with {
border_radius: 'full',
...
} only %}
<span class="e-bolt-shape e-bolt-shape--border-radius-full">
<span class="e-bolt-shape__content">
<!-- Letters, icon, or image go here -->
</span>
</span>
{% include '@bolt-elements-shape/shape.twig' with {
size: 'large',
...
} only %}
<span class="e-bolt-shape e-bolt-shape--large">
<span class="e-bolt-shape__content">
<!-- Letters, icon, or image go here -->
</span>
</span>
{% include '@bolt-elements-shape/shape.twig' with {
attributes: {
class: 't-bolt-navy',
}
...
} only %}
<span class="e-bolt-shape t-bolt-navy">
<span class="t-bolt-shape__content">
<!-- Letters, icon, or image go here -->
</span>
</span>