@nitro-ui/utility-text

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Utility Text - Nitro UI</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="../dist/css/text.min.css"> </head> <body class="bg-light"> <header class="bg-white border-bottom"> <div class="container py-5"> <h2 class="font-weight-bold mb-3">Text</h2> <div class="text-muted"></div> </div> </header> <article> <div class="container py-5"> <div class="row"> <div class="col-md-4"> <div class="text-muted">Text Size</div> </div> <div class="col-md-8"> <div class="u-text-1">u-text-1</div> <div class="u-text-2">u-text-2</div> <div class="u-text-3">u-text-3</div> <div class="u-text-4">u-text-4</div> <div class="u-text-5">u-text-5</div> <div class="u-text-6">u-text-6</div> <div class="u-text-7">u-text-7</div> <div class="u-text-8">u-text-8</div> </div> </div> <hr class="mt-4 mb-5"> <div class="row"> <div class="col-md-4"> <div class="text-muted">Text Color</div> </div> <div class="col-md-8"> <div class="text-muted small">u-color-base</div> <div class="u-color-base" style="margin-bottom:12px;">Text color base</div> <div class="text-muted small">u-color-dark</div> <div class="u-color-dark" style="margin-bottom:12px;">Text color dark</div> <div class="text-muted small">u-color-link</div> <div class="u-color-link" style="margin-bottom:12px;">Text color link</div> <div class="text-muted small">u-color-muted</div> <div class="u-color-muted" style="margin-bottom:12px;">Text color muted</div> <div class="text-muted small">u-color-white</div> <div class="u-color-white" style="margin-bottom:12px;">Text color white</div> <div class="text-muted small">u-color-positive</div> <div class="u-color-positive" style="margin-bottom:12px;">Text color positive</div> <div class="text-muted small">u-color-negative</div> <div class="u-color-negative" style="margin-bottom:12px;">Text color negative</div> <div class="text-muted small">u-color-warning</div> <div class="u-color-warning" style="margin-bottom:12px;">Text color warning</div> </div> </div> <hr class="mt-4 mb-5"> <div class="row"> <div class="col-md-4"> <div class="text-muted">Font Weight</div> </div> <div class="col-md-8"> <div class="text-muted small">u-text-light</div> <div class="u-text-light" style="margin-bottom:12px">Font weight light</div> <div class="text-muted small">u-text-normal</div> <div class="u-text-normal" style="margin-bottom:12px">Font weight normal</div> <div class="text-muted small">u-text-medium</div> <div class="u-text-medium" style="margin-bottom:12px">Font weight medium</div> <div class="text-muted small">u-text-semibold</div> <div class="u-text-semibold" style="margin-bottom:12px">Font weight semibold</div> <div class="text-muted small">u-text-bold</div> <div class="u-text-bold" style="margin-bottom:12px">Font weight bold</div> </div> </div> <hr class="mt-4 mb-5"> <div class="row"> <div class="col-md-4"> <div class="text-muted">Core</div> </div> <div class="col-md-8"> <div class="text-muted small">u-text-truncate - Truncate text to 1 line with ellipsis</div> <div class="u-text-truncate" style="margin-bottom:12px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. </div> <div class="text-muted small">u-text-strike</div> <div class="u-text-strike" style="margin-bottom:12px">Text Strike</div> <div class="text-muted small">u-text-clamp - Clamp the sentence to 2 row</div> <div class="u-text-6 u-text-clamp" style="margin-bottom:12px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. </div> <div class="text-muted small">u-text-unstyled - text-decoration: none</div> <div class="u-text-unstyled" style="margin-bottom:12px">Text Unstyled</div> </div> </div> <hr class="mt-4 mb-5"> <div class="row"> <div class="col-md-4"> <div class="text-muted">Responsive</div> <div class="small">mobile, tablet, portable<br/>(Only available for <strong>u-text-{size}</strong> and <strong>u-text-{uppercase/lowercase}</strong>)<br/> *by default $use-u-text--tablet = false </div> </div> <div class="col-md-8"> <div class="text-muted small">u-text-2@mobile</div> <div class="u-text-2@mobile" style="margin-bottom:12px">Text 2 when mobile size</div> <div class="text-muted small">u-text-uppercase@portable</div> <div class="u-text-uppercase@portable">Text uppercase when tablet and mobile size</div> </div> </div> <hr class="mt-4 mb-5"> </div> </article> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>