Dark
Default
Subdued
Extra Subdued
Muted
Primary
Positive
Negative
Rating
Homecomponentsinformational
Text
A versatile way to display text.
Use Text to display textual information.
Even investing in tangible assets like has its risk. And just like with most
risk, property buyers can seek to mitigate any potential risk by taking out
mortgage and by borrowing at a lower loan to security ratio.
In contrast with savings, investments tend to carry
more risk.
Stonk investments are subject to market risks, read all scheme related documents
carefully. The NAVs of the schemes may go up or down depending upon the factors
and forces affecting the securities market including the fluctuations in the
interest rates. The past performance of the stonks is not necessarily indicative
of future performance of the schemes. The Stonks is not guaranteeing or assuring
any dividend under any of the schemes and the same is subject to the availability
and adequacy of distributable surplus. Investors are requested to review the
prospectus carefully and obtain expert professional advice with regard to specific
legal, tax and financial implications of the investment/participation in the
scheme.
Size
Use the size property to change the font size.
Regular size / 16px Small size / 14pxXSmall size / 12pxMicro size / 8px
Large Sizes
You can set larger sizes that visually look like a Heading. This can be useful to semantically use textual elements but visually show a prominent text or heading.
XXLarge size / 28px
XLarge size / 24px
Large size / 18px
Weight
Use the weight property to set the text thickness.
Regular and Normal
Small and Normal
XSmall and Normal
Micro and Normal
Regular and Semibold
Small and Semibold
XSmall and Semibold
Micro and Semibold
Regular and Bold
Small and Bold
XSmall and Bold
Micro and Bold
Alignment
Use the align property to align the text horizontally. This property accepts responsive values.
Align startAlign centerAlign end
Line length
Use the lineLength property to set the maximum line length.
If lineLength doesn't work, make sure you use the as property to set it to a block-level element like p or div.
Visit our home improvement services page. Receive quotes from general contractors, housekeepers, and handymen and more.
Truncation
Use the truncateAfter property to set the number of lines after which the text should truncate.
Use the expandLinkLabel to show a link that reveals the lines hidden due to truncation. The onExpand callback is called when the expand link it tapped.
Colors
Use color to set the text color. It is not recommended to use xxsubdued,
muted or rating on light backdrops due to poor contrast. It is okay to
use them on accessories that are not meant for reading like a – or an icon.
Use inherit to inherit the color from the parent.
Text transformation
Use the transform property to change the casing of the text.
This is lowercaseThis is uppercaseThis is capitalized
Font Variants
Use the fontVariant property to set various the font variants.
This is small-caps0123456789: This is oldstyle-nums0123456789: This is tabular-nums
0123456789: This is proportional-nums
Diagonal fractions: 3/4Ordinals: 1a 2a
You can specify multiple variants too.
The year was 1567. It was a cold and stormy night. The stars were shining and
the moon was full.
Examples
Paragraphs
Alice was beginning to get very tired of sitting by her sister on the bank,
and of having nothing to do: once or twice she had peeped into the book her
sister was reading, but it had no pictures or conversations in it, "and what
is the use of a book," thought Alice, "without pictures or conversations?"
So she was considering in her own mind (as well as she could, for the hot
day made her feel very sleepy and stupid) whether the pleasure of making a
daisy-chain would be worth the trouble of getting up and picking the
daisies, when suddenly a White Rabbit with pink eyes ran close by her.
There was nothing so very remarkable in that; nor did Alice think it so very
much out of the way to hear the Rabbit say to itself, "Oh dear! Oh dear! I
shall be too late!" (when she thought it over afterwards, it occurred to her
that she ought to have wondered at this, but at the time it all seemed quite
natural); but when the Rabbit actually took a watch out of its
waistcoat-pocket, and looked at it, and then hurried on, Alice started to
her feet, for it flashed across her mind that she had never before seen a
rabbit with either a waistcoat-pocket, or a watch to take out of it, and
burning with curiosity, she ran across the field after it, and was just in
time to see it pop down a large rabbit-hole under the hedge.
Nested texts of different weights
Text component may include nested parts of different weights.
Text with icon
Pour votre sécurité, utilisez StarOfService pour échanger avec les professionnels
et payer vos prestations.
API
children
Required
ReactNode
as
ElementType<any>
size
small
large
xxlarge
xlarge
regular
xsmall
micro
weight
normal
semibold
bold
align
lineLength
number
truncateAfter
number
expandLinkLabel
string
color
inherit
white
primary
dark
default
subdued
xsubdued
muted
xmuted
positive
negative
rating
transform
none
capitalize
lowercase
uppercase
fontVariants
FontVariant | FontVariant[]
onExpand
(() => void)
data
DataAttributeMap
itemID
string
itemProp
string
itemRef
string
itemScope
true
false
itemType
string