Components for Belgian public transport


this is my styling:

style: |
                  ha-card {
                    background-color: rgba(255, 255, 255, 0.3);
                    padding: 16px 16px 16px 12px;
                  .card-header {
                    color: #fafafa;
                    font-family: var(--ha-card-header-font-family, inherit);
                    font-size: var(--ha-card-header-font-size, 24px);
                    letter-spacing: -0.012em;
                    line-height: 32px;
                    display: block;
                    padding: 0px 0px 14px;
                  .tableContainer {
                    background-color: #2f2b2b;
                    padding-bottom: .4em;
                  table {
                    border: 0px;
                    border-collapse: collapse;
                    border-spacing: 0px;
                  th {
                    text-align: left;
                    font-size: 1.1em;
                    font-weight: 600;
                    color: #fafafa;
                    padding-bottom: .5em;
                    padding-top: .5em;
                    padding-left: .5em;
                  tr:nth-child(2n+3), tr:nth-child(even) {
                    color: #dde010;
                    font-size: 1.1em;
                  .time, .delay, .platform, .direction {
                    padding-left: .5em;
                    font-family: 'bpdotssquaresregular';
                    line-height: 1.5em;
                  .delay {
                    color: #ff5858;
                    font-weight: 600;
                    width: 100%;
                  .platform {
                    text-align: center !important;
                  .direction {
                    min-width: 170px;
                    text-transform: uppercase;

I’ll look in to that single digit number, but first i’m concentrating on getting my other desired integrations and automations up and running. You can follow the github repo to get a notification when the card is updated.

1 Like

Very nice…

I’m using this since a few days.
Would it be possible to add arrival time?
Then this would be almost perfect.

OK, found it myself. I’m not a programmer but with some trial and error I could add the arrival time.

if (cardConfig.lang == ‘nl’) {
table = `


let scheduledTime = new Date(data.connection[i].departure.time * 1000);
let hoursdeparture = scheduledTime.getHours();
let minutesdeparture = (‘0’ + scheduledTime.getMinutes()).slice(-2);
let platform = data.connection[i].departure.platform;
let direction = data.connection[i];
let arrivalTime = new Date(data.connection[i].arrival.time * 1000);
let hoursarrival = arrivalTime.getHours();
let minutesarrival = (‘0’ + arrivalTime.getMinutes()).slice(-2);
let delay = data.connection[i].departure.delay;
let delayString;
if (delay == 0) {delayString = ‘’;}
else {delay = delay / 60; delayString = “+” + delay + “’”;}

      let row = '<tr><td class="time">'+ hoursdeparture + ':' + minutesdeparture + '<span class="delay"> ' + delayString + '</span></td><td class="platform"><span class="platformNumber">' + platform + '</span></td><td class="direction">' + direction + '</td><td class="time">'+ hoursarrival + ':' + minutesarrival + '</td></tr>';

Hi, nice to see you made the change yourself. I was primarily thinking, ‘why would you want that’, you know it’s always just a guess with the nmbs :slight_smile:

Yep, It’s always a guess.
I want this because I sometimes have the choice between trains. Train with almost no stops before I arrive and others with same destination, but other route which has a lot more stoos and takes me longer to get where I want.

OMG! Unbelievable, you guys are geniuses! I had this idea of integrations and was trying to implement the API when I came across you. I love you guys so much. <3

Quick question, is there any way to see the time of the 2nd train (the one that will come after the other) for a destination?

Thanks a lot for everything guys

I like this integration of the project.
Any possibility sharing your config for this?

Thanks in advance

The NMBS integration is great, but why are there no attributes for departure time and total delay? Having departure and delay as relative times from now, makes it difficult to display the needed train as it would be displayed on the board in a station (like “Brugge 16u45 +20”). Could such an addition be considered please?