Panel

Create layout boxes with different styles.

Clique.UI 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.


Usage

The 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.

NOTE 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 .panel-box class.

Usage

  • Class Description
    .panel Add this class to a <div> element to define the Panel component.
    .panel-title Add this class to a heading to create the panel title.
    .panel-badge 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.
  • Badge

    Panel Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <div class="panel">
        <div class="panel-badge badge">...</div>
        <h3 class="panel-title">...</h3>
        ...
    </div>

Modifiers

Modifier classes are necessary to add a specific style to panels. Clique.UI includes a number of panel modifiers, and of course you can always create your own.

Panel box

Add the .panel-box class to create a visually styled box. This is the default panel modifier.

Usage

  • Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • <div class="panel panel-box">
        <h3 class="panel-title">...</h3>
        ...
    </div>

Panel box primary

Add the .panel-box-primary class to modify the box panel and emphasize it with a different color.

Usage

  • Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • <div class="panel panel-box panel-box-primary">
        <h3 class="panel-title">...</h3>
        ...
    </div>

Panel box secondary

The .panel-box-secondary class provides a secondary style modifier to the Panel component. By default, the background is white with a darker border and font color.

Usage

  • Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • <div class="panel panel-box panel-box-secondary">
        <h3 class="panel-title">...</h3>
        ...
    </div>

Panel hover

Add the .panel-hover class to add a hover effect to the panel. This comes in handy when using the panel as an anchor.

Usage


Panel header

Add the .panel-header class to separate the panel title and content with a horizontal line.

Usage

  • Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • <div class="panel panel-header">
        <h3 class="panel-title">...</h3>
        ...
    </div>

Panel space

Add the .panel-space class to increase the spacing around the panel content.

NOTE The example below utilizes the .panel-secondary class so as to show the increased spacing around each panel, but is not necessary when using this class and thus isn't included in the "Markup" section.

Usage

  • Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • <div class="panel panel-space">
        <h3 class="panel-title">...</h3>
        ...
    </div>

Panel divider

Add the .panel-divider class to separate vertically stacked panels with lines.

Usage

  • Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • <div class="panel panel-divider">...</div>
    <div class="panel panel-divider">...</div>
    <div class="panel panel-divider">...</div>

Panel box with teaser

To display an image inside a panel box that is attached to the border of the panel without any spacing, just add the .panel-teaser class to a <div> element inside the panel.

Usage

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • <div class="panel panel-box">
        <div class="panel-teaser">
            <img src="images/placeholder.svg">
        </div>
        <p>...</p>
    </div>