Upgrade

Explore

Development

Pages

Elements

Advanced multi-part components with lots of possibilities .

  • Button

    Easily create nice looking .buttons,which come in different styles

    Basic

    Basic Size 

    <buttonclass="button small">Xsmall</button><buttonclass="button">Default</button><buttonclass="button Large">Large</button><buttonclass="button xlarge">xlarge</button>


    Button Colors

    There are several style modifiers available. Just add one of the following classes to apply a different look.

    .success.secondary.danger.success.info.dark.grey.dark .white .light

    <buttonclass="button danger">danger</button>

    Outline Button

    <buttonclass="button outline-success">success</button>

    Soft color

    <buttonclass="button  soft-success">success</button>

    add .disabledto make disable 


    <buttonclass="button soft-success disabled">Soft success</button>

    Button transition 3d hover

    <buttonclass="button success transition-3d-hover">Soft success</button>

    Button Social

    Button with icon

    Button with icon animation

  • Card

    Create layout boxes with different styles.

    Usage:

    By default,a card is blank. That is why it is important to add a modifier class for styling. In our example we are using the .uk-card-defaultclass.

    PREVIEW

    Default

    Lorem ipsum dolorsit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Style modifiers

    UIkit includes a number of modifiers that can be used to add a specific style to cards.
    .uk-card-default.uk-card-success .uk-card-secondary or you can use Backgroundcompounents . and .uk-light

    PREVIEW

    Default

    Lorem ipsum dolor sit amet,consectetur adipisicing elit.

    success

    Lorem ipsum dolor sit amet,consectetur adipisicing elit.

    Secondary

    Lorem ipsum dolor sit amet,consectetur adipisicing elit.

    Default

    Lorem ipsum dolor sit amet,consectetur adipisicing elit.

    Default

    Lorem ipsum dolor sit amet,consectetur adipisicing elit.

    Default

    Lorem ipsum dolor sit amet,consectetur adipisicing elit.

    Hover modifier

    To create a hover effect on the card,add the .uk-card-hoverclass. This comes in handy when working with anchors and can be combined with the other card modifiers.

    PREVIEW

    Hover

    Lorem ipsum dolor sit amet,consectetur adipisicing elit.

    Default

    Lorem ipsum dolor sit amet,consectetur adipisicing elit.

    success

    Lorem ipsum dolor sit amet,consectetur adipisicing elit.

    Secondary

    Lorem ipsum dolor sit amet,consectetur adipisicing elit.

    Size modifier

    You can apply different size modifiers to cards that will decrease or increase their padding.

    PREVIEW

    Small

    Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Large

    Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    You can also divide a card into header and footer — around the default body. Just add the .uk-card-headeror .uk-card-footerclass to a <div>element inside the card.

    PREVIEW

    Title

    Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt.

    Read more

    Media modifiers.

    To display an image inside a card without any spacing,add one of the following classes to a <div>around the <img>element. Mind that you need to modify the source order accordingly.

    PREVIEW

    Media Top

    Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt.

    Media Bottom

    Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt.

    Horizontal alignment

    PREVIEW

    Media Left

    Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt.

    Media Right

    Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt.

  • Background

    A collection of utility classes to add different backgrounds to elements.

    Uikit backgrounds

    To apply a background color to an element,add one of the following classes. The actual color for each modifier is defined by the UIkit style that you have chosen or customized.

    .uk-background-default .uk-background-muted .uk-background-success .uk-background-secondary


    Default

    Muted

    success

    Secondary

    Theme backgrounds

    To apply a background color to an element,add one of the following classes:
    .bg-White .bg-success .bg-Danger .bg-success .bg-success .bg-info .bg-grey .bg-Dark



    White

    success

    Danger

    Success

    success

    Info

    Grey

    Dark

    Light

    NoteTo change the text inside the element to light use this class uk-light.

    Theme soft backgrounds

    To apply a background color to an element,add one of the following classes:
    .bg-soft-success .bg-soft-Danger .bg-soft-success .bg-soft-success .bg-soft-info .bg-soft-grey .bg-soft-Dark



    White

    success

    Danger

    Success

    success

    Info

    Dark

    Gradient backgrounds

    To apply a background color to an element,add one of the following classes:
    .bg-gradient-success .bg-gradient-Danger .bg-gradient-success .bg-gradient-success .bg-gradient-info .bg-gradient-grey .bg-gradient-dark .bg-gradient-light



    success

    Danger

    Success

    success

    Info

    Dark

    Grey

    Light

    Text Colors


    .uk-text-muted.uk-text-emphasis.uk-text-primar.uk-text-secondary.uk-text-success.uk-text-success.uk-text-info

  • Flex

    Utilize the power of flexbox to create a wide range of layouts.

    To apply the flexbox layout modal,use one of the following classes. By default,all flex items are aligned to the left,as wide as their content and matched in height.

    PREVIEW
    Item 1
    Item 2
    Item 3

    Horizontal alignment

    These classes define the horizontal alignment of flex items and distribute the space between them. Add one or more of them to the flex container in order to configure the alignments of the flex items. By default,flex items are aligned to the left as does the class.

    PREVIEW
    ClassDescription
    .uk-flex-leftAdd this class to align flex items to the left.
    .uk-flex-centerAdd this class to center flex items along the main axis.
    .uk-flex-rightAdd this class to align flex items to the right.
    .uk-flex-betweenAdd this class to distribute items evenly,with equal space between the items along the main axis.
    .uk-flex-aroundAdd this class to distribute items evenly with equal space on both sides of each item.
    Item 1
    Item 2
    Item 3

    Vertical alignment

    These classes define the vertical alignment of flex items. By default,flex items fill the height of their container as does the .uk-flex-stretchclass.

    PREVIEW
    ClassDescription
    .uk-flex-stretchAdd this class to expand flex items to fill the height of their parent.
    .uk-flex-topAdd this class to align flex items to the top.
    .uk-flex-middleAdd this class to center flex items along the cross axis.
    .uk-flex-bottomAdd this class to align flex items to the bottom.
    Item 1
    Item 2
    ...
    Item 3
    ...
    ...

    Flex and grid

    The Flex component can be combined with a grid from the Grid component.

    PREVIEW

    Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna.

    Image

    Direction modifiers

    These classes define the axis that flex items are placed on and their direction. By default,items run horizontally from left to right as does the .uk-flex-rowclass.

    PREVIEW
    ClassDescription
    .uk-flex-rowAdd this class to lay out flex items as horizontal rows.
    .uk-flex-row-reverseAdd this class to lay out flex items from right to left.
    .uk-flex-columnAdd this class to lay out flex items as vertical columns.
    .uk-flex-column-reverseAdd this class to lay out flex items from bottom to top.
    Item 1
    Item 2
    Item 3

  • Form

    Easily create nice looking forms with different styles and layouts.

    Add one of the following classes to form controls inside a

    element to define them.
    ClassDescription
    .uk-inputAdd this class to <input>elements.
    .uk-selectAdd this class to <select>elements.
    .uk-textareaAdd this class to <textarea>elements.
    .uk-radioAdd this class to <input type="radio">elements to create radio buttons.
    .uk-checkboxAdd this class to <input type="checkbox">elements to create checkboxes.
    .uk-rangeAdd this class to <input type="range">elements to create range forms.
    Legend

    States modifiers

    Add one of the classes to an <input>,<select>or <textarea>element to modify its size.

    ClassDescription
    .uk-form-dangerAdd this class to notify the user that the value is not validated.
    .uk-form-successAdd this class to notify the user that the value is validated.

    Size modifiers

    Provide the user with basic information through feedback states on form controls by using one of the following classes.


    ClassDescription
    .uk-form-largeAdd this class to make the element larger.
    .uk-form-smallAdd this class to make the element smaller.

    Width modifiers

    Provide the user with basic information through feedback states on form controls by using one of the following classes.

    ClassDescription
    .uk-form-width-largeApplies a width of 500px.
    .uk-form-width-mediumApplies a width of 200px.
    .uk-form-width-smallApplies a width of 130px.
    .uk-form-width-xsmallApplies a width of 40px.

    Horizontal form

    Use the .uk-form-controls-textclass to better align checkboxes and radio buttons when using them with text in a horizontal layout.

    Radio

    Form and icons

    The icon has to come first in the markup. By default,the icon will be placed on the left side of the form. To change the alignment,add the .uk-form-icon-flip class.


    Clickable icons

    To enable an action,for example opening a modal to pick an image or link,use an <a>or <button>element to create the icon.


    Form and grid

    You can also use the Gridcomponents to define the layout of a form.


    Custom controls

    To replace a file inputs or select forms with your own HTML content,like a button or text,add the uk-form-customattribute to a container element.


    Here is a text
    upload

  • Grid

    Create a fully responsive,fluid and nestable grid layout.

    Usage:

    To create the grid container,add the uk-gridattribute to a <div>element. Add child <div>elements to create the cells. By default,all grid cells are stacked. To place them side by side,add one of the classes from the Width component . Using .uk-child-width-expandwill automatically apply equal width to items,regardless of how many there are.

    PREVIEW
    Item
    Item
    Item

    Gutter modifiers

    The Grid component comes with a default gutter that is decreased automatically from a certain breakpoint usually on a smaller desktop viewport width. To apply a different gutter,add one of the following classes.

    PREVIEW
    Item
    Item
    Item
    PREVIEW
    Item
    Item
    Item
    PREVIEW
    Item
    Item
    Item

    Nested grid

    You can easily extend your grid layout with nested grids.

    PREVIEW
    Item
    Item
    Item

    Grid and width

    The grid is mostly used in combination with the Width component. This allows for great flexibility when determining the column widths.

    PREVIEW
    Auto
    1-3
    Expand

    Child width

    If the grid columns are evenly split,you can add one of the .uk-child-width-*classes to the grid container instead of adding a class to each of the items.

    you can add one of this .uk-child-width-1-2.uk-child-width-1-3.uk-child-width-1-4.uk-child-width-1-5 .uk-child-width-1-6

    PREVIEW
    Item
    Item
    Item

  • Icons

    Place scalable vector icons anywhere in your content.

    Available Icons

    You have access to more than thousands icons provided freely by FontAwesome,Material icons,Line Awesome Icons,and Feather icons.

    Icon size

    You can use .icon-tiny.icon-small.icon-medium.icon-large.icon-xlargeand .icon-xxlarge.


    Button with icon

    Button with icon animation


  • List

    Easily create nice looking lists,which come in different styles.

    To apply this component,add the .uk-listclass to an unordered or ordered list. The list will now display without any spacing or list-style.

    • List item 1
    • List item 2
    • List item 3

    Bullet modifier

    Add the .uk-list-bulletclass to display bullets in front of the list items.

    • List item 1
    • List item 2
    • List item 3

    Divider modifier

    Add the .uk-list-dividerclass to separate list items with lines.

    • List item 1
    • List item 2
    • List item 3

    Striped modifier

    Add the .uk-list-dividerclass to separate list items with lines.

    • List item 1
    • List item 2
    • List item 3

    Large modifier

    Add the .uk-list-largeclass to increase the spacing between list items. You can combine this with any of the other list modifiers.

    Default

    • List item 1
    • List item 2
    • List item 3

    Divider

    • List item 1
    • List item 2
    • List item 3

    Striped

    • List item 1
    • List item 2
    • List item 3

    Bullet

    • List item 1
    • List item 2
    • List item 3

  • pagination

    Easily create a nice looking pagination to navigate through pages.

    The Pagination component consists of button-like styled links,that are aligned side by side in a horizontal list.

    PREVIEW

    Alignment

    The pagination component utilizes flexbox,so navigations can easily be aligned with the Flex component.

    <ulclass="uk-pagination uk-flex-center">...</ul>
    PREVIEW

    Previous and next

    To apply a previous and next button,add the uk-pagination-previousor uk-pagination-nextattribute to a <span>element inside a pagination item.

    PREVIEW

  • Position

    A collection of utility classes to position content

    To apply this component,add one of the .uk-position-*classes to a block element. When using this component to place content on top of an image,add the .uk-inlineclass from the Utility componentto a container element around the image and the element to create a position context.

    ClassDescription
    .uk-position-topPositions the element at the top.
    .uk-position-leftPositions the element at the left.
    .uk-position-rightPositions the element at the right.
    .uk-position-bottomPositions the element at the bottom.
    Top
    Bottom
    Left
    Right

    X and Y directions

    You can also apply more specific positions that won't spread over one side of the parent container by adding one of the following classes.

    Top Left
    Top Center
    Top Right
    Center Left
    Center
    Center Right
    Bottom Left
    Bottom Center
    Bottom Right

    Cover

    If you want a position element to cover its container, just add the .uk-position-cover class.

    Cover

    Small modifier

    To apply a small margin to positioned elements, add the .uk-position-small or .uk-position-medium and .uk-position-large class.

    Top Left
    Top Center
    Top Right
    Center Left
    Center
    Center Right
    Bottom Left
    Bottom Center
    Bottom Right
    Top
    Bottom
    Left
    Right
    Cover
    Out
    Out

    Utility classes

    This component features a number of general position utility classes:

    Class Description
    .uk-position-relative Add this class to apply relative positioning.
    .uk-position-absolute Add this class to apply absolute positioning.
    .uk-position-fixed Add this class to apply fixed positioning.
    .uk-position-z-index Add this class to apply a z-index of 1.

    Outside

    There are two classes to center elements outside on the left and right of the parent container. This is useful to position the Slidenav component outside of an Slideshow or Slider component.

    Out
    Out

  • Table

    Easily create nice looking tables, which come in different styles.

    To apply this component, add the .uk-table class to a <table> element. element.

    Table Heading Table Heading Table Heading
    Table Footer Table Footer Table Footer
    Table Data Table Data Table Data
    Table Data Table Data Table Data

    Divider modifier 

    <table class="uk-table uk-table-divider">...</table>

    Add the .uk-table-divider class to display a divider between table rows.

    Table Heading Table Heading Table Heading
    Table Data Table Data Table Data
    Table Data Table Data Table Data
    Table Data Table Data Table Data

    Striped modifier 

    <table class="uk-table uk-table-striped">...</table>

    Add zebra-striping to a table by adding the .uk-table-striped class.

    Table Heading Table Heading Table Heading
    Table Data Table Data Table Data
    Table Data Table Data Table Data
    Table Data Table Data Table Data

    Responsive table

    <div class="uk-overflow-auto">
            <table class="uk-table">...</table>
        </div>

    If your table happens to be wider than its container element or would eventually get too big on a specific viewport width, just wrap it inside a <div> element and add the .uk-overflow-auto class .. This creates a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself

    Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
    Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
    Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
    Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data

  • Tab

    Create a tabbed navigation with different styles.

    The tab component consists of clickable tabs, that are aligned side by side in a list. Its JavaScript functionality extends the Switcher component and is necessary to dynamically transition through different contents using the tabbed navigation.

    Bottom modifier

    Add the .uk-tab-bottom class to flip tab items to the bottom.

    Left/Right modifier

    Add the .uk-tab-left or .uk-tab-right class to align tabs vertically to the left or right side. To save space, the alignment automatically switches back to horizontal when the viewport width goes below 960px.

    Alignment

    You can combine tabs with the Flex component or the Width component to modify the alignment of the navigations.

    Tabs and Dropdown

    Tabs can be used to trigger a dropdown menu from the Dropdown component

    light Tabs

    .uk-light to change your tabs to light and background compunents

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat

    Advance tab

    Tabs can be used to trigger a dropdown menu from the Dropdown component

    Awesome Title

    With supporting text below as a natural lead-in to additional content.

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat

    tab width icon

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis.
      Eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis.
      Eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis.
      Eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis.
      Eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat

    Responsive Tabs










    Awesome Title

    With supporting text below as a natural lead-in to additional content.



  • Text

    A collection of useful text utility classes to style your content.

    UIkit offers various text utilities to style your text.

    Class Description
    .uk-text-lead Add this class to highlight text, for example in article subtitles.
    .uk-text-meta Add this class to a paragraph which contains meta data about an article or similar.

    Font size

    The following classes will modify the font size of your text..

    Class Description
    .uk-text-small Add this class to decrease the font size.
    .uk-text-large Add this class to increase the font size.

    Text wrapping

    Add one of these useful classes to wrap your text.

    Class Description
    .uk-text-truncate Prevents text from wrapping into multiple lines, truncating it and displaying an ellipsis instead.
    .uk-text-break Breaks strings, if their length exceeds the width of their container.
    .uk-text-nowrap Prevents text from wrapping into multiple lines.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.

    Text transform

    The following classes will transform text into uppercased, capitalized or lowercased characters.

    Class Description
    .uk-text-uppercase Add this class to transform your text to uppercase.
    .uk-text-capitalize Add this class to transform your text to capitalize.
    .uk-text-lowercase Add this class to transform your text to lowercase.

    Text Colour

    Use one of these classes to apply a different color to text elements.

    Class Description
    .uk-text-muted Add this class to mute text.
    .uk-text-emphasis Add this class to emphasize text.
    .uk-text-success Add this class to emphasize text with the success color.
    .uk-text-secondary Add this class to emphasize text with the secondary color.
    .uk-text-success Add this class to indicate success.
    .uk-text-success Add this class to indicate a success.
    .uk-text-danger Add this class to indicate danger.
    .uk-text-info Add this class to indicate informations.

    Text alignment

    Add one of these useful classes to align your text.

    Class Description
    .uk-text-left Aligns text to the left.
    .uk-text-right Aligns text to the right.
    .uk-text-center Centers text horizontally.
    .uk-text-justify Justifies text.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-left
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-right
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-center

    Vertical alignment

    Add one of these classes to vertically align text to an object.

    Class Description
    .uk-text-top Aligns text to the top.
    .uk-text-middle Centers text vertically.
    .uk-text-bottom Aligns text to the bottom.
    .uk-text-baseline Aligns text to the baseline.
    Lorem ipsum.
    Lorem ipsum.
    Lorem ipsum.

    Text background

    To apply a gradient or background image to text, add the .uk-text-background class to a <span> element inside the text element. Styles that don't define a background-image,will apply the success color.

    Text background