---json
{
    "page_id": "556r8mcrr9wxryqsmzo0m"
}
---

====== ComboStrap UI - Note  ======


===== About =====
''note'' is a [[docs:component|ComboStrap UI component]] that shows a text that is parenthetic or ancillary to the main text.


===== Syntax =====

<code dw>
<note type>
<title>Title</title> or === Title ===
Content
</note>
</code>
where:
  * ''title'' is a [[release:deprecated:title|title]]
  * ''type'' may have one of the following value:
    * [[#info]] (Default)
    * [[#important]]
    * [[#tip]]
    * [[#warning]]



<note info>
A note is a [[docs:marki|superset HTML syntax]]
</note>

<note tip>
For a note inside a paragraph, see the [[docs:content:inote|inote component]]
</note>


===== Example =====


==== Info ====

<webcode name="Default">
<code dw>
<note>
<title 4> Informative note </title>
You can also style your [[:docs:component|ComboStrap UI components]] with the [[:docs:styling:style|style attribute]].
</note>
</code>
</webcode>

==== Tip ====

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

==== Important ====

<webcode name="important">
<code dw>
<note important >
=== Important note ===
Too little sport is not good for your health
</note>
</code>
</webcode>

==== Warning ====

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


===== Custom Styling =====

==== Style ====
With the [[docs:styling:style|style attribute]]:
<webcode name="Default">
<code dw>
<note type="warning" style="width:60%">
<title 4 > Warning note </title>
Too little sport is not good for your health
</note>
</code>
</webcode>

==== Horizontal Centering====

With the [[docs:styling:align|align attribute]]
<webcode name="Default">
<code dw>
<note type="info" align="center" width="200px">
===== Info note =====
Too much sport is not good for your health
</note>
</code>
</webcode>

===== Inline =====
If you want to have a inline note, use a [[docs:content:inote|inote]] instead.

<webcode name="InlineNote">
<code dw>
When you go to this castel takes the round about <inote tip>Don't forget to enjoy the view !</inote>
</code>
</webcode>