ComboStrap UI - Note

Undraw My Documents

About

note is a ComboStrap UI component that shows a text that is parenthetic or ancillary to the main text.

Syntax

<note type>
<title>Title</title> or === Title ===
Content
</note>

where:

A note is a superset HTML syntax

For a note inside a paragraph, see the inote component

Example

Info

<note>
<title 4> Informative note </title>
You can also style your [[:docs:component|ComboStrap UI components]] with the [[:docs:styling:style|style attribute]].
</note>
Informative note

You can also style your ComboStrap UI components with the style attribute.

Tip

<note type="tip" >
===== Tip note =====
You can also style your [[:docs:component|ComboStrap UI components]] with [[:docs:styling:spacing|spacing]].
</note>
Tip note

You can also style your ComboStrap UI components with spacing.

Important

<note important >
=== Important note ===
Too little sport is not good for your health
</note>
Important note

Too little sport is not good for your health

Warning

<note type="warning">
=== Warning note ===
Too much sport is not good for your health
</note>
Warning note

Too much sport is not good for your health

Custom Styling

Style

With the style attribute:

<note type="warning" style="width:60%">
<title 4 > Warning note </title>
Too little sport is not good for your health
</note>
Warning note

Too little sport is not good for your health

Horizontal Centering

With the align attribute

<note type="info" align="center" width="200px">
===== Info note =====
Too much sport is not good for your health
</note>
Info note

Too much sport is not good for your health

Inline

If you want to have a inline note, use a inote instead.

When you go to this castel takes the round about <inote tip>Don't forget to enjoy the view !</inote>

When you go to this castel takes the round about Don't forget to enjoy the view !




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Related HowTo's
Undraw Animating
How to center a box component ?

This howto shows you how to center a box component.


Recommended Pages
Bootstrap Default Color
Color - How to specify a Color Value on ComboStrap Component

Color management in ComboStrap
Undraw My Documents
ComboStrap - Component Type

The component type attribute explained
Undraw My Documents
ComboStrap Styling - Class attribute

Because all ComboStrap UI component are implemented as super set HTML element, you can apply the class attributes. The class attribute is used intensively by Bootstrap to apply the Bootstrap...
Undraw My Documents
ComboStrap Styling - Dimension (Width and Height)

Every Box components and even the whole main page dimension may be resized with the styling attributes: and . The width attributes support the following values: length - a length (in pixel,...
Undraw My Documents
ComboStrap Styling - Skin attribute (Button Emphasis Control)

skin is a ComboStrap styling attribute that defines the emphasis level of your button by applying a set of standard styling attribute on: color elevation (shadow) and border where value is one...
Spacing Margin Padding
ComboStrap Styling - Spacing (Margin, Padding)

spacing is the definition of the margin and padding between block component where: margin is a transparent space outside the box (not filled with the background color) padding is the space inside...
Undraw My Documents
ComboStrap UI - Block

A block component is a component that wraps/encapsulate: content such as text, image,... other block component If the component should start at a new line or expand on multiple line and you can...
Undraw Add Content Re Vgqa
ComboStrap UI - Inote (inline note)

The inote is a note that can be added along side a text (ie inline). It gives emphasis on an ancillary text that adds context to the primary text. As a replacement, you could also use: a tooltip ...
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion



Task Runner