Circled icons + three features

원 안 아이콘 + 기능 세 줄

No row of three columns with an icon in a circle, a short title and a one-line text. Icons are only small helpers beside text.

···
html
<main class="dont-wrap"><section class="dont-col"><p class="dsx-label"><b>하지 않는 것</b>설명용으로 그린 예</p><div class="dont-bad"><div class="dont-feat"><div class="dont-feat-i"><div class="dont-feat-c"></div><div class="dont-feat-t">믿을 수 있어요</div><div class="dont-feat-s">정확한 정보를 전해요</div></div><div class="dont-feat-i"><div class="dont-feat-c"></div><div class="dont-feat-t">쉽게 읽혀요</div><div class="dont-feat-s">누구나 편하게 봐요</div></div><div class="dont-feat-i"><div class="dont-feat-c"></div><div class="dont-feat-t">늘 새로워요</div><div class="dont-feat-s">꾸준히 갱신해요</div></div></div><div class="dont-note">동그라미 안의 도형 = 아이콘 자리예요. 원 안 아이콘 + 짧은 제목 + 한 줄, 가운데 정렬. 하지 않아요.</div></div></section><section class="dont-col"><p class="dsx-label"><b>대신</b>실제 렌더: KRDS TopicIndex index — 줄 + 작은 화살표</p><div class="dont-real"><section class="ti ti--index" aria-labelledby="topics-title" data-astro-cid-pgwj27j2> <div class="container" data-astro-cid-pgwj27j2> <h2 id="topics-title" class="ti__heading" data-astro-cid-pgwj27j2>주제별로 보기</h2> <ul class="ti__index" data-astro-cid-pgwj27j2> <li data-astro-cid-pgwj27j2> <a href="/category/stages/" data-astro-cid-pgwj27j2> <span class="ti__name" data-astro-cid-pgwj27j2>단계별 이유식</span> <span class="ti__count num" data-astro-cid-pgwj27j2>글 5편</span> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g transform="rotate(-90 12 12)"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.47243 8.39766C4.80494 8.10671 5.31035 8.1404 5.60129 8.47291L11.9992 15.7848L18.3972 8.47291C18.6881 8.1404 19.1935 8.10671 19.526 8.39766C19.8585 8.6886 19.8922 9.19401 19.6013 9.52652L11.9992 18.2146L4.39717 9.52652C4.10622 9.19401 4.13992 8.6886 4.47243 8.39766Z" fill="currentColor"></path></g></svg> </a> <p class="ti__desc" data-astro-cid-pgwj27j2>언제 시작하고, 단계마다 몇 번·얼마나·어떤 질감으로 먹이는지 순서대로 정리했어요.</p> </li><li data-astro-cid-pgwj27j2> <a href="/category/ingredients/" data-astro-cid-pgwj27j2> <span class="ti__name" data-astro-cid-pgwj27j2>재료·영양</span> <span class="ti__count num" data-astro-cid-pgwj27j2>글 3편</span> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g transform="rotate(-90 12 12)"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.47243 8.39766C4.80494 8.10671 5.31035 8.1404 5.60129 8.47291L11.9992 15.7848L18.3972 8.47291C18.6881 8.1404 19.1935 8.10671 19.526 8.39766C19.8585 8.6886 19.8922 9.19401 19.6013 9.52652L11.9992 18.2146L4.39717 9.52652C4.10622 9.19401 4.13992 8.6886 4.47243 8.39766Z" fill="currentColor"></path></g></svg> </a> <p class="ti__desc" data-astro-cid-pgwj27j2>재료를 들이는 순서와 시기, 철분 챙기기, 돌 전에 피할 음식을 다뤄요.</p> </li><li data-astro-cid-pgwj27j2> <a href="/category/safety/" data-astro-cid-pgwj27j2> <span class="ti__name" data-astro-cid-pgwj27j2>알레르기·위생</span> <span class="ti__count num" data-astro-cid-pgwj27j2>글 4편</span> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g transform="rotate(-90 12 12)"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.47243 8.39766C4.80494 8.10671 5.31035 8.1404 5.60129 8.47291L11.9992 15.7848L18.3972 8.47291C18.6881 8.1404 19.1935 8.10671 19.526 8.39766C19.8585 8.6886 19.8922 9.19401 19.6013 9.52652L11.9992 18.2146L4.39717 9.52652C4.10622 9.19401 4.13992 8.6886 4.47243 8.39766Z" fill="currentColor"></path></g></svg> </a> <p class="ti__desc" data-astro-cid-pgwj27j2>알레르기 반응을 알아보고 대처하는 법, 이유식을 안전하게 만들고 보관하는 법을 모았어요.</p> </li><li data-astro-cid-pgwj27j2> <a href="/category/habits/" data-astro-cid-pgwj27j2> <span class="ti__name" data-astro-cid-pgwj27j2>먹는 습관</span> <span class="ti__count num" data-astro-cid-pgwj27j2>글 4편</span> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g transform="rotate(-90 12 12)"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.47243 8.39766C4.80494 8.10671 5.31035 8.1404 5.60129 8.47291L11.9992 15.7848L18.3972 8.47291C18.6881 8.1404 19.1935 8.10671 19.526 8.39766C19.8585 8.6886 19.8922 9.19401 19.6013 9.52652L11.9992 18.2146L4.39717 9.52652C4.10622 9.19401 4.13992 8.6886 4.47243 8.39766Z" fill="currentColor"></path></g></svg> </a> <p class="ti__desc" data-astro-cid-pgwj27j2>이유식을 거부할 때, 손으로 집어 먹기와 자기주도 이유식을 시작할 때 참고하세요.</p> </li> </ul> </div> </section></div></section></main>
css
.dont-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.dont-col{min-width:0}
.dont-col+.dont-col{border-left:1px dashed #a8a29e}
@media (max-width:599px){.dont-wrap{grid-template-columns:minmax(0,1fr)}.dont-col+.dont-col{border-left:0;border-top:1px dashed #a8a29e}}
@media (max-width:340px){.dont-wrap .dsx-label{display:flex}}
.dont-bad{padding:8px 16px 22px;font:15px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:var(--c-text,#1c1917)}
.dont-bad *{box-sizing:border-box}
.dont-real{padding-bottom:12px}
.dont-note{margin-top:12px;font:12px/1.5 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:#6b645c}
:root.dark .dont-note{color:#a59c91}
.dont-card{background:#fff;color:#1f2937;border-radius:8px;padding:14px 16px;margin-bottom:12px;font:15px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}
.dont-card b{display:block;margin-bottom:4px}

.dont-feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;text-align:center}
.dont-feat-i{background:#fff;color:#1f2937;border-radius:10px;padding:14px 8px}
.dont-feat-c{width:40px;height:40px;margin:0 auto 8px;border-radius:50%;background:#e0e7ff;position:relative}
.dont-feat-c::after{content:"";position:absolute;inset:12px;border-radius:3px;background:#6366f1}
.dont-feat-t{font-weight:700;font-size:14px}
.dont-feat-s{margin-top:4px;font-size:12px;line-height:1.5;color:#4b5563}

An icon in a colored circle, a two-word title under it, a sentence under that, and three of those side by side. It is the stock layout for filling in “our features,” and one of the reasons sites look like the same AI site. And when the icon stands in for the meaning, readers move on before reading.

Part of it is blocked by a machine. check-ai-tells counts a rule as a “circled icon” when its selector contains icon, ico or svg and it rounds the corners fully (50% or pill), and fails above zero. The “three in a row” composition itself cannot be recognized by a machine, so a person checks that in the gallery.

Show the structure the content really has instead. The index variant on the right lines up topic name, post count and a one-line description as rows, with a single small arrow at the end. It reads fine without icons, and with them they are only helpers.

When to use

Think of it when adding “three features” to the home or About page. First ask whether they are real information; if so, write them as rows or a table.

Open as page ↗

Suggest an entry

Tell us about a missing component or variant, or something a pack should fix. We read every suggestion.