Summary / Event Items with borders.

Hi, I would love to create something like this event page. Not necessarily with coloured categories, but I'd like the items to have borders and the time, title, and category to be separated with a line. I've searched the entire internet! Any help on either code to use or plugin to purchase? Thx

If you create an event page and add this to Custom CSS it may give you an idea of the possibilities:

.eventlist {
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:20px;
}
.eventlist-event {
  margin-top:0px;
  flex-direction: column;
}
.eventlist-column-info {
  //margin-top:20px;
  padding-left:0px;
}
.eventlist-column-thumbnail {
  width:100%;
}
.tweak-events-stacked-thumbnail-size-32-standard .eventlist-column-thumbnail {
    padding-bottom: 60%;
}
.eventlist-column-info {
  display:flex;
  width:100%;
  justify-content: fill;
  
}
.eventlist-title, .eventlist-meta-item {
  border:1px solid #000;
  padding:10px;
}
.eventlist-title {
  padding:10px !important;
}

It's not perfect, but you could build on it, or get help to build on it. 

Drop me a note if you want.

Thank you so much. I'll have a play! 🙂