shape docs

Shape

A 1:1 ratio container that displays decorative content.

Published Last updated: 4.4.0 Change log NPM
Twig Usage 
{% include '@bolt-elements-shape/shape.twig' with {
  content: 'MM',
} only %}
 Schema
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)
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
  • small, medium, large, xlarge
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
  • none, small, large, full
Install Install 
npm install @bolt/elements-shape
Dependencies @bolt/core-v3.x

shape

Basic Shape A Shape is a 1:1 ratio container that displays decorative content. Important Notes: Content can be letters, icons, or images. When passing letters to the content, it can accept up to 2 letters. Demo
Light MM Alt text.
Dark MM Alt text.
Twig
{% include '@bolt-elements-shape/shape.twig' with {
  content: 'MM',
} only %}
HTML
<span class="e-bolt-shape">
  <span class="e-bolt-shape__content">
    <!-- Letters, icon, or image go here -->
  </span>
</span>

shape border radius

Shape Border Radius A Shape’s border radius can be modified to create various shapes. Important Notes: Reference the schema for all options. Demo MM MM MM MM
Twig
{% include "@bolt-elements-shape/shape.twig" with {
  border_radius: 'full',
  ...
} only %}
HTML
<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>

shape size

Shape Size A Shape’s size can be modified per use case. Important Notes: Reference the schema for all options. When passing letters to the content, text size scales with the shape size. When passing an icon to the content, icon size is ignored. Icon size scales with the shape size. When passing an image to the content, image size is ignored. Image size scales with the shape size. Demo MM MM MM MM
Twig
{% include '@bolt-elements-shape/shape.twig' with {
  size: 'large',
  ...
} only %}
HTML
<span class="e-bolt-shape e-bolt-shape--large">
  <span class="e-bolt-shape__content">
    <!-- Letters, icon, or image go here -->
  </span>
</span>

shape theming

Shape Theming A Shape can accept all existing themes. Important Notes: Pass a .t-bolt-* theme class to the parent element to color a shape. Reference the Theming System for all available themes. Demo
Light
  • .t-bolt-white
  • .t-bolt-black
  • .t-bolt-gray-xlight
  • .t-bolt-navy-dark
  • .t-bolt-navy
  • .t-bolt-navy-light
  • .t-bolt-teal
  • .t-bolt-yellow
  • .t-bolt-orange
  • .t-bolt-pink
  • .t-bolt-wine
  • .t-bolt-berry
  • .t-bolt-violet
Dark
  • .t-bolt-white
  • .t-bolt-black
  • .t-bolt-gray-xlight
  • .t-bolt-navy-dark
  • .t-bolt-navy
  • .t-bolt-navy-light
  • .t-bolt-teal
  • .t-bolt-yellow
  • .t-bolt-orange
  • .t-bolt-pink
  • .t-bolt-wine
  • .t-bolt-berry
  • .t-bolt-violet
Twig
{% include '@bolt-elements-shape/shape.twig' with {
  attributes: {
    class: 't-bolt-navy',
  }
  ...
} only %}
HTML
<span class="e-bolt-shape t-bolt-navy">
  <span class="t-bolt-shape__content">
    <!-- Letters, icon, or image go here -->
  </span>
</span>