Text

Typography utilities for alignment, transform, weight, decoration, wrap behaviour, and font family. Every class emits with !important — these are escape hatches that must beat any component-level rule.

How it works

Alignment uses the .has-text-* prefix (.has-text-left, -center, -right, -justify). The three flow directions (left, center, right) also get four responsive variants suffixed -tablet, -desktop, -widescreen, -fullhd, each scoped via the framework's from(<breakpoint>) mixin.
Transform, decoration, wrap, and family classes use the framework .is-* prefix (.is-uppercase, .is-italic, .is-truncated, …).
Weight uses a dedicated .has-text-weight-* prefix to disambiguate from colour helpers (.has-text-primary).
.is-truncated is the canonical three-property combo (white-space: nowrap + overflow: hidden + text-overflow: ellipsis); use .is-nowrap or .is-text-break alone for the partial behaviours.

Live

Alignment

Live

.has-text-left

.has-text-center

.has-text-right

.has-text-justify spreads across the available width when the line is long enough to break.

HTML

<div style="display: grid; gap: 0.25rem;">
<p class="has-text-left" style="background: var(--kc-default-bg);">.has-text-left</p>
<p class="has-text-center" style="background: var(--kc-default-bg);">.has-text-center</p>
<p class="has-text-right" style="background: var(--kc-default-bg);">.has-text-right</p>
<p class="has-text-justify" style="background: var(--kc-default-bg);">.has-text-justify spreads across the available width when the line is long enough to break.</p>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-text')
);

Playground

Transform and style

Live

.is-uppercase .is-LOWERCASE .is-capitalized words .is-italic

HTML

<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
<span class="is-uppercase">.is-uppercase</span>
<span class="is-lowercase">.is-LOWERCASE</span>
<span class="is-capitalized">.is-capitalized words</span>
<span class="is-italic">.is-italic</span>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-text')
);

Playground

Weights

Live

light 300 normal 400 medium 500 semibold 600 bold 700

HTML

<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
<span class="has-text-weight-light">light 300</span>
<span class="has-text-weight-normal">normal 400</span>
<span class="has-text-weight-medium">medium 500</span>
<span class="has-text-weight-semibold">semibold 600</span>
<span class="has-text-weight-bold">bold 700</span>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-text')
);

Playground

Truncate and wrap

Live

.is-truncated really long label that overflows .is-nowrap never breaks across lines .is-text-break supercalifragilisticexpialidocious

HTML

<div style="display: grid; gap: 0.5rem; max-width: 14rem;">
<span class="is-truncated" style="background: var(--kc-default-bg);">.is-truncated really long label that overflows</span>
<span class="is-nowrap" style="background: var(--kc-default-bg);">.is-nowrap never breaks across lines</span>
<span class="is-text-break" style="background: var(--kc-default-bg);">.is-text-break supercalifragilisticexpialidocious</span>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-text')
);

Playground

Markup

<p class="has-text-center">Centered text</p>
<p class="has-text-right-tablet">Right-aligned from tablet up</p>

<span class="is-uppercase">stamped header</span>
<span class="is-italic">aside</span>

<p class="has-text-weight-bold">Important sentence.</p>
<p class="has-text-weight-light">Quiet caption.</p>

<a class="is-underlined" href="#">Underlined link</a>
<s class="is-line-through">Was 49</s>
<a class="is-no-decoration" href="#">Pristine link</a>

<div class="is-truncated" style="max-width: 12rem;">Overflowing label gets clipped with an ellipsis.</div>
<code class="is-family-monospace">id_4f8a</code>

Class reference

Category	Classes
Alignment (base)	`.has-text-left`, `.has-text-center`, `.has-text-right`, `.has-text-justify`
Alignment (responsive)	`.has-text-{left,center,right}-{tablet,desktop,widescreen,fullhd}` — 12 classes total. `justify` has no responsive variants.
Transform	`.is-uppercase`, `.is-lowercase`, `.is-capitalized`, `.is-italic`
Weight	`.has-text-weight-light` (300), `-normal` (400), `-medium` (500), `-semibold` (600), `-bold` (700)
Decoration	`.is-underlined`, `.is-line-through`, `.is-no-decoration`
Wrap / overflow	`.is-truncated`, `.is-nowrap`, `.is-text-break`
Family	`.is-family-sans-serif`, `.is-family-monospace`

Variables

Variable	Default	Notes
`$selector-prefix-has`	`'.has-text-'` (derived from `variables.$selector-prefix-has`)	Prefix for alignment, weight, and colour helper classes. Rebrands automatically if you globalise the framework-wide `.has-` convention.
`$selector-prefix-is`	`'.is-'` (from framework root)	Prefix for transform / decoration / wrap / family classes.
`$weights`	`(light: 300, normal: 400, medium: 500, semibold: 600, bold: 700)`	Map of class-name suffix to `font-weight` value.
`$alignments`	`(left, center, right, justify)`	Alignment values that get a base un-suffixed class.
`$alignments-responsive`	`(left, center, right)`	Alignment values that also get per-breakpoint variants. `justify` is excluded by default.
`$breakpoints`	`(tablet, desktop, widescreen, fullhd)`	Breakpoint keys used as suffixes for responsive alignment. Each must exist in `variables.$responsive-breakpoints`.

Override example

@use '@adnap/krysalicss/helper/text' with (
  // Trim or extend the weight ladder:
  $weights: (
    regular: 400,
    bold:    700,
  ),
  // Pick which breakpoints emit responsive align variants:
  $breakpoints: (tablet, desktop),
  // Or restrict which alignments get responsive variants:
  $alignments-responsive: (left, right),
);

Tokens consumed

None — text helpers emit literal CSS values. For colour-aware text use the Color helpers which route through the var-aware textColor mixin.