-<div class='col12 clearfix icon-list'>
- <div class='clearfix'>
- <span class='sprite small term editor'></span>
- <p><%= t "welcome_page.basic_terms.editor_html" %></p>
- </div>
- <div class='clearfix'>
- <span class='sprite small term node'></span>
- <p><%= t "welcome_page.basic_terms.node_html" %></p>
- </div>
- <div class='clearfix'>
- <span class='sprite small term way'></span>
- <p><%= t "welcome_page.basic_terms.way_html" %></p>
- </div>
- <div class='clearfix'>
- <span class='sprite small term changeset'></span>
- <p><%= t "welcome_page.basic_terms.changeset_html" %></p>
- </div>
-</div>
+<ul class='list-unstyled'>
+ <li class='d-flex align-items-center gap-2 mb-2'>
+ <svg width='50' height='50' viewBox='0 0 100 100' class='flex-shrink-0 align-self-start'>
+ <path d="M19.728 30.552l19.834-15.219L80 65l-19.834 15.219z" fill="#7092ff" opacity=".5" />
+ <path d="M10.597 18.651l19.834-15.219 6.088 7.934-19.834 15.219zm52.613 65.535l19.834-15.219 1.198 17.988-3.967 3.044z" fill="#7092ff" />
+ </svg>
+ <span><%= t ".basic_terms.an_editor_html", :editor => tag.strong(t(".basic_terms.editor")) %></span>
+ </li>
+ <li class='d-flex align-items-center gap-2 mb-2'>
+ <svg width='50' height='50' viewBox='0 0 100 100' class='flex-shrink-0 align-self-start'>
+ <path d="M50 5c-20.71 0-37.5 16.789-37.5 37.5s37.5 52.5 37.5 52.5 37.5-31.789 37.5-52.5-16.789-37.5-37.5-37.5z" fill="#7092ff" />
+ <circle cx="50" cy="42.5" r="15" fill="#fff" />
+ </svg>
+ <span><%= t ".basic_terms.a_node_html", :node => tag.strong(t(".basic_terms.node")) %></span>
+ </li>
+ <li class='d-flex align-items-center gap-2 mb-2'>
+ <svg width='50' height='50' viewBox='0 0 100 100' class='flex-shrink-0 align-self-start'>
+ <line x1="20" y1="80" x2="80" y2="20" stroke="#7092ff" stroke-width="15" />
+ <circle cx="20" cy="80" r="15" fill="#7092ff" />
+ <circle cx="80" cy="20" r="15" fill="#7092ff" />
+ <circle cx="20" cy="80" r="7" fill="#fff" />
+ <circle cx="80" cy="20" r="7" fill="#fff" />
+ </svg>
+ <span><%= t ".basic_terms.a_way_html", :way => tag.strong(t(".basic_terms.way")) %></span>
+ </li>
+ <li class='d-flex align-items-center gap-2 mb-2'>
+ <svg width='50' height='50' viewBox='0 0 100 100' class='flex-shrink-0 align-self-start'>
+ <path d="M25 87l-20-20v-29l20-20h68l2 2v65l-2 2z" fill="#7092ff" />
+ <rect width="10" height="15" x="15" y="45" rx="3" ry="2.25" fill="#fff" />
+ </svg>
+ <span><%= t ".basic_terms.a_tag_html", :tag => tag.strong(t(".basic_terms.tag")) %></span>
+ </li>
+</ul>