This card requires you to install and setup the following components:
​Untapped​
- type: picture-elementsimage: /local/cards/untappd.pngelements:- type: state-iconentity: sensor.untappd_last_checkinstyle:top: 18pxleft: 8pxtransform: none- type: state-labelentity: sensor.untappd_beerstyle:top: 8%left: 52pxtransform: nonecolor: rgb(255, 255, 255)font-family: Trebuchet MSfont-size: 90%font-weight: boldborder-left-style: solidborder-color: Yellowbackground-color: rgb(4, 4, 4, 0.6)pointer-events: nonewidth: 263pxpadding: 5pxborder-top-right-radius: 5px- type: state-iconentity: sensor.untappd_last_badgestyle:top: 64pxleft: 8pxtransform: none- type: state-labelentity: sensor.untappd_badgestyle:top: 63pxleft: 52pxtransform: nonecolor: rgb(255, 255, 255)font-family: Trebuchet MSfont-size: 90%font-weight: boldborder-left-style: solidborder-color: Orangebackground-color: rgb(4, 4, 4, 0.6)pointer-events: nonewidth: 263pxpadding: 5pxborder-bottom-right-radius: 5px​- type: state-iconentity: sensor.untappd_checkedstyle:bottom: 0pxleft: 8pxtransform: nonez-index: 2- type: state-labelentity: sensor.untappd_checkedstyle:bottom: 0pxleft: 0pxtransform: nonecolor: rgb(255, 255, 255)-webkit-text-stroke: 0.2px rgb(0, 0, 0, 0.6)text-shadow: 0.1px 0.1px rgb(0, 0, 0, 0.6)font-family: Trebuchet MSfont-size: 90%font-weight: boldborder-bottom-style: solidborder-color: LightSalmonpadding-left: 36pxpadding-bottom: 8pxtext-shadow: 2px 2px 2px black​- type: state-iconentity: sensor.untappd_followingsstyle:bottom: 0pxleft: 78pxtransform: nonez-index: 2- type: state-labelentity: sensor.untappd_followingsstyle:bottom: 0pxleft: 74pxtransform: nonecolor: rgb(255, 255, 255)-webkit-text-stroke: 0.2px rgb(0, 0, 0, 0.6)text-shadow: 0.1px 0.1px rgb(0, 0, 0, 0.6)font-family: Trebuchet MSfont-size: 90%font-weight: boldborder-bottom-style: solidborder-color: OrangeRedpadding-left: 36pxpadding-bottom: 8pxtext-shadow: 2px 2px 2px black​- type: state-iconentity: sensor.untappd_total_badgesstyle:bottom: 0pxleft: 148pxtransform: nonez-index: 2- type: state-labelentity: sensor.untappd_total_badgesstyle:bottom: 0pxleft: 141pxtransform: nonecolor: rgb(255, 255, 255)-webkit-text-stroke: 0.2px rgb(0, 0, 0, 0.6)text-shadow: 0.1px 0.1px rgb(0, 0, 0, 0.6)font-family: Trebuchet MSfont-size: 90%font-weight: boldborder-bottom-style: solidborder-color: FireBrickpadding-left: 36pxpadding-bottom: 8pxtext-shadow: 2px 2px 2px black​- type: state-iconentity: sensor.untappd_total_beersstyle:bottom: 0pxleft: 228pxtransform: nonez-index: 2- type: state-labelentity: sensor.untappd_total_beersstyle:bottom: 0pxleft: 215pxtransform: nonecolor: rgb(255, 255, 255)-webkit-text-stroke: 0.2px rgb(0, 0, 0, 0.6)text-shadow: 0.1px 0.1px rgb(0, 0, 0, 0.6)font-family: Trebuchet MSfont-size: 90%font-weight: boldborder-bottom-style: solidborder-color: Maroonpadding-left: 36pxpadding-bottom: 8pxtext-shadow: 2px 2px 2px black
And then some templating to get it too look the way it is on the picture, so here are the sensors
- platform: templatesensors:untappd_badge:value_template: "Recent Badge: {{ states.sensor.untappd_last_badge.attributes.badge }} (Level {{ states.sensor.untappd_last_badge.attributes.level }})"​- platform: templatesensors:untappd_beer:value_template: "Recent Beer: {{ states.sensor.untappd_last_checkin.attributes.beer }} ({{ states.sensor.untappd_last_checkin.attributes.abv }})"​- platform: templatesensors:untappd_followings:unit_of_measurement: followersvalue_template: "{{ states.sensor.untappd_last_checkin.attributes.followings }}"​- platform: templatesensors:untappd_checked:unit_of_measurement: checkinsvalue_template: "{{ states.sensor.untappd_last_checkin.attributes.checkins }}"​- platform: templatesensors:untappd_total_beers:unit_of_measurement: beersvalue_template: "{{ states.sensor.untappd_last_checkin.attributes.total_beers }}"​- platform: templatesensors:untappd_total_badges:unit_of_measurement: badgesvalue_template: "{{ states.sensor.untappd_last_checkin.attributes.total_badges }}"
The icons are from loading.io and the background image isn't available for reuse so make your own.