How-to: Customize The Trip Cards On YouLi Embed

If you want to change how the style of your Trip Card appears on your website, look no further! This can be as simple as a font change or as complicated as the example below.

CAUTION: This article assumes you have already installed the embed code. If you have not, be sure to start here: Integrate YouLi with your website.

Common Trip Card customizations to explore

See this help article for details on how to do the following customizations: How-to: Filter Your Embedded Trips On Your Website

1. Use TAGS to limit which trips are shown (allow your website visitors to filter the TRIPS embedded into your website) 

2. Limit the number of TRIPS shown 

Advanced customizations example code, using the default trip card styles

  • Notice that the image below is duplicated because the TRIPS have the same banner (this is a multiple departure date experience)
  • Also notice there is no SHARE SUMMARY set, leaving a large blank space

So in this case we want to

  1. Hide the image
  2. Change the gradient to a solid color
  3. Remove the share summary space

This is the embed code we worked with


And this is what the default embed looked like:


Use customized Trip Card styles

  • In this case, we used this CSS to accomplish our goal.
  • Your CSS will vary depending on the stylesheets on your website.
  • Be sure to include this in the HTML section when referencing the YouLi embed code.

CAUTION: You may will also need media queries. Be sure to check your mobile version.

<script src=""></script>


.trip-card-details, .trip-card-wrapper.detailed h3 {
font-family: arial;

.trip-card-banner-image {
height: 80px;
.trip-card-banner-image img {
display: none;
visibility: hidden;

.trip-card-details {
height: 160px;
.trip-card-details-description {
display: none;
visibility: hidden;
.trip-card-details-footer {
position: relative;
top: -70px;
.trip-card-wrapper.detailed .trip-card-banner-image .gradient-overlay {
background-image: linear-gradient(to bottom,rgba(54,182,201,1),rgba(54,182,201,1))

@media (max-width: 767px) {
.trip-card-banner-image {
height: 100px;

.trip-card-wrapper.detailed h3 {
font-family: arial;
/* display: inline-block; */
margin: 10px 8px;
/* font-size: 18px !important; */
.trip-card-details-footer {
position: relative;
top: -10px !important;
height: auto;

This is what the final style looked like


Advanced customization ideas

Want to change each card based on the trip?
  • You can target individual TRIPS using the "data-youli-trip-id" attribute. You'll need to use the gettrip API to list out all your TripIDs or save it from YouLi webhooks when a traveler registers or books. Then you can show your authenticated users personalized embeds like Solo Female Traveler does.
<div class="trip-card-col" data-youli-trip-id="[tripid]"> 

Need more help? 

Reach out to the YouLi Support Team via the chat box at the bottom of your screen or submit a Support Ticket request. If you need more advanced support, schedule a 1:1 Consulting session with one of our experts, and we will walk through Traveler flow options & best practices.