Get in touch

Gutenberg Unordered List: One

This is an unordered list that effects the native list block in Wordpress. The list is a self-generated SVG and the colour can be changed so that it alternates between 1-3 colours. Used in Primary Advantage.
Date Published:
September 28, 2025
Plugin Requirements:
None
Template Type:
Gutenberg
Categories:
Lists
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS

/* ---- LIST ONE ---- */
/* ---------- Configure your colours here ---------- */
:root {
  --bullet-size: 10px;          /* bullet diameter */
  --bullet-gap: 12px;           /* space between bullet and text */
}

/* Remove default bullets */
ul.wp-block-list {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

/* Each list item */
ul.wp-block-list li {
  position: relative;
  padding-left: calc(var(--bullet-size) + var(--bullet-gap));
	border-bottom:1px solid var(--neutral-light);
	padding-top: 0.3em;
	padding-bottom: 0.3em;
}
ol.wp-block-list li {
	position: relative;
	border-bottom:1px solid var(--neutral-light);
	padding-top: 0.3em;
	padding-bottom: 0.3em;
}
.wp-block-list li:last-child {
	border-bottom:0px solid var(--neutral-light);
}

/* Custom circular bullet using SVG mask */
ul.wp-block-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  transform: translateY(-50%);
  width: var(--bullet-size);
  height: var(--bullet-size);
  background-color: var(--primary); /* default, overridden below */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='50' fill='white'/></svg>");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='50' fill='white'/></svg>");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  pointer-events: none; /* ensure clicks go through */
  transition: transform .25s ease, background-color .25s ease, opacity .25s ease;
}

/* Hover lift effect (optional) */
.wp-block-list li:hover::before,
.wp-block-list li:focus-within::before {
  transform: translateY(-50%) scale(1.08);
}

/* Alternate colours: primary / secondary / tertiary */
ul.wp-block-list li:nth-child(3n+1)::before {
  background-color: var(--primary);
}
ul.wp-block-list li:nth-child(3n+2)::before {
  background-color: var(--secondary);
}
ul.wp-block-list li:nth-child(3n)::before {
  background-color: var(--tertiary);
}