DataList

items に一行ずつ title と、必要なら description・meta を渡します。start には Avatar や塗りつぶしの Icon を、end には Badge・Button・日付や件数を置きます。題名は本文の大きさ（13px）の黒い太字です。description は題名と同じ大きさの灰色（#666）の抜粋で、「 - 」に続けて題名と同じ行に続けます。meta は投稿者や日付を書く茶色の小さな文字（11px）で、題名の下に置きます。end に置いた日付などの文字は、題名と同じ大きさの茶色になります。start の Avatar は30pxの大きさで行の上端にそろえ、題名の列はその右10pxから始めます。

href を渡した行は題名が青緑の太字に1pxの下線のリンク（ホバーで赤）になり、押せる範囲を行全体に広げます。ホバーすると行を淡い黄色で塗り、押している間は黄色のハイライト（#ffffcc）にします。end の操作はリンクの上に重ねて押せます。href の無い行は押せない行として表示します。

current の行は、今開いている行として黄色のハイライト（#ffffcc）で示します。面は角を丸めず、行の幅いっぱいに塗ります。

行の間には、行の幅いっぱいに1px #ececec の罫線を引いて区切ります。行の左右に余白はありません。配置先の幅が28rem以上なら end を右の列に置き、狭ければ説明の下に並べます。長い題名やURLも省略せずに折り返します。

JavaScriptは使いません。