css

make labels or badges look better

Posted in css
387
6:09 am, December 31, 2020

make labels or badges look better

How to make these look better.

The labels are used in the list items to show a small version of the category or sometimes the view count for a list item.

How they look currently

Dark Mode

Light Mode

I was thinking that as the text flows down to the next line they kinda look a bit odd, so some changes are needed.

As always when you re-use elements, if i change it in one spot it changes in a bunch of other spots whitch i discovered later. 

Here is how it looks after a few changes.

Dark Mode

Light Mode

I think this change makes it look a bit neater, maybe still need to tweak the border a bit to make it stand out slightly less. 

The css and html changes are below as well. 

I had to make the outer elements relative, so i could set the badges out a bit of the elements, then they dont take up as much of the real estate inside the main text area.

make labels or badges look better Demo

View Demo Full Screen View Demo New Tab

make labels or badges look better Code

HTML

<h2 class='mb20'>List Group Demo</h2>
<div class="list-group">
    <a href="/view/code/9YAe4/make-labels-or-badges-look-better/" class="list-group-item list-group-item-action text-truncate" title="make labels or badges look better" data-toggle="tooltip"><span class="badge badge-info">css</span> make labels or badges look better</a>  
<a href="/view/code/06BMq/include-tinymce-only-if-a-user-is-logged-into-the-site/" class="list-group-item list-group-item-action text-truncate" title="include tinymce only if a user is logged into the site" data-toggle="tooltip"><span class="badge badge-info">php</span> include tinymce only if a user is logged into the site</a>  
<a href="/view/code/UXcP1/test-page-for-the-custom-css-12-grid-used-on-this-site/" class="list-group-item list-group-item-action text-truncate" title="test page for the custom css 12 grid used on this site" data-toggle="tooltip"><span class="badge badge-info">html</span> test page for the custom css 12 grid used on this site</a>  
<a href="/view/code/hVfXg/easy-twitter-embed-code/" class="list-group-item list-group-item-action text-truncate" title="easy twitter embed code" data-toggle="tooltip"><span class="badge badge-info">html</span> easy twitter embed code</a>  
<a href="/view/code/kWRvb/how-to-add-jquery-to-squarespace-site/" class="list-group-item list-group-item-action text-truncate" title="How to add jquery to squarespace site" data-toggle="tooltip"><span class="badge badge-info">javascript</span> How to add jquery to squarespace site</a>  
<a href="/view/code/SHZ3z/make-an-image-white-with-css-using-filter-brightness-and-invert/" class="list-group-item list-group-item-action text-truncate" title="make an image white with css using filter brightness and invert" data-toggle="tooltip"><span class="badge badge-info">css</span> make an image white with css using filter brightness and invert</a>  
<a href="/view/code/ZDkzL/add-a-jquery-date-picker-to-your-text-box/" class="list-group-item list-group-item-action text-truncate" title="add a jquery date picker to your text box" data-toggle="tooltip"><span class="badge badge-info">jquery</span> add a jquery date picker to your text box</a>  
<a href="/view/code/Dy3Nq/foundation-old-grid-format/" class="list-group-item list-group-item-action text-truncate" title="foundation old grid format" data-toggle="tooltip"><span class="badge badge-info">css</span> foundation old grid format</a>  

    </div>

CSS

/* Make List Group Relative */
.list-group a, .core-link a {
    display: block;
    padding: 10px 25px 10px 8px;
    /* text-transform: capitalize; */
    background-image: url(data:image/svg+xml,%3Csvg width='20px' height='16px' viewBox='0 0 16 16' class='bi bi-chevron-right' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center;
    position: relative;
}

/* Base Badge */
.badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    position: absolute;
    left: -10px;
    top: -10px;
    border: 2px solid;
    border-radius: 30px;
    text-shadow: 0px 1px 2px #000;
    box-shadow: 0px 1px 2px #111827;
}

/* Light Mode */
.light-mode .badge-info {
    color: #fff;
    background-color: #38b2ac;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
    text-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}

/* Dark Mode */
.dark-mode .badge-info {
    color: #fff;
    background-color: #2e3c50;
    border: 2px solid;
    border-color: rgb(17 24 39);
}
Posted in css
387
6:09 am, December 31, 2020

Related Tags

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in css
using css counter-increment to add numbering to elements hidden scroll anchor for custom scroll position ken burns slow image zoom using a radial gradient for background overlay change selected color on input elements css animated duck on footer using filter grayscale to make an image dark bootstrap dark mode twitter icon font awesome how to bundle css files together using windows or mac button with separated chevron vertically align text within a fixed height div using flex how to view a web page in its printer format white space break word css roboto and poppins fonts include quick code CSS Drawing - Beach Scene 404 Error Page Codepen right align something in its element hide the third row in a table with css how to make a transparent logo white with css target last item css with :last-of-type target first item css with :first-of-type responsive menu research full screen multi level make your images look non squished when not using image backgrounds v2 target 1st td in a table with css backdrop-filter: blur(10px); add chevrons to a ul list foundation responsive tables allow a title to be in the foreground while still having a before overlay for the background css responsive max and min targets @media pre-line white space settings pre-wrap preserve line spacing but also wrap where needed css double page document preview with shadow adding a background image to the titles of the dark mode card on this page blur the background image while keeping the foreground normal background image greyscale filter while foreground is still in colour zoom background of element when active rounded click me button with icon logo tickers marquee slow scrolling add a moving chevron to your href link inline form field padding using text-stroke to add a border to your text adding background blur to an image using css fill screen using the nth-of-type selector to target a class with the same name github logo background png css animated rings expanding with delay ripple water effects css slow zoom in animation using the last-of-type css selector to remove a border from the last item in a list box hover over effects using pulsate animation using multiple text shadow
Related Search Terms
css space 31
css svg 31
css php 11
css jquery 51
css javascript 13
css html 14
css foundation 34
css css 6
css core 37
Other Categories in Code
testing apache apps asp bat bootstrap core css design elements fancybox fonts foundation framework gimp git html ideas images javascript jquery js linux nginx php php functions python react sections site bugs site documentation sql sublime svg templates tools webdev windows wordpress
php

php return json header and content

php functions

php get file extension from a file name

php functions

php post data back to a url with a function

bootstrap

add a divider to your dropdown nav toggles

php functions

generate random username function in php

Search Code
Search Code by entering your search text above.
API