Sample content to test list styles for Pixelgrade LT design system.

list-styles-sample-markup

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":5} -->
<h5 class="has-normal-font-size">Bullet</h5>
<!-- /wp:heading -->

<!-- wp:list {"className":"sm-palette-1 novablocks-list"} -->
<ul class="sm-color-signal-0 nb-list sm-palette-1 novablocks-list"><li>We took a good long look</li><li>At the default</li><li>Unordered</li><li>Lists.</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":5} -->
<h5 class="has-normal-font-size">Ordered</h5>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true,"className":"sm-palette-1 novablocks-list"} -->
<ol class="sm-color-signal-0 nb-list sm-palette-1 novablocks-list"><li>Also we took a good look</li><li>At</li><li>Lists</li><li>Of the ordered variety.</li></ol>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":5} -->
<h5 class="has-normal-font-size">None</h5>
<!-- /wp:heading -->

<!-- wp:list {"className":"sm-palette-1 novablocks-list","listStyle":"list-no-marker"} -->
<ul class="sm-color-signal-0 nb-list list-no-marker sm-palette-1 novablocks-list"><li>We took a good look</li><li>At unordered </li><li>lists without</li><li>any marker.</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":5} -->
<h5 class="has-normal-font-size">Checkmarks</h5>
<!-- /wp:heading -->

<!-- wp:list {"className":"sm-palette-2 novablocks-list","listStyle":"list-checkmark-style","palette":2,"paletteVariation":10,"colorSignal":3} -->
<ul class="sm-color-signal-3 nb-list list-checkmark-style sm-palette-2 novablocks-list"><li>Also we took a good look</li><li>At lists</li><li>with checkmarks</li><li>instead of bullets.</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":5} -->
<h5 class="has-normal-font-size">Timeline Connector</h5>
<!-- /wp:heading -->

<!-- wp:list {"className":"sm-palette-1 novablocks-list","listConnection":"is-style-timeline","paletteVariation":10,"colorSignal":3} -->
<ul class="sm-color-signal-3 nb-list is-style-timeline sm-palette-1 novablocks-list"><li>Eat</li><li>Code</li><li>Sleep</li><li>Repeat</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top"} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:heading {"level":5} -->
<h5 class="has-normal-font-size">Horizontal Divider</h5>
<!-- /wp:heading -->

<!-- wp:list {"className":"sm-palette-1 novablocks-list","listStyle":"list-no-marker","listConnection":"is-style-divider"} -->
<ul class="sm-color-signal-0 nb-list list-no-marker is-style-divider sm-palette-1 novablocks-list"><li>A lightweight horizontal</li><li>rule to separate content</li><li>within a unordered list.</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":5} -->
<h5 class="has-normal-font-size">Marker Alignment</h5>
<!-- /wp:heading -->

<!-- wp:list {"className":"sm-palette-1 novablocks-list","listConnection":"is-style-timeline"} -->
<ul class="sm-color-signal-0 nb-list is-style-timeline sm-palette-1 novablocks-list"><li><h2>Heading 2</h2></li><li>Body text</li><li><img class="wp-image-3867" style="width: 150px;" src="https://via.placeholder.com/150?text=image" alt=""></li><li><h3>Heading 3</h3></li><li><h4>Heading 4</h4></li></ul>
<!-- /wp:list --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top"} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:heading {"level":5} -->
<h5 class="has-normal-font-size">Checkmarks Alignment</h5>
<!-- /wp:heading -->

<!-- wp:list {"className":"sm-palette-1 novablocks-list","listStyle":"list-checkmark-style","useSourceColorAsReference":true,"colorSignal":2} -->
<ul class="sm-color-signal-2 nb-list list-checkmark-style sm-palette-1 novablocks-list" id="block-714c3804-7b58-40c8-9143-7f45323d26e7"><li><h2>Heading 2</h2></li><li>Body text</li><li><img class="wp-image-3867" style="width: 150px;" src="https://via.placeholder.com/150?text=image" alt=""></li><li><h3>Heading 3</h3></li><li><h4>Heading 4</h4></li></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":5} -->
<h5 class="has-normal-font-size">List indentation</h5>
<!-- /wp:heading -->

<!-- wp:list {"className":"sm-palette-1 novablocks-list","listConnection":"is-style-timeline","paletteVariation":10,"colorSignal":3} -->
<ul class="sm-color-signal-3 nb-list is-style-timeline sm-palette-1 novablocks-list"><li>Sets<ul><li>the indent</li><li>for the<ul><li>list items</li></ul></li></ul></li><li>Sometimes <ul><li>the default indent of a list </li><li>is too much for the design <ul><li>you are </li><li>working on.</li></ul></li></ul></li><li>Over</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top"} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:heading {"level":5} -->
<h5 class="has-normal-font-size">LIST INDENTATION with Checkmarks</h5>
<!-- /wp:heading -->

<!-- wp:list {"className":"sm-palette-1 novablocks-list","listStyle":"list-checkmark-style"} -->
<ul class="sm-color-signal-0 nb-list list-checkmark-style sm-palette-1 novablocks-list"><li>Sets<ul><li>the indent</li><li>for the<ul><li>list items</li></ul></li></ul></li><li>Sometimes <ul><li>the default indent of a list</li><li>is too much for the design <ul><li>you are</li><li>working on.</li></ul></li></ul></li><li>Over again</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":5} -->
<h5 class="has-normal-font-size">Order List indentation</h5>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true,"className":"sm-palette-1 novablocks-list","listConnection":"is-style-timeline","paletteVariation":10,"colorSignal":3} -->
<ol class="sm-color-signal-3 nb-list is-style-timeline sm-palette-1 novablocks-list"><li>Sets<ol><li>the indent</li><li>for the<ol><li>list items</li></ol></li></ol></li><li>Sometimes <ol><li>the default indent of a list </li><li>is too much for the design <ol><li>you are </li><li>working on.</li></ol></li></ol></li><li>Over</li></ol>
<!-- /wp:list --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top"} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:heading {"level":5} -->
<h5 class="has-normal-font-size">LIST INDENTATION with Horizontal</h5>
<!-- /wp:heading -->

<!-- wp:list {"className":"sm-palette-1 novablocks-list","listStyle":"list-no-marker","listConnection":"is-style-divider","useSourceColorAsReference":true,"colorSignal":2} -->
<ul class="sm-color-signal-2 nb-list list-no-marker is-style-divider sm-palette-1 novablocks-list"><li>Sets<ul><li>the indent</li><li>for the<ul><li>list items</li></ul></li></ul></li><li>Sometimes <ul><li>the default indent of a list</li><li>is too much for the design <ul><li>you are</li><li>working on.</li></ul></li></ul></li><li>Over again</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:heading -->
<h2 class="has-normal-font-size">Top Films 2000 – 2020</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Not necessarily the “best,” most impressive, or most important films, or even necessarily the ones I recommend most strongly to others.&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true,"start":8,"className":"sm-palette-1 novablocks-list","listStyle":"list-checkmark-style","listConnection":"is-style-timeline","paletteVariation":3,"colorSignal":1} -->
<ol start="8" class="sm-color-signal-1 nb-list is-style-timeline sm-palette-1 novablocks-list"><li><a href="http://decentfilms.com/reviews/hiddenlife"><strong>Hidden Life, A</strong></a>&nbsp;(2019)<br>In all of Terrence Malick’s contemplative recent works (especially&nbsp;<a href="http://decentfilms.com/reviews/newworld"><em>The New World</em></a>&nbsp;and&nbsp;<a href="http://decentfilms.com/articles/treeoflife"><em>The Tree of Life</em></a>) are sequences and elements that leave me awestruck.&nbsp;<em>A Hidden Life&nbsp;</em>— his ecstatic, anguished three-hour cinematic hymn singing the life and death of Blessed Franz Jägerstätter — is the first of his recent films that overwhelms me in its totality.&nbsp;<em>(Mature teens and up)</em></li><li><a href="http://decentfilms.com/reviews/intogreatsilence"><strong>Into Great Silence</strong></a>&nbsp;(2007)<br>This is more than a film to me.&nbsp;<a href="http://decentfilms.com/articles/groning">Philip Gröning</a>’s austere, immersive, two-and-a-half-hour documentary portrait of life in the head monastery of the Carthusian order, the Grande Chartreuse in the French Alps, is a silent retreat and a mystical experience, and a favorite way to begin Lent. “In killing silence, man assassinates God,” wrote Cardinal Robert Sarah, and Kierkegaard wrote, “If I were allowed to prescribe just one remedy for all the ills of the modern world, I would prescribe silence. … Therefore, create silence.” Here is medicine for what ails us.&nbsp;<em>(Nothing problematic)</em></li><li><a href="http://decentfilms.com/reviews/kidwithabike"><strong>Kid with a Bike, The</strong></a>&nbsp;(2012)<br>“You can hold me, but not so tight.” With those unexpected words, a startled woman offers a child in crisis — a stranger to her — a much-needed ray of grace. In one extraordinary film after another, Belgian brothers&nbsp;<a href="http://decentfilms.com/articles/dardennes">Jean-Pierre and Luc Dardenne</a>&nbsp;have explored social, moral and spiritual themes in the lives of lower- or working-class people. While several of their films (particularly&nbsp;<a href="http://decentfilms.com/reviews/son2002"><em>The Son</em></a>&nbsp;and&nbsp;<a href="http://decentfilms.com/reviews/twodaysonenight"><em>Two Days, One Night</em></a>) would be at home on this list, I chose this one for the immediacy of its effect for me.&nbsp;<em>(Teens and up)</em></li></ol>
<!-- /wp:list -->

<!-- wp:novablocks/media {"contentStyle":"basic","verticalAlignment":"center","templateInserted":true,"images":[{"sizes":{"thumbnail":{"height":192,"width":276,"url":"http://nova.local/wp-content/uploads/2020/06/jenefer-melissa-2018-IMG_7919-276x192.jpg","orientation":"landscape"},"medium":{"height":300,"width":286,"url":"http://nova.local/wp-content/uploads/2020/06/jenefer-melissa-2018-IMG_7919-286x300.jpg","orientation":"portrait"},"full":{"url":"http://nova.local/wp-content/uploads/2020/06/jenefer-melissa-2018-IMG_7919.jpg","height":733,"width":700,"orientation":"portrait"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":2615,"url":"https://via.placeholder.com/800?text=image","alt":"","link":"#","caption":"","description":"“In the original film,” says Holschuh, “four stage hands used ropes to raise and lower the sleeves.” The WTL jacket, demonstrated here by Holschuh, works by using actuators that can shrink the jacket and retract the sleeves on command description."}],"stylePreset":"just-my-style","sizeContrast":20,"positionShift":65,"elementsDistance":80,"placementVariation":50,"defaultsGenerated":true} -->
<!-- wp:heading -->
<h2 class="has-normal-font-size">Media Features</h2>
<!-- /wp:heading -->

<!-- wp:list {"className":"sm-palette-1 novablocks-list","listStyle":"list-checkmark-style","listConnection":"is-style-timeline","paletteVariation":10,"colorSignal":3} -->
<ul class="sm-color-signal-3 nb-list list-checkmark-style is-style-timeline sm-palette-1 novablocks-list"><li>We have always defined ourselves by the ability to overcome the impossible. </li><li>And we count these <br>moments. </li><li>These moments when we dare to aim higher, to break barriers, to make the unknown known.</li></ul>
<!-- /wp:list -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-text"} -->
<div class="wp-block-button is-style-text"><a class="wp-block-button__link">Learn more</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- /wp:novablocks/media -->

<!-- wp:list {"className":"sm-palette-1 novablocks-list","listConnection":"is-style-timeline","paletteVariation":10,"colorSignal":3} -->
<ul class="sm-color-signal-3 nb-list is-style-timeline sm-palette-1 novablocks-list"><li><h3>Top Films 2000 – 2020</h3>Not necessarily the “best,” most impressive, or most important films, or even necessarily the ones I recommend most strongly to others.&nbsp;</li><li><a href="http://decentfilms.com/reviews/hiddenlife"><strong>Hidden Life, A</strong></a>&nbsp;(2019)<br>In all of Terrence Malick’s contemplative recent works (especially&nbsp;<a href="http://decentfilms.com/reviews/newworld"><em>The New World</em></a>&nbsp;and&nbsp;<a href="http://decentfilms.com/articles/treeoflife"><em>The Tree of Life</em></a>) are sequences and elements that leave me awestruck.&nbsp;<em>A Hidden Life&nbsp;</em>— his ecstatic, anguished three-hour cinematic hymn singing the life and death of Blessed Franz Jägerstätter — is the first of his recent films that overwhelms me in its totality.&nbsp;<em>(Mature teens and up)</em></li><li><a href="http://decentfilms.com/reviews/intogreatsilence"><strong>Into Great Silence</strong></a>&nbsp;(2007)<br>This is more than a film to me.&nbsp;<a href="http://decentfilms.com/articles/groning">Philip Gröning</a>’s austere, immersive, two-and-a-half-hour documentary portrait of life in the head monastery of the Carthusian order, the Grande Chartreuse in the French Alps, is a silent retreat and a mystical experience, and a favorite way to begin Lent. “In killing silence, man assassinates God,” wrote Cardinal Robert Sarah, and Kierkegaard wrote, “If I were allowed to prescribe just one remedy for all the ills of the modern world, I would prescribe silence. … Therefore, create silence.” Here is medicine for what ails us.&nbsp;<em>(Nothing problematic)</em></li><li><a href="http://decentfilms.com/reviews/kidwithabike"><strong>Kid with a Bike, The</strong></a>&nbsp;(2012)<br>“You can hold me, but not so tight.” With those unexpected words, a startled woman offers a child in crisis — a stranger to her — a much-needed ray of grace. In one extraordinary film after another, Belgian brothers&nbsp;<a href="http://decentfilms.com/articles/dardennes">Jean-Pierre and Luc Dardenne</a>&nbsp;have explored social, moral and spiritual themes in the lives of lower- or working-class people. While several of their films (particularly&nbsp;<a href="http://decentfilms.com/reviews/son2002"><em>The Son</em></a>&nbsp;and&nbsp;<a href="http://decentfilms.com/reviews/twodaysonenight"><em>Two Days, One Night</em></a>) would be at home on this list, I chose this one for the immediacy of its effect for me.&nbsp;<em>(Teens and up)</em></li></ul>
<!-- /wp:list -->