Create layout boxes with different styles.
\n\nUIkit uses panels to outline certain sections of your content, which can be styled differently. Typically, panels are arranged in grid columns from the Grid component.
\n\n\n\n
Usage
\n\nThe Panel component consists of the panel itself, the panel title and a panel badge. To prevent redundant white space, top and bottom margins are removed from the panel’s content.
\n\nClass | \nDescription | \n
---|---|
.uk-panel | \n Add this class to a <div> element to define the Panel component. | \n
.uk-panel-title | \n Add this class to a heading to create the panel title. | \n
.uk-panel-badge | \n Add this class to a <div> element to create a panel badge. The easiest way to style your badge, is by adding the modifier classes from the Badge component. | \n
Example
\n\nTitle
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\nNOTE By default, a panel is blank and has no styling. That is why it is important to add a modifier class, which gives the panel some styling. In our examples we used the .uk-panel-box
class.
Markup
\n\n<div class="uk-panel">\n <div class="uk-panel-badge uk-badge">...</div>\n <h3 class="uk-panel-title">...</h3>\n ...\n</div>
\n\n \n\n
Panels in a grid
\n\nThis is a short example of how to use panels with the Grid component. Both panels are using the .uk-width-medium-1-2
class.
Example
\n\nTitle
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.\nTitle
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.\nMarkup
\n\n<div class="uk-grid">\n <div class="uk-width-medium-1-2">\n <div class="uk-panel">...</div>\n </div>\n <div class="uk-width-medium-1-2">\n <div class="uk-panel">...</div>\n </div>\n</div>
\n\n \n\n
Modifiers
\n\nModifier classes are necessary to add a specific style to panels. UIkit includes a number of panel modifiers and you also have the possibility to create your own.
\n\nPanel box
\n\nAdd the .uk-panel-box
class to create a visually styled box. This is the default panel modifier.
Example
\n\nTitle
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-box
\n Title
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-box
\n Title
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-box
\n Markup
\n\n<div class="uk-panel uk-panel-box">...</div>
\n\n NOTE To create a hover effect on the panel, just add the .uk-panel-box-hover
class. This comes in handy when working with anchors.
\n\n
Panel box primary
\n\nAdd the .uk-panel-box-primary
class to modify the box panel and emphasize it with a different color.
Example
\n\nTitle
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-box-primary
\n Title
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-box-primary
\n Title
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-box-primary
\n Markup
\n\n<div class="uk-panel uk-panel-box uk-panel-box-primary">...</div>
\n\n NOTE To create a hover effect on the panel, just add the .uk-panel-box-primary-hover
class. This comes in handy when working with anchors.
\n\n
Panel box secondary
\n\nAdd the .uk-panel-box-secondary
class to modify the box panel and give it a white background.
Example
\n\nTitle
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-box-secondary
\n Title
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-box-secondary
\n Title
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-box-secondary
\n Markup
\n\n<div class="uk-panel uk-panel-box uk-panel-box-secondary">...</div>
\n\n NOTE To create a hover effect on the panel, just add the .uk-panel-box-secondary-hover
class. This comes in handy when working with anchors.
\n\n
Panel hover
\n\nAdd the .uk-panel-hover
class to add a hover effect to the panel. This comes in handy when using the panel as an anchor.
Example
\n\nMarkup
\n\n<a class="uk-panel uk-panel-hover" href="">...</a>
\n\n \n\n
Panel header
\n\nAdd the .uk-panel-header
class to separate the panel title and content with a horizontal line.
Example
\n\nTitle
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-header
\n Title
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-header
\n Title
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-header
\n Markup
\n\n<div class="uk-panel uk-panel-header">...</div>
\n\n \n\n
Panel space
\n\nAdd the .uk-panel-space
class to increase the spacing around the panel content.\n\n
Example
\n\nTitle
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-space
\n Title
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-space
\n Title
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-space
\n Markup
\n\n<div class="uk-panel uk-panel-space">...</div>
\n\n \n\n
Panel divider
\n\nAdd the .uk-panel-divider
class to separate vertically stacked panels with lines.
Example
\n\nTitle
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-divider
\n Title
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-divider
\n Title
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-divider
\n Markup
\n\n<div class="uk-grid">\n <div class="uk-width-medium-1-2">\n <div class="uk-panel uk-panel-divider">...</div>\n <div class="uk-panel uk-panel-divider">...</div>\n <div class="uk-panel uk-panel-divider">...</div>\n </div>\n</div>
\n\n NOTE Use the .uk-grid-divider
class from the Grid component to separate grid columns.
\n\n
Panel box with teaser
\n\nTo display an image inside a panel box that is attached to the border of the panel without any spacing, just add the .uk-panel-teaser
class to a <div>
element inside the panel.
Example
\n\nLorem ipsum dolor sit amet, consectetur adipisicing elit.
\nMarkup
\n\n<div class="uk-panel uk-panel-box">\n <div class="uk-panel-teaser">\n <img src="" alt="">\n </div>\n</div>
\n\n \n\n
Panel with icons
\n\nEasily apply an icon from our Icon component to your panel by adding one of the .uk-icon-*
classes to an <i>
or <span>
element inside the panel title.
Example
\n\nPanel
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\nPanel
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\nPanel
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\nMarkup
\n\n<div class="uk-panel">\n <h3 class="uk-panel-title"><i class="uk-icon-*"></i>...</h3>\n</div>
\n