Looking for a Stack like "Label"

Classic Stacks
1

Hey all.

I love the Label Stack that comes with Foundry. The only trouble is, it’ll only work in projects using Foundry.

Any ideas on an alternate stack? I could use a button stack without a link or use a Bootstap button, but I’d rather find a stack that I could use on multiple projects. The Label stack is so easy to use. I could also import the Foundry base stack + label, but I’m not sure how that’d work on a non-Foundry theme.

Apple uses this technique frequently on their site. I love how it looks.

Thanks!

Screen Shot 2017-04-22 at 5.24.34 PM.png2028×1728 1.08 MB

2

The Bootstrap Outline Button is just one short line of code:

<a class="btn btn-xs btn-danger-outline" href="http://example.com/">My Button</a>

You can make a Partial and reuse it indefinitely. It’s like having your own Button stack. You can change the color of the button by substituting “danger” with “primary”, “secondary”, “info”, “success” or “warning”. You can also remove a link from the code, if you wish.

1 Like
3

Why not just copying the CSS from Google Chrome and create your now labels?

Example:

<style type="text/css">
    .label {
        display: inline-block;
        padding: 0.25em 0.4em;
        font-size: 75%;
        font-weight: bold;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 4px;
        margin-bottom: 0.5rem;
        background-color: rgba(235, 235, 235, 1.00);
        color: rgba(122, 122, 122, 1.00);
        font-family: Open Sans, Helvetica, sans-serif;
    }
</style>
<span class="label custom ">Custom Colors</span>

Demo: https://jsfiddle.net/fxb78owu/

1 Like
4

Perfect!

First time doing this.

Ok, here’s the CSS that I have:

<style type="text/css">
.label {
    background: transparent;
    border-color: #FC5E37;
    color: #FC5E37;
    font-size: 16px;
    line-height: 1.9375;
    font-weight: 400;
    letter-spacing: 0em;
    border: 1px solid #888;
    color: #666;
    border-radius: 4px;
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 1px;
    white-space: nowrap;color: rgba(122, 122, 122, 1.00);
  font-family: Open Sans, Helvetica, sans-serif;
}
</style>
<span class="label custom ">Coming Fall</span>

Only problem is, I’ve put in the hex color code, but the label is still grey. Where am I going wrong?

5

You have two colour labels there (an fc5e37 and a 666). I’m guessing that #666 is taking precedent? (I’m on my phone so I can’t actually test out your code)

6

Wait, this seems to work

.label {
background: transparent;
border-color: FC5E37;
font-size: 16px;
line-height: 1.9375;
font-weight: 400;
letter-spacing: 0em;
border: 1px solid #fc5e37;
border-radius: 4px;
display: inline-block;
padding-left: 15px;
padding-right: 15px;
padding-top: 1px;
white-space: nowrap;
color: #fc5e37;
font-family: Open Sans, Helvetica, sans-serif;
}
2 Likes
7

@jabostick for the win! Thanks!

1 Like