> For the complete documentation index, see [llms.txt](https://normal-tangerine8609.gitbook.io/html-widget/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://normal-tangerine8609.gitbook.io/html-widget/about/types.md).

# Types

Types For Attributes And Properties

All attributes and CSS properties have a certain type. All properties and attributes can be written in camelCase or kebab-case, but types **must** be written only in camelCase. If the value for these attributes or CSS properties is of a different type, an error will be raised. Here are all of the types that the attributes and CSS properties can be. 

**alignContent**

Value must be `top`, `bottom` or `center`.

**alignImage**

Value must be `left`, `right` or `center`.

**alignText**

Value must be `left`, `right` or `center`.

**applyStyle**

Value must be `date`, `timer` , `relative`, `time`, or `offset`.

**bool**

Value can be anything but `"null"` or `"false"` (`"true"` is advised).

These tags all have the same fake bool attribute set to `true`:

```html
<widget>
  <style>
    date {
      bool: true;
    }
  </style>
  <text bool=""></text>
  <date></date>
</widget>
```

**colour**

Value must be one or two HTML-supported colours separated by hyphens. HTML supported colours include hsl, hsla, rgb, rgba, hex or CSS colour names like `red`. If there are two colours, the first is the light mode colour, and the second is the dark mode colour. Hex colours are recommended, since they are natively supported in Scriptible, which reduces render time.

**contentMode**

Value must be `filling` or `fitting`.

**decimal**

Value must be a positive integer or float (decimal) with an optional `%` directly at the end.

**font**

Value must be a valid font name and then a positive integer separated by commas. The font name can also be a pre-set font, such as `boldSystemFont`, `lightMonospacedSystemFont` or `regularRoundedSystemFont` . A font based on its content, like `largeTitle` must not have a positive integer or a comma.

**gradient**

Value must be one or more HTML-supported colours or groups of light mode/dark mode colours separated by commas. Light mode/dark mode colour groups are created by splitting the light and dark colours by a hyphen with the light colour as the first colour. Example: `red, white-black, blue`. HTML-supported colours include hsl, hsla, rgb, rgba, hex or CSS colour names like `red`. Hex colours are recommended, since they improve render time.

The value can also have an optional direction or degree as the first parameter. The direction options are `to top`, `to bottom`, `to right`, `to left`, `to top right`, `to top left`, `to bottom right`, `to bottom left`., `to left top`, `to left bottom`, `to right top` and `to right bottom`. A degree is a number, and the keyword `deg` directly beside (`90deg`). Example: `to top left, #ff00ff, rgb(0,255,0)-rgb(255,0,255), hsl(180, 50%,70%)`. The default gradient direction is `to bottom` (`0deg`).

Besides the colour or colour groups, there is an optional location value. The location must be equal to or between 0 and 1 or be a percentage (`50%`). Locations must also go in accessing order. Example: `50deg, red 10%, blue 50%, green 0.7`.

**image**

Value must be a valid url leading to an image or a data url starting with `data:image/jpeg;base64,` or `data:image/png;base64,` and with the base encoded image following.

**layout**

Value must be `vertically` or `horizontally`.

**padding**

Value must be one to four positive integers separated by commas. The value can also be `default` to set the default padding. When positive integers are provided, they match the standard CSS shorthand values. If there is only one, all sides will have the same padding. With two, the first is the top and bottom padding, and the second is the right and left padding. When there are three integers, the first is the top, the second is left and right, and the third is the bottom. With four, the order is top, right, bottom, then left.

**point**

Value must be 2 integers (they can be negative) separated by commas. The first integer is the x, and the second is the y.

**posInt**

Value must be a positive integer (satisfy `\d+` regex).

**size**

Value must be two positive integers separated by commas. The first integer is the width, and the second is the height.

**url**

Value must be a valid URL.

### Additional Information

All attributes and properties, no matter the type, can have a value as `"null"`. This makes it so that the attribute or property is not set. The `background` attribute is not set in the following example:

```html
<widget background="null">
  <!-- You only need the one, the attribute or property to be set to null -->
  <style>
    widget {
      background: null;
    }
  </style>
</widget>
```

All tags also have the `class` attribute. This attribute is used with the `<style>` tag. The value must be one or more word characters, including hyphens separated by spaces.

All tags also have the `child` bool attribute. This will do nothing to the tags and is only used for the [templates](/html-widget/template/template.md).

All tags also have the `no-css` bool attribute. This will make CSS not affect the tag, and its style will not change. This is mainly used for the [templates](/html-widget/template/template.md).