The Draftbit Docs

Welcome to the Draftbit documentation. You'll find comprehensive documentation and information to help you start working with Draftbit as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Additional Layout and Style Options

Margins & Padding

Adding a margin creates extra space around an element while adding padding creates extra space within an element.

This input is based on the Box Model.

You can adjust the Margin by typing in a value in the outer ring and you can adjust the Padding by typing in a value in the inner ring.

Size

Specify minimum, maximum, or specifically set heights and widths for the element.

Parameter

Description

auto

The default setting that is calculated based on what other elements, if any, are inside the element.

pt

Explicitly set an exact height/width.

percentage

Set the height/width as a percentage of the height/width of the parent element.

Position

Determines how a child element is placed in its parent container

Parameter

Description

Relative

Positions the element relative to the other elements in the parent container.

Absolute

Takes the element out of the flow of all other elements in the child container. The top, right, left, and bottom values are used to determine the position of the element. Set these values to define how far away the element should be from the edges of the parent element.

Z-index

Determines the level of the element. The higher the Z-Index, the higher priority the element will have in regards to stacking.

Overflow

Determines the behavior of remaining content that goes beyond the bounds of the container.

Resources
Yoga Docs
MDN: CSS position property

Borders

Set the border radius of a component, along with the width and style of the border surrounding a component.

Parameter

Description

Radius

Determine how the edges of the border will be rounded. Configure the Global and Button in the theme settings.

Size

The width of the border on each side of the element.

Color

The color of the border.

Style

Select a solid, dotted, or dashed line as the border.

Effects

Parameter

Description

Elevation

Set an elevation (configured in Themes & Styling) on the element.

Opacity

Increase or decrease an element's transparency.

Updated 3 months ago


What's Next

Themes & Styling

Additional Layout and Style Options


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.