Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Border

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

Additive

Java code:

List<BorderBehavior.Type> additiveTypes = Lists.newArrayList(
    BorderBehavior.Type.All,
    BorderBehavior.Type.Top,
    BorderBehavior.Type.Right,
    BorderBehavior.Type.Bottom,
    BorderBehavior.Type.Left
);
add(new ListView<BorderBehavior.Type>("additive-border-types", additiveTypes) {

    @Override
    protected void populateItem(ListItem<BorderBehavior.Type> item) {
       BorderBehavior.Type type = item.getModelObject();
       Label label = new Label("border-type", "");
       label.add(new BorderBehavior().type(type).color(BorderBehavior.Color.Dark));
       item.add(label);
   }
});

HTML code:

<wicket:container wicket:id="additive-border-types">
    <span wicket:id="border-type" class="mb-2 p-2"></span>
</wicket:container>

Subtractive

Border color

Change the border color using utilities built on our theme colors.

Java code:

List<BorderBehavior.Color> colors = Lists.newArrayList(BorderBehavior.Color.values());
add(new ListView<BorderBehavior.Color>("border-colors", colors) {

    @Override
    protected void populateItem(ListItem<BorderBehavior.Color> item) {
        BorderBehavior.Color color = item.getModelObject();
        Label label = new Label("border-color", "");
        label.add(new BorderBehavior().color(color).type(BorderBehavior.Type.All));
        item.add(label);
    }
});

HTML code:

<div class="border rounded mb-5 p-2">
    <wicket:container wicket:id="border-colors">
        <div wicket:id="border-color"></div>
    </wicket:container>
</div>

Border-radius

Add classes to an element to easily round its corners.

Java code:

List<BorderBehavior.Radius> radiuses = Lists.newArrayList(BorderBehavior.Radius.values());
add(new ListView<BorderBehavior.Radius>("border-radiuses", radiuses) {
    @Override
    protected void populateItem(ListItem<BorderBehavior.Radius> item) {
        BorderBehavior.Radius radius = item.getModelObject();
        ExternalImage img = new ExternalImage("border-radius", "http://placehold.it/260x180");
        img.add(new BorderBehavior().radius(radius));
        item.add(img);
    }
});

HTML code:

<div class="border rounded mb-5 p-2">
    <wicket:container wicket:id="border-radiuses">
        <div wicket:id="border-radius"></div>
    </wicket:container>
</div>

Colors

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Color

text-primary

text-secondary

text-success

text-danger

text-warning

text-info

text-light

text-dark

text-body

text-muted

text-white

text-black

text-black-50

text-white-50

Java code:

add(new ListView<ColorBehavior.Color>("text-colors", colors) {

    protected void populateItem(ListItem<ColorBehavior.Color> item) {
         ColorBehavior.Color color = item.getModelObject();
         Label label = new Label("color", Model.of(color.cssClassName()));
         label.add(new ColorBehavior(color));

         switch (color) {
             case White:
             case Light:
             case White50:
                 label.add(BackgroundColorBehavior.dark());
                 break;
             default:
                 break;
         }

         item.add(label);
    }
});

HTML code:

<div class="border rounded mb-5 p-2">
    <wicket:container wicket:id="text-colors">
        <div wicket:id="color" class="mb-2 p-2"></div>
    </wicket:container>
</div>

Contextual text classes also work well on anchors with the provided hover and focus states. Note that the .text-white and .text-muted class has no link styling.

Background color

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.

bg-primary

bg-secondary

bg-danger

bg-warning

bg-info

bg-success

bg-light

bg-dark

bg-white

bg-transparent

Java code:

add(new ListView<BackgroundColorBehavior.Color>("background-colors", colors) {

    protected void populateItem(ListItem<BackgroundColorBehavior.Color> item) {
        BackgroundColorBehavior.Color color = item.getModelObject();
        Label label = new Label("color", Model.of(color.cssClassName()));

        switch (color) {
            case Transparent:
            case White:
            case Light:
                label.add(ColorBehavior.dark());                break;
            default:
                label.add(ColorBehavior.white());
                break;
        }

        label.add(new BackgroundColorBehavior(color));
        item.add(label);
    }
});

HTML code:

    <div class="border rounded mb-5 p-2">
        <wicket:container wicket:id="background-colors">
            <div wicket:id="color" class="mb-2 p-2"></div>
        </wicket:container>
    </div>