CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-uikit

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

—

Pending
Overview
Eval results
Files

content-components.mddocs/

Content Components

UIkit's content components provide styling for displaying information including cards, tables, lists, media elements, and content formatting.

Capabilities

Card

Card component for containing and organizing content with consistent styling.

/* Card Base */
.uk-card {
  /* Card container */
  position: relative;
  box-sizing: border-box;
  transition: box-shadow 0.1s ease-in-out;
}

/* Card Variants */
.uk-card-default {
  /* Default card with border */
  background: #fff;
  color: #666;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.uk-card-primary {
  /* Primary themed card */
  background: #1e87f0;
  color: #fff;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.uk-card-secondary {
  /* Secondary themed card */
  background: #222;
  color: #fff;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* Card Structure */
.uk-card-header {
  /* Card header section */
  padding: 15px 20px;
  border-bottom: 1px solid #e5e5e5;
}

.uk-card-body {
  /* Card main content */
  padding: 20px;
}

.uk-card-footer {
  /* Card footer section */
  padding: 15px 20px;
  border-top: 1px solid #e5e5e5;
}

/* Card Media */
.uk-card-media-top,
.uk-card-media-bottom,
.uk-card-media-left,
.uk-card-media-right {
  /* Card media positioning */
  overflow: hidden;
}

/* Card Sizes */
.uk-card-small .uk-card-body {
  /* Small card variant */
  padding: 15px;
}

.uk-card-large .uk-card-body {
  /* Large card variant */
  padding: 30px;
}

/* Card Title */
.uk-card-title {
  /* Card title styling */
  font-size: 18px;
  line-height: 1.4;
  color: #333;
}

/* Card Badge */
.uk-card-badge {
  /* Card badge positioning */
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 1;
}

/* Card Hover */
.uk-card-hover:hover {
  /* Card hover effect */
  box-shadow: 0 14px 25px rgba(0,0,0,0.16);
  transform: translateY(-2px);
}

Usage Examples:

<!-- Basic Card -->
<div class="uk-card uk-card-default uk-card-body">
    <h3 class="uk-card-title">Default</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<!-- Card with Header and Footer -->
<div class="uk-card uk-card-default">
    <div class="uk-card-header">
        <div class="uk-grid-small uk-flex-middle" uk-grid>
            <div class="uk-width-auto">
                <img class="uk-border-circle" width="40" height="40" src="images/avatar.jpg">
            </div>
            <div class="uk-width-expand">
                <h3 class="uk-card-title uk-margin-remove-bottom">Title</h3>
                <p class="uk-text-meta uk-margin-remove-top">April 01, 2016</p>
            </div>
        </div>
    </div>
    <div class="uk-card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="uk-card-footer">
        <a href="#" class="uk-button uk-button-text">Read more</a>
    </div>
</div>

<!-- Card with Media -->
<div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
        <img src="images/photo.jpg" alt="">
    </div>
    <div class="uk-card-body">
        <h3 class="uk-card-title">Media Top</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

Table

Table component with various styling options.

/* Table Base */
.uk-table {
  /* Base table styling */
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 20px;
}

.uk-table th,
.uk-table td {
  /* Table cell styling */
  padding: 16px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e5e5e5;
}

.uk-table th {
  /* Table header styling */
  font-size: 12px;
  font-weight: normal;
  color: #999;
  text-transform: uppercase;
}

/* Table Variants */
.uk-table-striped > tr:nth-of-type(odd),
.uk-table-striped tbody tr:nth-of-type(odd) {
  /* Striped table rows */
  background: #f8f8f8;
}

.uk-table-hover > tr:hover,
.uk-table-hover tbody tr:hover {
  /* Hoverable table rows */
  background: #ffd;
}

.uk-table-middle,
.uk-table-middle td {
  /* Middle-aligned table cells */
  vertical-align: middle !important;
}

/* Table Sizes */
.uk-table-small th,
.uk-table-small td {
  /* Small table variant */
  padding: 10px 12px;
}

.uk-table-large th,
.uk-table-large td {
  /* Large table variant */
  padding: 22px 12px;
}

/* Table Divider */
.uk-table-divider > tr:not(:first-child),
.uk-table-divider > :not(:first-child) > tr,
.uk-table-divider > :first-child > tr:not(:first-child) {
  /* Table with dividers */
  border-top: 1px solid #e5e5e5;
}

/* Responsive Table */
.uk-table-responsive {
  /* Responsive table wrapper */
  overflow-x: auto;
}

Usage Examples:

<!-- Basic Table -->
<table class="uk-table uk-table-striped">
    <thead>
        <tr>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

<!-- Responsive Table -->
<div class="uk-overflow-auto">
    <table class="uk-table uk-table-hover uk-table-middle uk-table-divider">
        <thead>
            <tr>
                <th class="uk-table-shrink"></th>
                <th class="uk-table-small">Name</th>
                <th class="uk-table-small">Email</th>
                <th>Position</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input class="uk-checkbox" type="checkbox"></td>
                <td class="uk-table-link">
                    <a class="uk-link-reset" href="">John Doe</a>
                </td>
                <td class="uk-text-truncate">john.doe@example.com</td>
                <td class="uk-text-nowrap">Web Developer</td>
            </tr>
        </tbody>
    </table>
</div>

List

List styling component for ordered and unordered lists.

/* List Base */
.uk-list {
  /* Base list styling */
  padding: 0;
  list-style: none;
}

.uk-list > li {
  /* List item styling */
  margin-bottom: 5px;
}

/* List Variants */
.uk-list-disc > li {
  /* Disc bullet list */
  list-style: disc inside;
}

.uk-list-decimal > li {
  /* Numbered list */
  list-style: decimal inside;
}

.uk-list-hyphen > li::before {
  /* Hyphen bullet list */
  content: "– ";
  display: inline-block;
}

.uk-list-muted > li::before {
  /* Muted hyphen bullets */
  color: #999 !important;
}

.uk-list-bullet > li::before {
  /* Custom bullet list */
  content: "";
  display: inline-block;
  position: relative;
  top: -2px;
  width: 1.5em;
  height: 1.5em;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg...");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

/* List Dividers */
.uk-list-divider > li:nth-child(n+2) {
  /* List with dividers */
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid #e5e5e5;
}

/* List Striped */
.uk-list-striped > li:nth-of-type(odd) {
  /* Striped list background */
  padding: 5px 10px;
  background: #f8f8f8;
}

/* List Large */
.uk-list-large > li {
  /* Large list spacing */
  margin-bottom: 10px;
}

Usage Examples:

<!-- Basic List -->
<ul class="uk-list">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

<!-- Bullet List -->
<ul class="uk-list uk-list-bullet">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

<!-- List with Dividers -->
<ul class="uk-list uk-list-divider">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

<!-- Navigation List -->
<ul class="uk-list uk-list-striped">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Description List

Description list styling for term-definition pairs.

/* Description List */
.uk-description-list {
  /* Description list container */
  overflow: hidden;
}

.uk-description-list > dt {
  /* Description term */
  color: #333;
  font-size: 14px;
  font-weight: normal;
  text-transform: uppercase;
}

.uk-description-list > dd {
  /* Description definition */
  margin-left: 0;
  color: #666;
}

/* Description List Horizontal */
.uk-description-list-horizontal {
  /* Horizontal description list */
  overflow: hidden;
}

.uk-description-list-horizontal > dt {
  /* Horizontal term */
  width: 160px;
  float: left;
  clear: both;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uk-description-list-horizontal > dd {
  /* Horizontal definition */
  margin-left: 180px;
}

/* Description List Divider */
.uk-description-list-divider > dt:nth-child(n+2) {
  /* Divider above terms */
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}

Usage Examples:

<!-- Basic Description List -->
<dl class="uk-description-list">
    <dt>Description term</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
    <dt>Description term</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
</dl>

<!-- Horizontal Description List -->
<dl class="uk-description-list uk-description-list-horizontal">
    <dt>Description term</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
    <dt>Description term</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</dd>
</dl>

Article

Article content formatting for long-form text content.

/* Article Container */
.uk-article {
  /* Article wrapper */
  display: flow-root;
}

/* Article Title */
.uk-article-title {
  /* Article main title */
  font-size: 36px;
  line-height: 1.2;
  color: #333;
  margin-bottom: 25px;
}

/* Article Lead */
.uk-article-lead {
  /* Article lead paragraph */
  color: #666;
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 25px;
}

/* Article Meta */
.uk-article-meta {
  /* Article metadata */
  font-size: 12px;
  line-height: 1.4;
  color: #999;
  margin-bottom: 20px;
}

.uk-article-meta a {
  /* Article meta links */
  color: #999;
  text-decoration: none;
}

.uk-article-meta a:hover {
  /* Article meta link hover */
  color: #666;
  text-decoration: underline;
}

Usage Examples:

<!-- Article -->
<article class="uk-article">
    <h1 class="uk-article-title">
        <a class="uk-link-reset" href="">Heading</a>
    </h1>

    <p class="uk-article-meta">
        Written by <a href="#">Super User</a> on 12 April 2012. 
        Posted in <a href="#">Blog</a>
    </p>

    <p class="uk-article-lead">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

Comment

Comment thread styling for user-generated content.

/* Comment Container */
.uk-comment {
  /* Comment wrapper */
  display: flow-root;
}

/* Comment Body */
.uk-comment-body {
  /* Comment content container */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Comment Header */
.uk-comment-header {
  /* Comment header section */
  margin-bottom: 20px;
}

/* Comment Title */
.uk-comment-title {
  /* Comment author/title */
  font-size: 16px;
  line-height: 1.4;
  color: #333;
  margin: 0;
}

/* Comment Meta */
.uk-comment-meta {
  /* Comment metadata */
  font-size: 12px;
  line-height: 1.4;
  color: #999;
  margin: 5px 0 0 0;
}

/* Comment Avatar */
.uk-comment-avatar {
  /* Comment avatar positioning */
  margin-right: 15px;
  float: left;
}

/* Comment List */
.uk-comment-list {
  /* Comment thread list */
  padding: 0;
  list-style: none;
}

.uk-comment-list .uk-comment ~ ul {
  /* Nested comment indentation */
  margin: 25px 0 0 0;
  padding-left: 30px;
  list-style: none;
}

/* Comment Primary */
.uk-comment-primary {
  /* Primary/highlighted comment */
  padding: 30px;
  background-color: #f8f8f8;
}

Usage Examples:

<!-- Comment Thread -->
<ul class="uk-comment-list">
    <li>
        <article class="uk-comment uk-comment-primary">
            <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>
                <div class="uk-width-auto">
                    <img class="uk-comment-avatar" src="images/avatar.jpg" width="80" height="80" alt="">
                </div>
                <div class="uk-width-expand">
                    <h4 class="uk-comment-title uk-margin-remove">
                        <a class="uk-link-reset" href="">Author</a>
                    </h4>
                    <ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top">
                        <li><a href="#">12 days ago</a></li>
                        <li><a href="#">Reply</a></li>
                    </ul>
                </div>
            </header>
            <div class="uk-comment-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </article>
        
        <ul>
            <li>
                <article class="uk-comment">
                    <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>
                        <div class="uk-width-auto">
                            <img class="uk-comment-avatar" src="images/avatar.jpg" width="80" height="80" alt="">
                        </div>
                        <div class="uk-width-expand">
                            <h4 class="uk-comment-title uk-margin-remove">
                                <a class="uk-link-reset" href="">Author</a>
                            </h4>
                            <ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top">
                                <li><a href="#">12 days ago</a></li>
                                <li><a href="#">Reply</a></li>
                            </ul>
                        </div>
                    </header>
                    <div class="uk-comment-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                </article>
            </li>
        </ul>
    </li>
</ul>

Progress

Progress indicator component for showing completion status.

/* Progress Bar */
.uk-progress {
  /* Progress container */
  vertical-align: baseline;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: block;
  width: 100%;
  border: 0;
  background-color: #f8f8f8;
  border-radius: 500px;
  overflow: hidden;
}

.uk-progress::-webkit-progress-bar {
  /* Webkit progress bar background */
  background-color: #f8f8f8;
  border-radius: 500px;
  overflow: hidden;
}

.uk-progress::-webkit-progress-value {
  /* Webkit progress bar value */
  background-color: #1e87f0;
  border-radius: 500px;
  transition: width 0.6s ease;
}

.uk-progress::-moz-progress-bar {
  /* Firefox progress bar */
  background-color: #1e87f0;
  border-radius: 500px;
}

Usage Examples:

<!-- Basic Progress -->
<progress class="uk-progress" value="32" max="100"></progress>

<!-- Progress with Label -->
<div class="uk-margin">
    <div class="uk-flex uk-flex-between uk-text-small">
        <div>Progress</div>
        <div>32%</div>
    </div>
    <progress class="uk-progress" value="32" max="100"></progress>
</div>

Badge

Small status indicators and labels.

/* Badge */
.uk-badge {
  /* Badge styling */
  display: inline-block;
  padding: 2px 6px;
  background: #1e87f0;
  line-height: 1.2;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  border-radius: 2px;
}

.uk-badge:empty {
  /* Empty badge (dot) */
  height: 10px;
  width: 10px;
  border-radius: 50%;
  padding: 0;
}

Usage Examples:

<!-- Text Badges -->
<span class="uk-badge">Badge</span>
<span class="uk-badge" style="background-color: #32d296;">Success</span>
<span class="uk-badge" style="background-color: #faa05a;">Warning</span>
<span class="uk-badge" style="background-color: #f0506e;">Danger</span>

<!-- Notification Badge -->
<button class="uk-button uk-button-default">
    Button <span class="uk-badge">1</span>
</button>

<!-- Dot Badge -->
<span class="uk-badge"></span>

Label

Content labeling component.

/* Label */
.uk-label {
  /* Label styling */
  display: inline-block;
  padding: 2px 6px;
  background: #1e87f0;
  line-height: 1.2;
  font-size: 11px;
  color: #fff;
  border-radius: 2px;
  text-transform: uppercase;
}

/* Label Variants */
.uk-label-success {
  /* Success label */
  background-color: #32d296;
}

.uk-label-warning {
  /* Warning label */
  background-color: #faa05a;
}

.uk-label-danger {
  /* Danger label */
  background-color: #f0506e;
}

Usage Examples:

<!-- Basic Labels -->
<span class="uk-label">Default</span>
<span class="uk-label uk-label-success">Success</span>
<span class="uk-label uk-label-warning">Warning</span>
<span class="uk-label uk-label-danger">Danger</span>

<!-- Labels in Content -->
<h3>
    Heading
    <span class="uk-label">New</span>
</h3>

Install with Tessl CLI

npx tessl i tessl/npm-uikit

docs

animation-effects.md

content-components.md

form-components.md

index.md

interactive-components.md

javascript-api.md

layout-components.md

navigation-components.md

utility-classes.md

tile.json