Logo

Geekaxon

Welcome User

  • Light Mode Dark Mode Mix Mode
Logo

Geekaxon

Badge With Line

Colors

Theme Primary Success Info Warning Danger Light Dark 
<span class="badge-with-line">
    <span class='badge glow'>Badge</span>
</span>
:root{
    --light-border-color-2: #c1c1c1;
    --light-badge-background-color: #fff;
    --light-badge-text-color: #535353;
    --light-badge-glow-color: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-primary: #6562fb;
    --light-primary-hover-background: #7674ff;
    --light-primary-glow: rgba(101, 98, 251, 0.6) 0 0 5px 1px;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-hover-background: #0dbe54;
    --light-success-1-glow: rgba(0, 170, 68, 0.5) 0 0 5px 1px;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-hover-background: #1fcbff;
    --light-info-1-glow: rgba(6, 185, 239, 0.5) 0 0 5px 1px;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-hover-background: #ffa32c;
    --light-warning-1-glow: rgba(255, 150, 11, 0.6) 0 0 5px 1px;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-hover-background: #ff3939;
    --light-danger-1-glow: rgba(255, 76, 76, 0.6) 0 0 5px 1px;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-glow: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-glow: rgba(99, 99, 99, 0.5) 0 0 5px 1px;
    --light-dark-1-text-color: #fff;
    --dark-border-color-1: #918e99;
}
.badge {
    font-size: 11.998px;
    line-height: 11.998px;
    background-color: var(--light-badge-background-color);
    color: var(--light-badge-text-color);
}
.badge.glow {
    -webkit-box-shadow: var(--light-badge-glow-color);
    box-shadow: var(--light-badge-glow-color);
}
.badge.text-bg-primary {
    background-color: var(--light-primary) !important;
    color: var(--light-primary-text-color) !important;
}
.badge.text-bg-primary.glow {
    -webkit-box-shadow: var(--light-primary-glow) !important;
    box-shadow: var(--light-primary-glow) !important;
}
.badge.text-bg-success {
    background-color: var(--light-success-1) !important;
    color: var(--light-success-1-text-color) !important;
}
.badge.text-bg-success.glow {
    -webkit-box-shadow: var(--light-success-1-glow) !important;
    box-shadow: var(--light-success-1-glow) !important;
}
.badge.text-bg-info {
    background-color: var(--light-info-1) !important;
    color: var(--light-info-1-text-color) !important;
}
.badge.text-bg-info.glow {
    -webkit-box-shadow: var(--light-info-1-glow) !important;
    box-shadow: var(--light-info-1-glow) !important;
}
.badge.text-bg-warning {
    background-color: var(--light-warning-1) !important;
    color: var(--light-warning-1-text-color) !important;
}
.badge.text-bg-warning.glow {
    -webkit-box-shadow: var(--light-warning-1-glow) !important;
    box-shadow: var(--light-warning-1-glow) !important;
}
.badge.text-bg-danger {
    background-color: var(--light-danger-1) !important;
    color: var(--light-danger-1-text-color) !important;
}
.badge.text-bg-danger.glow {
    -webkit-box-shadow: var(--light-danger-1-glow) !important;
    box-shadow: var(--light-danger-1-glow) !important;
}
.badge.text-bg-light {
    background-color: var(--light-light-1) !important;
    color: var(--light-light-1-text-color) !important;
}
.badge.text-bg-light.glow {
    -webkit-box-shadow: var(--light-light-1-glow) !important;
    box-shadow: var(--light-light-1-glow) !important;
}
.badge.text-bg-dark {
    background-color: var(--light-dark-1) !important;
    color: var(--light-dark-1-text-color) !important;
}
.badge.text-bg-dark.glow {
    -webkit-box-shadow: var(--light-dark-1-glow) !important;
    box-shadow: var(--light-dark-1-glow) !important;
}
.badge.badge-xl {
    font-size: 15.68px;
    line-height: 15.68px;
}
.badge.badge-lg {
    font-size: 14px;
    line-height: 14px;
}
.badge.badge-sm {
    font-size: 10.5px;
    line-height: 10.5px;
}
.badge.badge-xsm {
    font-size: 9.52px;
    line-height: 9.52px;
}
.badge-with-line {
    display: block;
    text-align: center;
}
.badge-with-line::before {
    content: "";
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 0%;
    -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background-color: var(--light-border-color-2);
}
.badge-with-line:has(.text-bg-primary)::before {
    background-color: var(--light-primary-hover-background) !important;
}
.badge-with-line:has(.text-bg-success)::before {
    background-color: var(--light-success-1-hover-background) !important;
}
.badge-with-line:has(.text-bg-info)::before {
    background-color: var(--light-info-1-hover-background) !important;
}
.badge-with-line:has(.text-bg-warning)::before {
    background-color: var(--light-warning-1-hover-background) !important;
}
.badge-with-line:has(.text-bg-danger)::before {
    background-color: var(--light-danger-1-hover-background) !important;
}
.badge-with-line:has(.text-bg-light)::before {
    background-color: var(--light-border-color-2) !important;
}
.badge-with-line:has(.text-bg-dark)::before {
    background-color: var(--dark-border-color-1) !important;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/badge/advance/badges.min.css" rel="stylesheet">

This badge style adds a horizontal line across the vertical center of the badge, often seen on signup pages or similar elements. The badge itself remains at the center, and the line extends from either side of it. It can be customized with various classes for size, shape, color, and glowing effects.

Base Structure:

  • .badge-with-line: Contains the badge and centers it within the horizontal line.
  • .badge: Holds the badge content and can be styled with the following classes.

Background Color Options:

  • text-bg-primary: Applies the theme’s primary color.
  • text-bg-success: Green background for success states.
  • text-bg-info: Light blue background for informational tags.
  • text-bg-warning: Yellow background for warning or caution.
  • text-bg-danger: Red background for error or danger alerts.
  • text-bg-light: White or light background for a clean look.
  • text-bg-dark: Dark background for a bold and modern style.

Glow Effect:

  • glow: Adds a subtle glowing effect to the badge for enhanced visibility and emphasis.

Shape Option:

  • rounded-pill: Makes the badge fully rounded, giving it a pill-like appearance for a smooth, modern look.

Size Options:

  • badge-xl: Extra-large badge for a more prominent and eye-catching look.
  • badge-lg: Large badge for better visibility.
  • Normal: Default size if no size class is applied.
  • badge-sm: Small badge for compact and subtle displays.
  • badge-xsm: Extra-small badge for minimal and unobtrusive labels.

This structure allows developers to customize the badge's appearance while maintaining the horizontal line effect for a clean and modern look on UI elements like signup forms.

Alignments

Left Align Center Align Right Align 
<span class="badge-with-line">
    <span class='badge glow'>Badge</span>
</span>
:root{
    --light-border-color-2: #c1c1c1;
    --light-badge-background-color: #fff;
    --light-badge-text-color: #535353;
    --light-badge-glow-color: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-primary: #6562fb;
    --light-primary-hover-background: #7674ff;
    --light-primary-glow: rgba(101, 98, 251, 0.6) 0 0 5px 1px;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-hover-background: #0dbe54;
    --light-success-1-glow: rgba(0, 170, 68, 0.5) 0 0 5px 1px;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-hover-background: #1fcbff;
    --light-info-1-glow: rgba(6, 185, 239, 0.5) 0 0 5px 1px;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-hover-background: #ffa32c;
    --light-warning-1-glow: rgba(255, 150, 11, 0.6) 0 0 5px 1px;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-hover-background: #ff3939;
    --light-danger-1-glow: rgba(255, 76, 76, 0.6) 0 0 5px 1px;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-glow: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-glow: rgba(99, 99, 99, 0.5) 0 0 5px 1px;
    --light-dark-1-text-color: #fff;
    --dark-border-color-1: #918e99;
}
.badge {
    font-size: 11.998px;
    line-height: 11.998px;
    background-color: var(--light-badge-background-color);
    color: var(--light-badge-text-color);
}
.badge.glow {
    -webkit-box-shadow: var(--light-badge-glow-color);
    box-shadow: var(--light-badge-glow-color);
}
.badge.text-bg-primary {
    background-color: var(--light-primary) !important;
    color: var(--light-primary-text-color) !important;
}
.badge.text-bg-primary.glow {
    -webkit-box-shadow: var(--light-primary-glow) !important;
    box-shadow: var(--light-primary-glow) !important;
}
.badge.text-bg-success {
    background-color: var(--light-success-1) !important;
    color: var(--light-success-1-text-color) !important;
}
.badge.text-bg-success.glow {
    -webkit-box-shadow: var(--light-success-1-glow) !important;
    box-shadow: var(--light-success-1-glow) !important;
}
.badge.text-bg-info {
    background-color: var(--light-info-1) !important;
    color: var(--light-info-1-text-color) !important;
}
.badge.text-bg-info.glow {
    -webkit-box-shadow: var(--light-info-1-glow) !important;
    box-shadow: var(--light-info-1-glow) !important;
}
.badge.text-bg-warning {
    background-color: var(--light-warning-1) !important;
    color: var(--light-warning-1-text-color) !important;
}
.badge.text-bg-warning.glow {
    -webkit-box-shadow: var(--light-warning-1-glow) !important;
    box-shadow: var(--light-warning-1-glow) !important;
}
.badge.text-bg-danger {
    background-color: var(--light-danger-1) !important;
    color: var(--light-danger-1-text-color) !important;
}
.badge.text-bg-danger.glow {
    -webkit-box-shadow: var(--light-danger-1-glow) !important;
    box-shadow: var(--light-danger-1-glow) !important;
}
.badge.text-bg-light {
    background-color: var(--light-light-1) !important;
    color: var(--light-light-1-text-color) !important;
}
.badge.text-bg-light.glow {
    -webkit-box-shadow: var(--light-light-1-glow) !important;
    box-shadow: var(--light-light-1-glow) !important;
}
.badge.text-bg-dark {
    background-color: var(--light-dark-1) !important;
    color: var(--light-dark-1-text-color) !important;
}
.badge.text-bg-dark.glow {
    -webkit-box-shadow: var(--light-dark-1-glow) !important;
    box-shadow: var(--light-dark-1-glow) !important;
}
.badge.badge-xl {
    font-size: 15.68px;
    line-height: 15.68px;
}
.badge.badge-lg {
    font-size: 14px;
    line-height: 14px;
}
.badge.badge-sm {
    font-size: 10.5px;
    line-height: 10.5px;
}
.badge.badge-xsm {
    font-size: 9.52px;
    line-height: 9.52px;
}
.badge-with-line {
    display: block;
    text-align: center;
}
.badge-with-line::before {
    content: "";
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 0%;
    -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background-color: var(--light-border-color-2);
}
.badge-with-line:has(.text-bg-primary)::before {
    background-color: var(--light-primary-hover-background) !important;
}
.badge-with-line:has(.text-bg-success)::before {
    background-color: var(--light-success-1-hover-background) !important;
}
.badge-with-line:has(.text-bg-info)::before {
    background-color: var(--light-info-1-hover-background) !important;
}
.badge-with-line:has(.text-bg-warning)::before {
    background-color: var(--light-warning-1-hover-background) !important;
}
.badge-with-line:has(.text-bg-danger)::before {
    background-color: var(--light-danger-1-hover-background) !important;
}
.badge-with-line:has(.text-bg-light)::before {
    background-color: var(--light-border-color-2) !important;
}
.badge-with-line:has(.text-bg-dark)::before {
    background-color: var(--dark-border-color-1) !important;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/badge/advance/badges.min.css" rel="stylesheet">

This component features a horizontal line that visually separates the badge from surrounding content while providing a clean and organized presentation. The badge is centered by default, but alignment can be adjusted as needed.

Alignment Options:

  • Default (Centered): The badge is displayed in the center of the line.
  • Left Alignment: Use the text-start class on the .badge-with-line to align the badge to the left.
  • Right Alignment: Use the text-end class on the .badge-with-line to align the badge to the right.

To customize the appearance of the badge itself, you can apply various classes directly to the inner badge element (class .badge):

Background Color Options:

  • text-bg-primary: Applies the theme’s primary color.
  • text-bg-success: Green background for success states.
  • text-bg-info: Light blue background for informational tags.
  • text-bg-warning: Yellow background for warning or caution.
  • text-bg-danger: Red background for error or danger alerts.
  • text-bg-light: White or light background for a clean look.
  • text-bg-dark: Dark background for a bold and modern style.

Glow Effect:

  • glow: Adds a subtle glowing effect to the badge for enhanced visibility and emphasis.

Shape Option:

  • rounded-pill: Makes the badge fully rounded, giving it a pill-like appearance for a smooth, modern look.

Size Options:

  • badge-xl: Extra-large badge for a more prominent and eye-catching look.
  • badge-lg: Large badge for better visibility.
  • Normal: Default size if no size class is applied.
  • badge-sm: Small badge for compact and subtle displays.
  • badge-xsm: Extra-small badge for minimal and unobtrusive labels.

This setup provides a visually appealing way to present information with a badge, allowing for easy customization and alignment based on the context of use. The classes can be adapted to meet design needs, ensuring the badge fits seamlessly within the overall design of the application.