diff --git a/pages/_docs/badges.md b/pages/_docs/badges.md
index 57e13d8c1..fc449d6b6 100644
--- a/pages/_docs/badges.md
+++ b/pages/_docs/badges.md
@@ -60,3 +60,27 @@ If you don't want your badge to contain any text you can do it by leaving the ht
{% endfor %}
{% endcapture %}
{% include example.html code=code centered=true %}
+
+### Badge addons
+
+You can add badge addon by adding `.badge-addon` class.
+
+{% capture code %}
+{% include ui/badge.html text="task" color="green" addon="finished" %}
+{% include ui/badge.html text="bundle" color="purple" addon="passing" %}
+{% include ui/badge.html text="CSS gzip size" color="red-lt" addon="20.9kB" addon-color="red" %}
+{% endcapture %}
+{% include example.html code=code %}
+
+### Badge avatars
+
+If you want to add an avatar to your badge just create `.badge-avatar` class.
+
+{% capture code %}
+{% include ui/badge.html person-id=1 color="blue" %}
+{% include ui/badge.html person-id=2 color="blue" %}
+{% include ui/badge.html person-id=3 color="blue" %}
+{% include ui/badge.html person-id=4 color="blue" %}
+{% include ui/badge.html person-id=5 color="blue" %}
+{% endcapture %}
+{% include example.html code=code %}
diff --git a/pages/_includes/ui/badge.html b/pages/_includes/ui/badge.html
index dd95f023b..beb5a5a9c 100644
--- a/pages/_includes/ui/badge.html
+++ b/pages/_includes/ui/badge.html
@@ -1 +1,18 @@
-{{ include.text }}
+{% assign el = 'span' %}
+<{{ el }} class="badge bg-{{ include.color | default: 'primary' }}{% if include.class %} {{ include.class }}{% endif %}">
+{% if include.person-id %}
+ {% assign person-id = include.person-id | minus: 1 %}
+ {% assign person = site.data.people[person-id] %}
+ {% assign src = person.photo %}
+ {% unless src %}
+ {% assign placeholder = person.full_name | first_letters %}
+ {% endunless %}
+ <{{ el }} class="badge-avatar" style="background-image: url({{ site.base }}/{{ src }})">{% unless src %}{{ person.full_name | first_letters }}{% endunless %}
+ {% endif %}
+{% if include.text %}
+ {{ include.text }}
+{% else %}
+ {{ person.full_name }}
+{% endif %}
+{% if include.addon %}<{{ el }} class="badge-addon {% if include.addon-color%}bg-{{ include.addon-color }}{% endif %}">{{ include.addon }}{% endif %}
+
diff --git a/pages/_layouts/base.html b/pages/_layouts/base.html
index 79869666c..d4b2b8c60 100644
--- a/pages/_layouts/base.html
+++ b/pages/_layouts/base.html
@@ -2,34 +2,36 @@
{% include layout/banner.html %}
-
-
-
+
+
+
- {% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}
+ {% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}
-
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
+
+
- {% if page.description %}
-
- {% endif %}
+ {% if page.description %}
+
+ {% endif %}
- {% include layout/og.html show=layout.og-component %}
- {% include layout/css.html %}
+ {% include layout/og.html show=layout.og-component %}
+ {% include layout/css.html %}
+
+ {% include layout/js.html %}
{% assign dark-theme = page.dark-theme | default: site.dark-theme %}
@@ -39,7 +41,6 @@
{% include layout/modals-capture.html %}
- {% include layout/js.html %}
{% include layout/js-capture.html %}
{% if site.debug and jekyll.environment == 'development' %}
diff --git a/scss/ui/_badges.scss b/scss/ui/_badges.scss
index 8c3cfa30b..f1b7193a3 100644
--- a/scss/ui/_badges.scss
+++ b/scss/ui/_badges.scss
@@ -1,9 +1,13 @@
-
-
.badge {
@include subheader(false);
- background: $gray-200;
-
+ display: inline-flex;
+ justify-content: center;
+ padding: 0 .5em;
+ line-height: 1.75em;
+ background: $gray-500;
+ overflow: hidden;
+ vertical-align: text-bottom;
+
@at-root a#{&} {
color: $white;
}
@@ -23,8 +27,8 @@
position: absolute;
top: 25%;
right: 0;
- min-width: 1rem;
- min-height: 1rem;
+ min-width: 1.75em;
+ min-height: 1.75em;
padding: 0 .25rem;
line-height: 1rem;
background-clip: padding-box;
@@ -39,4 +43,24 @@
.badge-pill {
border-radius: 100px;
+ min-width: 1.75em;
}
+
+.badge-avatar {
+ box-sizing: content-box;
+ width: 1.75em;
+ margin: 0 .5em 0 -.5em;
+ color: $light-white;
+ background: $light-black no-repeat center/cover;
+ vertical-align: text-bottom;
+}
+
+.badge-addon {
+ padding: 0 .5rem;
+ margin: 0 -.5em 0 .5em;
+ min-width: 1.75em;
+ background: $light-black;
+ text-align: center;
+ color: $white;
+ text-decoration: none;
+}
\ No newline at end of file