Figure
Figure 是 HTML5 的新標籤,代表一段獨立內容,經常作為圖文說明使用。可配合 <figcaption>
用於字幕做說明來使用。
使用方式
Figure 預設寬度為 100%,依照父層寬度來做彈性變化。以下為 Figure 與其他元件各種搭配的使用方式。
預設樣式
<figure>
可置入 <img>
、<svg>
、<embed>
、<video>
、.embed
元件等等,文字說明則使用 <figcaption>
。
<figure>
<img src="{path}" alt="">
<figcaption>~略~</figcaption>
</figure>
如果要使文案置右,可在 <figcaption>
加上 .u-align:r
;文字置中可使用 .u-align:c
,可參考 Utilities 文件。
<figure>
<img src="{path}" alt="">
<figcaption class="u-align:r">~略~</figcaption>
</figure>
此外,文案也可以放置於多媒體元素之前。
<figure>
<figcaption>~略~</figcaption>
<img src="{path}" alt="">
</figure>
除了多媒體元素之外,也可以放置 <p>
、<blockquote>
、<pre.code>
<figure>
<p></p>
<figcaption>~略~</figcaption>
</figure>
<figure>
<blockquote></blockquote>
<figcaption>~略~</figcaption>
</figure>
<figure>
<pre class="code"></pre>
<figcaption>~略~</figcaption>
</figure>
樣式
Polariod
在 <figure>
加上 :polariod
。
<figure class=":polariod"></figure>
Card
在 <figure>
加上 :card
。
<figure class=":card"></figure>