By default, Kontext ads are served without any styling and layout so you can customise them to your app needs. Each ad format has several classess so you can easily tweak how it looks.

Inline ad

Box ad

Suggestion

If you don’t want to dive into the details of each format, here is a sample .css snippet that includes basic styling for all ad formats.

.mb-banner-vertical {
  width: 100%;
}

.mb-banner-horizontal {
  width: 100%;
}

.mb-query-static {
  font-weight: 600;
  color: #22543d;
  background-color: transparent;
  padding: 8px;
  border-radius: 8px;
  &:hover {
    background-color: #edf2f7;
  }
  &:focus {
    background-color: #edf2f7;
    outline: none;
  }
}

.mb-query-stream {
  font-weight: 600;
  color: #22543d;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #EAECF0;
  cursor: pointer;
  &:hover {
    background-color: #edf2f7;
  }
  &:focus {
    background-color: #edf2f7;
    outline: none;
  }
}

.mb-query-static-left-icon {
  margin-right: 8px;
}

.mb-query-static-left-icon {
  margin-left: 8px;
}

.mb-ad-badge {
  padding: 0px 4px;
  border-radius: 20px;
  background-color: white;
  border: 1px solid #EAECF0;
  font-size: 0.75rem;
  margin-right: 8px;
}

.mb-ad-badge-text {
  margin: 4px;
  border-radius: 8px;
  color: #22543d;
}

.mb-inline-ad {
  margin-top: 16px;
}

.mb-box-ad {
  padding: 16px;
  max-width: 100%;
  border: 1px solid #EAECF0;
  border-radius: 8px;
  background-color: transparent;
  width: 100%;
}

.mb-box-ad-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.mb-box-ad-image {
  width: 100px;
}


.mb-md-em {
  font-style:  italic;
}

.mb-md-blockquote {
  padding: 4px;
  background-color: #f8f8f8;
  border-left: 4px solid #2e2e2e;
}

.mb-md-a {
  color: #3b82f6;
  text-decoration: underline;
}

.mb-md-hr {
  margin-top: 8px;
  margin-bottom: 8px;
  border-top: 1px solid #2e2e2e;
}

.mb-md-img {
  max-width: 100%;
  height: auto;
}

.mb-md-list {
  padding-left: 16px;

}

.mb-md-ol {
  list-style-type: decimal;
}

.mb-md-ul {
  list-style-type: disc;
}

.mb-md-h1 {
  font-size: 2.25rem;
  font-weight: 800;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.mb-md-h2 {
  font-size: 1.875rem;
  font-weight: 800;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.mb-md-h3 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.mb-md-checkbox {
  height: 20px;
  width: 20px;
  color: #3b82f6
}
Rendering dependencies