共通事項について

パーツを使用する際には先に該当するCSSファイルをheadで指定する必要があります。

CSSの設計上パーツごとにCSSファイルを分けており、必要なページで必要なコードだけを指定することでブラウザの表示速度の向上を目指しています。

パーツを使用するには、該当のCSSファイルをheadタグのとの間に挿入します。

既存のHTMLファイルやテンプレートファイルを見るとCSSファイルが大量に指定されていると思います。
一応CSSを読み込む順番があり、CSSが格納されているフォルダの順番で指定しています。

foundationフォルダ→layoutフォルダ→componentフォルダ→utilityフォルダ→pagesフォルダ

基本的にはcomponent系の最後に追加するのが良いですが、迷ったらの上でも。

CSSファイルの指定には相対パスを採用しているので階層によってパスの先頭の書き方が異なります。

TOPページであれば./assets/css/component/xxx.cssになり、第2階層の場合は../assets/css/component/xxx.css、第3階層の場合は../../assets/css/component/xxx.cssとなります。

吹き出し

以下のようなパーツが使用できます。

以下のようなパーツが使用できます。

以下のようなパーツが使用できます。
ボーダーの有無のカスタマイズはもちろん、画像やタグがなくても崩れないようになっているのでお好きにカスタマイズして使えます。

headにCSSファイルを指定します。
以下の例は子ページ（第二階層）での例です。

以下のHTMLを挿入します。
タグや画像などが不要であれば削除し、見出しなどのタグは適宜変更してください。

また、カード型のパーツは全幅になっているため、横幅を制御したい場合はこのHTMLの親要素にリスト（ulなど）やdivなどでラップしてスタイル調整してください。
横並びも同様です。