1====== Text ======
2
3<callout type="tip" icon="true">
4This syntax have two version (lowercase and uppercase).
5
6  * The //lowercase// version ''<nowiki><text></nowiki>'' create a __inline__ element (eg. ''<nowiki><span></nowiki>'').
7  * The //uppercase// version ''<nowiki><TEXT></nowiki>'' create a __block__ element (eg. ''<nowiki><div></nowiki>'').
8
9See the samples.
10</callout>
11
12
13===== Examples =====
14
15==== Alignment ====
16
17Easily realign text to components with text alignment attribute.
18
19<TEXT align="left">Left aligned text.</TEXT>
20
21<TEXT align="center">Center aligned text.</TEXT>
22
23<TEXT align="right">Right aligned text.</TEXT>
24
25<TEXT align="justify">Justified text.</TEXT>
26
27<TEXT align="nowrap">No wrap text.</TEXT>
28
29\\
30
31<code html5>
32<TEXT align="left">Left aligned text.</TEXT>
33<TEXT align="center">Center aligned text.</TEXT>
34<TEXT align="right">Right aligned text.</TEXT>
35<TEXT align="justify">Justified text.</TEXT>
36<TEXT align="nowrap">No wrap text.</TEXT>
37</code>
38
39\\
40
41==== Transformation ====
42
43Transform text in components with text capitalization attribute.
44
45<TEXT transform="lowercase">Lowercased text.</TEXT>
46
47<TEXT transform="uppercase">Uppercased text.</TEXT>
48
49<TEXT transform="capitalize">Capitalized text.</TEXT>
50
51\\
52
53<code html5>
54<text transform="lowercase">Lowercased text.</text>
55<text transform="uppercase">Uppercased text.</text>
56<text transform="capitalize">Capitalized text.</text>
57</code>
58
59\\
60
61==== Contextual colors ====
62
63Convey meaning through color with a handful of emphasis utility attributes. These may also be applied to links and will darken on hover just like our default link styles.
64
65<TEXT type="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</TEXT>
66
67<TEXT type="primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</TEXT>
68
69<TEXT type="success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</TEXT>
70
71<TEXT type="info">Maecenas sed diam eget risus varius blandit sit amet non magna.</TEXT>
72
73<TEXT type="warning">Etiam porta sem malesuada magna mollis euismod.</TEXT>
74
75<TEXT type="danger">Donec ullamcorper nulla non metus auctor fringilla.</TEXT>
76
77\\
78
79<code html5>
80<text type="muted"> [...] </text>
81<text type="primary"> [...] </text>
82<text type="success"> [...] </text>
83<text type="info"> [...] </text>
84<text type="warning"> [...] </text>
85<text type="danger"> [...] </text>
86</code>
87
88\\
89
90==== Contextual backgrounds ====
91
92Similar to the contextual text color attributes, easily set the background of an element to any contextual attribute. Anchor components will darken on hover, just like the text attributes.
93
94<TEXT background="primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</TEXT>
95
96<TEXT background="success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</TEXT>
97
98<TEXT background="info">Maecenas sed diam eget risus varius blandit sit amet non magna.</TEXT>
99
100<TEXT background="warning">Etiam porta sem malesuada magna mollis euismod.</TEXT>
101
102<TEXT background="danger">Donec ullamcorper nulla non metus auctor fringilla.</TEXT>
103
104\\
105
106<code html5>
107<text background="primary"> [...] </text>
108<text background="success"> [...] </text>
109<text background="info"> [...] </text>
110<text background="warning"> [...] </text>
111<text background="danger"> [...] </text>
112</code>
113
114\\
115
116===== Options =====
117
118<datatable info="false" paging="false" searching="true">
119^ Attribute      ^ Allowed Values ^ Description ^
120| ''type''       | ''muted'' ''primary'' ''success'' ''info'' ''warning'' ''danger'' | Contextual color of text |
121| ''background'' | ''primary'' ''success'' ''info'' ''warning'' ''danger'' | Contextual background of text |
122| ''align''      | ''left'' ''right'' ''center'', ''justify'' ''nowrap'' | Text align |
123| ''transform''  | ''lowercase'' ''uppercase'' ''capitalize'' | Text transformation |
124| ''size''       | ''medium'' ''xx-small'' ''x-small'' ''small'' ''large'' ''x-large'' ''xx-large'' ''smaller'' ''larger'' //''length''// //(%, em, px, etc.)// | Text sizes |
125</datatables>