Section heading

Accent heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Feature heading

This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. We'll replace it soon.

Feature heading

This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. We'll replace it soon.

Feature heading

This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. We'll replace it soon.

Feature heading

This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. We'll replace it soon.

Feature heading

This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. We'll replace it soon.

Feature heading

This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. We'll replace it soon.

Here are the grid list items

The CSS used:

.my-list__grid {
    --icon-url: url('/wp-content/uploads/BT-arrow.svg');
    --icon-color: var(--primary);
    --icon-offset: 0 .2ex;
    --icon-size: 1.2em;
    --icon-gap: .8em;
    --icon-display: flex;
    --list-indent: 0;
    --icon-opacity: 1;
    --list-item-opactiy: 2;
}
.my-list__grid ul{
    list-style: none;
    padding:var(--list-indent);
}
.my-list__grid li{
    display:grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap:var(--icon-gap);

  &::before{
    content:'';
    display:var(--icon-display);
    inline-size: var(--icon-size);
    block-size: var(--icon-size);
    background-color: var(--icon-color);
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    mask-size: cover;
    translate: var(--icon-offset);

} 
}

The Roberto Harrison version

The CSS used:

%root% {
    --icon-url: url('/wp-content/uploads/BT-arrow.svg');
    --icon-color: var(--primary);
    --icon-offset: 0 .2ex;
    --icon-size: 1.2em;
    --icon-gap: .8em;
    --icon-display: flex;
    --list-indent: 0;
    --icon-opacity: 1;
    --list-item-opactiy: 2;
}
%root% ul{
    list-style: none;
    padding:var(--list-indent);
}
%root% li{
    display:grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap:var(--icon-gap);

  &::before{
    content:'';
    display:var(--icon-display);
    inline-size: var(--icon-size);
    block-size: var(--icon-size);
    background-color: var(--icon-color);
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    mask-size: cover;
    translate: var(--icon-offset);
  }
  
/*   Roberto's edit */
  
  & > * {
    grid-column: 2;
    display: flex; 
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
  } 

  & a {
    white-space: normal; 
    overflow-wrap: break-word;
  }
}

Here are the flex list items

The CSS used:

.my-list__flex {
	--icon-url: url('/wp-content/uploads/BT-arrow.svg');
	--icon-color: var(--primary);
	--icon-offset: 0 .2ex;
	--icon-size: 1.2em;
	--icon-gap: .8em;
	--icon-display: flex;
	--list-indent: 0;
	--icon-opacity: 1;
	--list-item-opactiy: 2;
}

.my-list__flex  ul {
	list-style: none;
	padding: var(--list-indent);
}

.my-list__flex li {
	display: flex;
	align-items: flex-start;

	&::before {
		content: '';
		display: var(--icon-display);
		inline-size: var(--icon-size);
		block-size: var(--icon-size);
		background-color: var(--icon-color);
		-webkit-mask-image: var(--icon-url);
		mask-image: var(--icon-url);
		mask-size: cover;
		translate: var(--icon-offset);
		margin-right: var(--icon-gap); /* Space between icon and text */
		flex-shrink: 0;
	}

}

/* Add spaces around text content - suggested by Claude */
%root% li a + :not(a),
%root% li :not(a) + a {
	margin: 0 0.25em; /* Add space before and after 'and' */
}

Write a compelling headline that sells

This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

Call to action