tailwindcssで、ブログコンテンツに、サムネイル画像とタイトルとコンテンツを一纏めのブロックにできるCardが便利すぎて。
サイトのここに欲しいけど、自作で作るのはちょっとシンドいという時に便利なUIキット。
でも毎回UIキットを開いて試して、やっぱりイメージと違うからと別のUIキットを探して…となるので、個人的に使ってみて便利だったCardのみを抜き出してみました。
基本無料で使えるサイトがメインです。
preline
prelineのカードはパターンも豊富で使いやすい。サムネイルはcard幅固定。
pines
パターンは少ないけど、ui kit自体が使いやすくベースにする場合も多いので。Blogページは有料コンテンツだけど、Cardのレイアウトの参考に。
HyperUI
CardとBlog Cardが分かれていて、どちらもデザインが良くて使いやすい。サムネイルの位置を調整する際にはMedia Componentsが最強ツールになります。
Wickedblocks
Cardのリストレイアウトが検索結果などにとても参考になります。とくに縦のリストの例がありがたい。
Meraki UI
ちょっとCardからサムネイルがはみ出していたりとデザイン性高めが多いです。使いどころはその分難しい。
tailwind-kit
タグやカテゴリーを入れた場合などステップごとに分かれていて、ブログページのCardレイアウトにおすすめ。
tailblocks.cc
もはや全部Cardに見える。
Sailboart UI
Simple、With photo、Background、With Listの４種。どれも実践志向でありがたい。
TailwindFlex
まとめ的な。個性的なものも多いけど、この中から探すのはかなり大変。どうしても見つからない時に。
burnworks
日本語ウェブサイトに最適化されたUIライブラリ。企業サイトに採用するとカッチリハマります。
まとめ
迷ったらバーっと広げて、気になるものだけをピックアップしてみると自分のほしかったものがわかるかも。
結局、最後に調整しても気に入らず、オリジナルで作ることになることも多いですが、ヒントにはなるはず。
サイトによっては追加のJSライブラリが必要なので、使うときはライセンスとInstallationを見ましょう。
参考