Your Site Name

1300 123 456

Get a Quote

Components general attributes

Each component is a "template" from which to build a section of the page. They can contain text, grids, images, etc... All of them are different in purpose and reach, but they have a number of shared attributes that can be modified for each of them. These are:

  • Background colour / Background image
  • Padding top / Padding bottom
  • Container width
  • Border bottom
  • Header content
  • Footer content

Background Colour

The background colour of a section can be chosen from a predefined set of colours (that can be agreed on at the beginning of the project). These usually include a primary color, a secondary color and grey, the three of them with variations of brightness or hue. Additionally, we can select an image as a background. If we do so, we have to be aware of the colour of the image and the content, as a dark background colour will generate light content colour, and vice-versa. This means that if we choose a dark image, we might want to choose a dark colour as Background Color.


Both top and bottom paddings can be set up to have different heights: None, Normal, Thin, Minimum, Wide and Huge. This values (top and bottom) are independent from each other. For example, we can remove the padding in the bottom by setting it to None and have a Normal padding at the top.

Container Width

Components have a maximum width that prevents them from spanning across the whole window width. This maximum width can be changed with the Container Width property (under Extra Layout). The different options are: Normal, Full (no maximum width), Small or Tiny. This components, for example, has a Small width.

Border bottom

Whenever we need to add to consecutive component with the same colour, we can add a border bottom to the first one so there is some kind of visual separation between the two of them. This option is under Extra Layout and, again, it needs to be added to the first component (because it's a "border bottom").


WYSIWYG stands for What You See Is What You Get and it's a simple way to write that will look loosely similar to its final output on the site. There are some useful classes in the component library to be used when filling text. One of the most important concepts is that all heading will look the same unless we provide them with a specific heading class. Here's some of them:

Hero Heading




Primary Button

Secondary Button

Ghost Button

White Ghost Button

  • Bullet point
  • Bullet point
  • Bullet point


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


  • Tick list
  • Tick list
  • Tick list