linkTitle

The Title component is useful for the title of the page. It will be shown in a prominent manner, will be picked up by CODEDOC's automatic title guessing mechanism, but will not show-up in the content navigation list:

1link> :Title

2link>

3link> Title of The Page

Title of The Page

You can override the default size of the title using size property:

1link> :Title size=32px

2link>

3link> Title of The Page

Title of The Page

linkLead

A title can also have a lead, which is a sentence preceding it, displayed in a smaller font:

1link> :Title lead=The lead will be here

2link>

3link> Title of The Page

The lead will be here 

Title of The Page

You can also override the default size of the lead using leadSize property:

1link> :Title lead=The lead will be here, leadSize=14px

2link>

3link> Title of The Page

The lead will be here 

Title of The Page

linkColor

You can specify the color using color property:

1link> :Title color=#c72c41

2link>

3link> Title of The Page

Title of The Page

Besides standard CSS color values, you can also provide the following special values:

• text (default): will set the color to text color according to theme
• primary: will set the color to primary color according to theme
• primary-contrast: will set the color to primary contrast color (black or white based on brightness of primary color)
• background: will set the color to background color according to theme

These special values have the benefit of adapting to light mode / dark mode and the theme, though if you want to leak the title upon a hero image (via leak property) it might be a better idea to provide a static color for maximizing readability on the hero image.

linkShadow

In case you want to leak the title upon a hero image, sometimes a text-shadow can increase its readability drastically. You can provide that via the shadow property:

1link> :Title shadow=0 2px 6px #0000009e, color=white

2link>

3link> Title of The Page

Title of The Page

Hero image by AbsolutVision from Unsplash