Shapes
Gives you the flexibility to create square or circle for text, icons or images with useful options.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                shape: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<div class="shape shape-primary">
    <span class="shape-content">Dlex</span>
</div>
NameDescription
.shape-overlapCan be used to group multiple shapes together and make them overlap
.shapeBase class of the shape component
.shape.rounded-circleMakes a shape in a rounded circle
.shape.shape-{theme}Applies a certain theme to the shape, such as shape-primary or shape-soft-success
.shape.shape-{xs, sm, lg, xl, xxl}Applies a certain size to the shape, such as shape-xs or shape-lg
.shape > .shape-contentBase class of the shape content within the shape
Customize variables at:/library/extend/components/_shape.scss
Component's defaults:/library/components/shape/_defaults.scss
NameDefault valueNote
$shape-default-size48px
$shape-default-border-width1px
$shape-default-font-size12px
$shape-default-radius4px
$shape-overlap-offset30

Make sure to read the Customize components and Understanding and using the design system guides.

{title}