Table of Contents

About

Syntax

Inside a block

Inside a block component, you can position your component using the position attribute.

<block>
   <component position="value"></component>
</block>

Demo

<box width="400px" height="200px" border-color="black" spacing="m-5" class="position-relative overflow-visible">
    <icon position="top-left" name="logo.svg" />
    <badge position="top-quartile-1">top-25</badge>
    <icon position="top-center" name="logo.svg"/>
    <icon position="top-quartile-3" name="logo.svg" />
    <icon position="top-right" name="logo.svg" />
    <text position="left-quartile-1">left-75</text>
    <icon position="left-center" name="logo.svg" />
    <icon position="center" name="logo.svg" />
    <icon position="right-center" name="logo.svg" />
    <icon position="bottom-left" name="logo.svg" />
    <icon position="bottom-center" name="logo.svg" />
    <icon position="bottom-right" name="logo.svg" />
</box>
top-25

left-75