unibz Pattern Library

Text 

<!-- Text transform -->

<div class="u-tt-uppercase">
    Make text uppercase.
</div>

<div class="u-tt-caps">
    Make text uppercase (alias).
</div>

<div class="u-tt-lowercase">
    Make text lowercase.
</div>

<div class="u-tt-capital">
    make text capitalized.
</div>

<!-- Text align -->

<div class="u-ta-center">
    Center text
</div>

<div class="u-ta-right">
    Text right on mobile
</div>

<div class="u-ta-center u-ta-left@sm">
    Text centered, aligned left from small table onward
</div>

<!-- Letter spacing -->

<div class="u-ls-1">
    Add letter spacing
</div>

<!-- Text decoration -->

<div>
    <span class="u-td-underline">
    Underlined text (on inline element)
  </span>
</div>

<!-- Font family -->

<div class="u-ff-mono">
    Mono spaced font-family
</div>

<!-- Font size -->

<div class="u-fs-sm">
    Small text
</div>

<div class="u-fs-h4">
    Text in h4 size
</div>

<!-- Line height -->

<div class="u-lh-sm">
    Smaller line height (1.2)
</div>

<!-- Color -->

<div class="u-c-inverse" style="background: black">
    Inverse text
</div>

<div class="u-c-mute">
    Muted text
</div>

<div class="u-c-fade">
    Light text
</div>

<div class="u-c-error">
    Error text
</div>

<div class="u-c-theme">
    Theme colored text (default)
</div>
<div class="u-c-theme-focus" tabindex="0">
    Theme colored text when focused
</div>

<div class="t-edu">
    <div class="u-c-theme">
        Theme colored text (.t-edu)
    </div>
    <div class="u-c-theme-focus" tabindex="0">
        Theme colored text when focused
    </div>
</div>

<div class="t-lll">
    <div class="u-c-theme">
        Theme colored text (.t-lll)
    </div>
    <div class="u-c-theme-focus" tabindex="0">
        Theme colored text when focused
    </div>
</div>

<div class="t-dsgn">
    <div class="u-c-theme">
        Theme colored text (.t-dsgn)
    </div>
    <div class="u-c-theme-focus" tabindex="0">
        Theme colored text when focused
    </div>
</div>

<div class="t-econ">
    <div class="u-c-theme">
        Theme colored text (.t-econ)
    </div>
    <div class="u-c-theme-focus" tabindex="0">
        Theme colored text when focused
    </div>
</div>

<div class="t-comp">
    <div class="u-c-theme">
        Theme colored text (.t-comp)
    </div>
    <div class="u-c-theme-focus" tabindex="0">
        Theme colored text when focused
    </div>
</div>

<div class="t-scitec">
    <div class="u-c-theme">
        Theme colored text (.t-scitec)
    </div>
    <div class="u-c-theme-focus" tabindex="0">
        Theme colored text when focused
    </div>
</div>

<div class="t-library">
    <div class="u-c-theme">
        Theme colored text (.t-library)
    </div>
    <div class="u-c-theme-focus" tabindex="0">
        Theme colored text when focused
    </div>
</div>

<!-- Font weight -->

<div class="u-fw-light">
    Light Text
</div>

<div class="u-fw-normal">
    Normal text
</div>

<div class="u-fw-semi">
    Semi bold text
</div>

<div class="u-fw-bold">
    Bold text
</div>

<!-- Truncate -->

<div class="u-truncate" style="width: 250px">
    Truncated text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio eget.
</div>

<!-- Wordbreak -->

<div class="u-wordBreak" style="width: 150px">
    longname.asemailadress@some-long-domain.com
</div>
 
<!-- Text transform -->

<div class="u-tt-uppercase">
  Make text uppercase.
</div>

<div class="u-tt-caps">
  Make text uppercase (alias).
</div>

<div class="u-tt-lowercase">
  Make text lowercase.
</div>

<div class="u-tt-capital">
  make text capitalized.
</div>

<!-- Text align -->

<div class="u-ta-center">
  Center text
</div>

<div class="u-ta-right">
  Text right on mobile
</div>

<div class="u-ta-center u-ta-left@sm">
  Text centered, aligned left from small table onward
</div>

<!-- Letter spacing -->

<div class="u-ls-1">
  Add letter spacing
</div>

<!-- Text decoration -->

<div>
  <span class="u-td-underline">
    Underlined text (on inline element)
  </span>
</div>

<!-- Font family -->

<div class="u-ff-mono">
  Mono spaced font-family
</div>

<!-- Font size -->

<div class="u-fs-sm">
  Small text
</div>

<div class="u-fs-h4">
  Text in h4 size
</div>

<!-- Line height -->

<div class="u-lh-sm">
  Smaller line height (1.2)
</div>

<!-- Color -->

<div class="u-c-inverse" style="background: black">
  Inverse text
</div>

<div class="u-c-mute">
  Muted text
</div>

<div class="u-c-fade">
  Light text
</div>

<div class="u-c-error">
  Error text
</div>

<div class="u-c-theme">
  Theme colored text (default)
</div>
<div class="u-c-theme-focus" tabindex="0">
  Theme colored text when focused
</div>

<div class="t-edu">
  <div class="u-c-theme">
    Theme colored text (.t-edu)
  </div>
  <div class="u-c-theme-focus" tabindex="0">
    Theme colored text when focused
  </div>
</div>

<div class="t-lll">
  <div class="u-c-theme">
    Theme colored text (.t-lll)
  </div>
  <div class="u-c-theme-focus" tabindex="0">
    Theme colored text when focused
  </div>
</div>

<div class="t-dsgn">
  <div class="u-c-theme">
    Theme colored text (.t-dsgn)
  </div>
  <div class="u-c-theme-focus" tabindex="0">
    Theme colored text when focused
  </div>
</div>

<div class="t-econ">
  <div class="u-c-theme">
    Theme colored text (.t-econ)
  </div>
  <div class="u-c-theme-focus" tabindex="0">
    Theme colored text when focused
  </div>
</div>

<div class="t-comp">
  <div class="u-c-theme">
    Theme colored text (.t-comp)
  </div>
  <div class="u-c-theme-focus" tabindex="0">
    Theme colored text when focused
  </div>
</div>

<div class="t-scitec">
  <div class="u-c-theme">
    Theme colored text (.t-scitec)
  </div>
  <div class="u-c-theme-focus" tabindex="0">
    Theme colored text when focused
  </div>
</div>

<div class="t-library">
  <div class="u-c-theme">
    Theme colored text (.t-library)
  </div>
  <div class="u-c-theme-focus" tabindex="0">
    Theme colored text when focused
  </div>
</div>

<!-- Font weight -->

<div class="u-fw-light">
  Light Text
</div>

<div class="u-fw-normal">
  Normal text
</div>

<div class="u-fw-semi">
  Semi bold text
</div>

<div class="u-fw-bold">
  Bold text
</div>

<!-- Truncate -->

<div class="u-truncate" style="width: 250px">
  Truncated text {{ text }}
</div>

<!-- Wordbreak -->

<div class="u-wordBreak" style="width: 150px">
  longname.asemailadress@some-long-domain.com
</div>
 
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio eget.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio eget.",
  "linkTarget": "_self",
  "url": "https://www.unibz.it",
  "image": "/assets/bridge-524-295.jpg"
}

Text utilities

Text transform

.u-tt-<text-transform value>

<text-transform value>

  • uppercase = make text uppercase
  • caps = make text uppercase (alias)
  • lowercase = make text lowercase
  • capital = capitalize every word in the text

Text align

.u-ta-<text-align value>@<media-query>

<text-align value>

  • center = make text centered
  • right = align text to the right
  • left = align text to the left

<media-query>

  • (nothing) = applies to all screen sizes
  • sm = applies from small tablet onward

Letter spacing

Separate letters by 1px

<div class="u-ls-1">
  Lorem ipsum
</div>

Text decoration

To be consistent with the general style this utility class uses border-bottom: 1px solid, so it needs to be used on inline elements only. In case you need to underline text inside a block element wrap the text with an inline element (e.g. span).

<span class="u-td-underline">
  Underline a inline element.
</span>

<h1>
  <span class="u-td-underline">
    Underline text inside a block element using a inline element.
  </span>
</h1>

Font family

<div class="u-ff-mono">
  This text will be mono-spaced
</div>

Font size

.u-fs-<font-size value>

<font-size value>

  • sm = small font size (14px)
  • h4 = font-size eqiovalent to h4 (but none of the other styles, 1.125em)

Line Height

<div class="u-lh-sm">
  Line height for this element will be 1.2
</div>

Color

.u-c-<color value>

<color value>

  • inverse = white text for use on negative / dark backgrounds
  • mute = gray text
  • fade = very light gray text
  • error = red text
  • theme = text in theme color (See section Base/Defaults)
  • theme-focus = set text in theme color on :focus

Font-weight

.u-fw-<font-weight value>

<font-weight value>

  • light = set font-weight to 300
  • normal = set font-weight to 400 - normal
  • semi = set font-weight to 600
  • bold = set font-weight to 700 - bold

Truncate text

<div class="u-truncate">
  This text will run in only one line and be cut with an ellipsis if it does not fit in the line.
</div>

Break word

Break a long word into multiple lines. Useful for long email addresses.

<a href="mailto:longname.asemailadress@some-long-domain.com">
  longname.asemailadress@some-long-domain.com
</a>