March Documentation

Prebuilt styles

Instead of building one module as one static layout or style, all Hatch modules have their own Appearance setting. Each setting set is unique to that module, which means you can create hundreds of different design combinations from one module only.  

To speed up your page creation process, Hatch modules come with 6 Prebuilt styles:

  1. None
  2. Border
  3. Box
  4. Card
  5. Card with Border
  6. Custom

1. None

The module is displayed in its original layout without any appearance style including background, border, or shadow.

Image 2020-12-01 at 10.48.54 PM.jpg?source=viewer&v=7f87b1048286feedeee59a94758aa30a

2. Border

Wrap the module with a thin border. Color can be customized under the Appearance > Border folder once the Prebuilt Style option is set to Border.

Image 2020-12-01 at 10.50.02 PM.jpg?source=viewer&v=085c6540963c2de0f5ba5aa5ab4255d5

3. Box

Wrap the module with a background color. 

Image 2020-12-01 at 10.54.59 PM.jpg?source=viewer&v=b6c67afd2b46b32b5094e75d427ebe22

Once the option is selected, you can choose between Background Color, Image, or Gradient

Image 2020-12-01 at 10.56.09 PM.jpg?source=viewer&v=f01ac054b68b517bf0f5226fb3ca7ef7

4. Card

Similar to the Box prebuilt style, but Card has a shadow around the module.

Image 2020-12-01 at 10.57.33 PM.jpg?source=viewer&v=5ef9d0e3f1782c0743f0e6efeefcbd00

Once the option is selected, you can also choose between Background Color, Image, or Gradient

Image 2020-12-01 at 10.56.09 PM.jpg?source=viewer&v=f01ac054b68b517bf0f5226fb3ca7ef7

5. Card with Border

A combination of Card and Border prebuilt styles. 

Once enabled, you can customize both background and border options.

Image 2020-12-01 at 11.02.54 PM.jpg?source=viewer&v=e3fcfbd1dcb4939efa1d41883aa9981f

6. Custom

Looking to build your own module design/appearance? No problem!

Select Custom, and you can customize it to the fullest including:

  1. Background
  2. Border
  3. Border Radius
  4. Shadow
  5. Padding

How custom can we achieve? Here are some ideas:

Image 2020-12-01 at 11.10.08 PM.jpg?source=viewer&v=ddc768e94c8db71d56050793cf3aca02
Image 2020-12-01 at 11.25.59 PM.jpg?source=viewer&v=d9e794b934801852afffe9706e71784d
Image 2020-12-01 at 11.27.39 PM.jpg?source=viewer&v=02ed0b86c60232bb66ce352b8536d62b