sufi-blazor/docs/components/typography/SbText.md

SbText

A versatile typography component for rendering text with various styles and semantic elements. Supports multiple variants, colors, and alignment options.

Parameters

Parameter	Type	Default	Description
Variant	SbTextVariant	Body	Typography style variant
Tag	string?	null	Override the semantic HTML tag
Color	SbColor	Default	Text color
Align	SbTextAlign	Start	Text alignment (Start, Center, End)
Truncate	bool	false	Truncates text with ellipsis on overflow
Class	string?	null	Additional CSS classes
Style	string?	null	Inline styles
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes

Text Variants

Variant	Default Tag	Description
Body	<p>	Standard body text
BodySmall	<p>	Smaller body text
Caption	<span>	Small caption text
Overline	<span>	Small uppercase text
Code	<code>	Monospace code text

Templates / Slots

Slot	Type	Description
ChildContent	RenderFragment?	Text content

CSS Classes

• sb-text - Base class
• sb-text--body - Body variant
• sb-text--bodysmall - Small body variant
• sb-text--caption - Caption variant
• sb-text--overline - Overline variant
• sb-text--code - Code variant
• sb-text--primary - Primary color
• sb-text--secondary - Secondary color
• sb-text--success - Success color
• sb-text--warning - Warning color
• sb-text--danger - Danger color
• sb-text--align-center - Center aligned
• sb-text--align-end - End aligned
• sb-text--truncate - Text truncation

Examples

Basic Variants

<SbText Variant="SbTextVariant.Body">
    This is regular body text for paragraphs and general content.
</SbText>

<SbText Variant="SbTextVariant.BodySmall">
    This is smaller body text for secondary information.
</SbText>

<SbText Variant="SbTextVariant.Caption">
    Caption text for labels and small annotations
</SbText>

<SbText Variant="SbTextVariant.Overline">
    OVERLINE TEXT
</SbText>

<SbText Variant="SbTextVariant.Code">
    const value = "code";
</SbText>

Colors

<SbText Color="SbColor.Primary">Primary colored text</SbText>
<SbText Color="SbColor.Secondary">Secondary colored text</SbText>
<SbText Color="SbColor.Success">Success colored text</SbText>
<SbText Color="SbColor.Warning">Warning colored text</SbText>
<SbText Color="SbColor.Danger">Danger colored text</SbText>

Text Alignment

<SbText Align="SbTextAlign.Start">Left aligned text</SbText>
<SbText Align="SbTextAlign.Center">Center aligned text</SbText>
<SbText Align="SbTextAlign.End">Right aligned text</SbText>

Custom HTML Tag

@* Render as a <div> instead of default tag *@
<SbText Tag="div" Variant="SbTextVariant.Body">
    Content in a div element
</SbText>

@* Render as a <label> *@
<SbText Tag="label" Variant="SbTextVariant.Caption">
    Form field label
</SbText>

@* Render as a <small> *@
<SbText Tag="small" Variant="SbTextVariant.BodySmall">
    Fine print text
</SbText>

Text Truncation

<div style="width: 200px;">
    <SbText Truncate="true">
        This is a very long text that will be truncated with an ellipsis when it exceeds the container width.
    </SbText>
</div>

Article Content

<article>
    <SbHeading Level="1">Article Title</SbHeading>
    
    <SbText Variant="SbTextVariant.Overline" Color="SbColor.Primary">
        CATEGORY
    </SbText>
    
    <SbText Variant="SbTextVariant.Caption" Color="SbColor.Secondary">
        Published on January 15, 2024 · 5 min read
    </SbText>
    
    <SbText Variant="SbTextVariant.Body">
        Main article content goes here. This is the primary body text
        that makes up the bulk of the article.
    </SbText>
    
    <SbText Variant="SbTextVariant.BodySmall" Color="SbColor.Secondary">
        Additional notes or less important information.
    </SbText>
</article>

Form Field with Labels

<div class="form-field">
    <SbText Tag="label" Variant="SbTextVariant.Caption">
        Email Address
    </SbText>
    <SbTextField @bind-Value="email" />
    <SbText Variant="SbTextVariant.BodySmall" Color="SbColor.Secondary">
        We'll never share your email with anyone else.
    </SbText>
</div>

Code Snippet

<SbText Variant="SbTextVariant.Body">
    To install the package, run:
</SbText>
<SbText Variant="SbTextVariant.Code">
    dotnet add package SufiChain.SufiBlazor
</SbText>

Card with Typography

<SbCard>
    <Header>
        <SbText Variant="SbTextVariant.Overline" Color="SbColor.Primary">
            FEATURED
        </SbText>
        <SbHeading Level="3">Product Name</SbHeading>
    </Header>
    <ChildContent>
        <SbText Variant="SbTextVariant.Body">
            Product description with all the important details about this item.
        </SbText>
        <SbText Variant="SbTextVariant.Caption" Color="SbColor.Secondary">
            SKU: PRD-12345
        </SbText>
    </ChildContent>
</SbCard>

Status Message

<SbText Color="SbColor.Success">
    <SbIcon Name="check-circle" Size="SbSize.Sm" /> Operation completed successfully!
</SbText>

<SbText Color="SbColor.Danger">
    <SbIcon Name="alert-circle" Size="SbSize.Sm" /> An error occurred. Please try again.
</SbText>