Kule Lazy 4

Typography

Lazy4 在文字排版有預設的設定項目與參數，包含標題、段落、行高、字形、字級、字寬、邊距等等。針對不同的 [lang] 也有些微字形調整，例如目前新增針對日文 [lang=ja] 會優先使用日文預設字形。

全域設定

  • 字級：16px
  • 行高：1.625 (約 26px)
  • 字寬：400
  • 文字顏色：rgba(0,0,0,0.87)

字形設定

主要字形以無襯線體為主，在中文來說相當是黑體類型的字形。初始會以系統預設為主，同時彙整常見系統的預設或較美觀的內建字形。

  • 系統預設字形：system-ui
  • MacOS 和 iOS：-apple-system
  • MacOS 上的 Chrome：BlinkMacSystemFont
  • Windows 和 Windows Phone：Segoe UI
  • Android 和 ChromeOS：Roboto
  • Linux：Ubuntu
  • KDE：Oxygen
  • GNOME：Cantarell
  • Firefox OS：Fira Sans
  • 舊版 Android：Droid Sans
  • 傳統黑體字形：Helvetica, Arial, sans-serif

使用中文

如果網站內容以中文為主，可在 <html> 加上屬性 <html lang="zh"> 或 <html lang="zh">，如果是局部區域使用中文字形，也可在該標籤上加上屬性，例如 <p lang="zh">

  • MacOS 中文：蘋方體、冬青黑、黑體、儷黑 Pro
  • Windows 中文：微軟正黑體、微軟新雅黑、微軟雅黑體
  • Linux 中文：文泉驛正黑

使用日文

如果要使用日文字形，使用方式與上述中文字形相同，但將 zh 改為 ja，例如：<html lang="ja">

  • MacOS 日文：冬青黑、冬青黑 Kaku Gothic Pro、ヒラギノ角ゴ Pro W3、ヒラギノ丸ゴ ProN W4、游ゴシック、游ゴシック体
  • Windows 日文：ＭＳ ゴシック、Osaka、ＭＳ Ｐゴシック

標題 Headers

從 <h1> 到 <h6> 都能使用，並且有各自的字級、行高。Lazy4 版本預設的邊距為零，依據不同使用狀況可搭配 Utilities 提供的 Margin 使用。

h1
字級：2.25x
字寬：200
小腹三層豈一日之饞
石の上にも三年
The climbing of a height begins at the base.
h2
字級：2x
字寬：200
小腹三層豈一日之饞

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約三點六萬平方公里，為世界第卅八大島嶼，其中七成為山地與丘陵，平原則主要集中於西部沿海，地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。

石の上にも三年

日本語（にほんご、にっぽんご）は、主に日本国内や日本人同士の間で使用されている言語である。日本は法令によって公用語を規定していないが、法令その他の公用文は全て日本語で記述され、各種法令において日本語を用いることが規定され、学校教育においては「国語」として学習を課されるなど、事実上、唯一の公用語となっている。

The climbing of a height begins at the base.

English is a West Germanic language that was first spoken in early medieval England and eventually became a global lingua franca. It is named after the Angles, one of the Germanic tribes that migrated to the area of Great Britain that later took their name, as England

h3
字級：1.5x
字寬：400
小腹三層豈一日之饞

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約三點六萬平方公里，為世界第卅八大島嶼，其中七成為山地與丘陵，平原則主要集中於西部沿海，地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。

石の上にも三年

日本語（にほんご、にっぽんご）は、主に日本国内や日本人同士の間で使用されている言語である。日本は法令によって公用語を規定していないが、法令その他の公用文は全て日本語で記述され、各種法令において日本語を用いることが規定され、学校教育においては「国語」として学習を課されるなど、事実上、唯一の公用語となっている。

The climbing of a height begins at the base.

English is a West Germanic language that was first spoken in early medieval England and eventually became a global lingua franca. It is named after the Angles, one of the Germanic tribes that migrated to the area of Great Britain that later took their name, as England

h4
字級：1.375x
字寬：400
小腹三層豈一日之饞

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約三點六萬平方公里，為世界第卅八大島嶼，其中七成為山地與丘陵，平原則主要集中於西部沿海，地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。

石の上にも三年

日本語（にほんご、にっぽんご）は、主に日本国内や日本人同士の間で使用されている言語である。日本は法令によって公用語を規定していないが、法令その他の公用文は全て日本語で記述され、各種法令において日本語を用いることが規定され、学校教育においては「国語」として学習を課されるなど、事実上、唯一の公用語となっている。

The climbing of a height begins at the base.

English is a West Germanic language that was first spoken in early medieval England and eventually became a global lingua franca. It is named after the Angles, one of the Germanic tribes that migrated to the area of Great Britain that later took their name, as England

h5
字級：1.125x
字寬：500
小腹三層豈一日之饞

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約三點六萬平方公里，為世界第卅八大島嶼，其中七成為山地與丘陵，平原則主要集中於西部沿海，地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。

石の上にも三年

日本語（にほんご、にっぽんご）は、主に日本国内や日本人同士の間で使用されている言語である。日本は法令によって公用語を規定していないが、法令その他の公用文は全て日本語で記述され、各種法令において日本語を用いることが規定され、学校教育においては「国語」として学習を課されるなど、事実上、唯一の公用語となっている。

The climbing of a height begins at the base.

English is a West Germanic language that was first spoken in early medieval England and eventually became a global lingua franca. It is named after the Angles, one of the Germanic tribes that migrated to the area of Great Britain that later took their name, as England

h6
字級：1x
字寬：500
小腹三層豈一日之饞

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約三點六萬平方公里，為世界第卅八大島嶼，其中七成為山地與丘陵，平原則主要集中於西部沿海，地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。

石の上にも三年

日本語（にほんご、にっぽんご）は、主に日本国内や日本人同士の間で使用されている言語である。日本は法令によって公用語を規定していないが、法令その他の公用文は全て日本語で記述され、各種法令において日本語を用いることが規定され、学校教育においては「国語」として学習を課されるなど、事実上、唯一の公用語となっている。

The climbing of a height begins at the base.

English is a West Germanic language that was first spoken in early medieval England and eventually became a global lingua franca. It is named after the Angles, one of the Germanic tribes that migrated to the area of Great Britain that later took their name, as England

<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>

標題樣式

或許在某些時候單純只需要 <h1> 到 <h6> 字級級數，可以直接使用 .h1 到 .h6，樣式與上方相同。

<div class="h1"></div> <div class="h2"></div> <div class="h3"></div> <div class="h4"></div> <div class="h5"></div> <div class="h6"></div>

副標題 Subheaders

某些時候需要連續使用不同級數的 Header，但需要在比重上有些落差時，可在 Header 加上 .subheader，Subheader 會降低透明度至 54% 與 Header 產生層次感。使用 Subheader 時，建議使用 <h3> 至 <h6> 級別的標籤

主標題

小標題

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約三點六萬平方公里，為世界第卅八大島嶼，其中七成為山地與丘陵，平原則主要集中於西部沿海，地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。

ヘッダー

サブヘッダー

日本語（にほんご、にっぽんご）は、主に日本国内や日本人同士の間で使用されている言語である。日本は法令によって公用語を規定していないが、法令その他の公用文は全て日本語で記述され、各種法令において日本語を用いることが規定され、学校教育においては「国語」として学習を課されるなど、事実上、唯一の公用語となっている。

Header

Subheader

English is a West Germanic language that was first spoken in early medieval England and eventually became a global lingua franca. It is named after the Angles, one of the Germanic tribes that migrated to the area of Great Britain that later took their name, as England

<h4>主標題</h4> <h6 class="subheader">小標題</h6> <p>~略~</p>

標題內使用小號本文

在 Header 裡使用 small 時，字級會變小 87.5% 並且透明度會降低至 70%

主標題 這裡是 small

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約三點六萬平方公里，為世界第卅八大島嶼，其中七成為山地與丘陵，平原則主要集中於西部沿海，地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。

ヘッダー これは small

日本語（にほんご、にっぽんご）は、主に日本国内や日本人同士の間で使用されている言語である。日本は法令によって公用語を規定していないが、法令その他の公用文は全て日本語で記述され、各種法令において日本語を用いることが規定され、学校教育においては「国語」として学習を課されるなど、事実上、唯一の公用語となっている。

Header This is small

English is a West Germanic language that was first spoken in early medieval England and eventually became a global lingua franca. It is named after the Angles, one of the Germanic tribes that migrated to the area of Great Britain that later took their name, as England

<h4> h4.主標題 <small>小號本文</small> </h4> <p>~略~</p>

Displays

Headers 主要用於內文上的標題，在網頁上常見的 KV, Banner 或大篇幅圖片上需要使用字級更大、更凸出、更有特色的標題時，可用 Display 取代 Header，或是直接在 Header 加上 Display 的 Class。

Display 1
字級：6x
字寬：100
小腹三層豈一日之饞
石の上にも三年
The climbing of a height begins at the base.
Display 2
字級：4.5x
字寬：200
小腹三層豈一日之饞
石の上にも三年
The climbing of a height begins at the base.
Display 3
字級：3x
字寬：200
小腹三層豈一日之饞
石の上にも三年
The climbing of a height begins at the base.
<div class="typo-d1">~略~</div> <div class="typo-d2">~略~</div> <div class="typo-d3">~略~</div>

段落樣式

文字段落是最常用的標籤之一，預設上方邊距為 0.625em，下方邊距為 1.25em。使用 <p> 標籤，除預設樣式之外皆以 .para 為前綴詞。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque, ea eum eveniet ex, explicabo fuga impedit incidunt iste maiores maxime molestiae officia quia quibusdam, quos reprehenderit sint vel voluptas?

孫子曰：兵者，國之大事，死生之地，存亡之道，不可不察也。
故經之以五，校之以計，而索其情：一曰道，二曰天，三曰地，四曰將，五曰法。

本職の詩人ともなれば、いつどんな注文があるか、わからないから、常に詩材の準備をして置くのである。「秋について」という注文が来れば、よし来た、と「ア」の部の引き出しを開いて、愛、青、赤、アキ、いろいろのノオトがあって、そのうちの、あきの部のノオトを選び出し、落ちついてそのノオトを調べるのである。

<p>~略~</p>

前導段落

在 <p> 加上 .para-lead，字級會增加 25%、行高減少 12.5%。適用於文章開頭需要增強的段落。

Chapter 1

You don’t know about me without you have read a book by the name of The Adventures of Tom Sawyer; but that ain’t no matter.

That book was made by Mr. Mark Twain, and he told the truth, mainly. There was things which he stretched, but mainly he told the truth. That is nothing. I never seen anybody but lied one time or another, without it was Aunt Polly, or the widow, or maybe Mary. Aunt Polly—Tom’s Aunt Polly, she is—and Mary, and the Widow Douglas is all told about in that book, which is mostly a true book, with some stretchers, as I said before.

<h4>~略~</h4> <p class="para-lead">~略~</p> <p>~略~</p>

首字放大

在 <p> 加上 .para-dropcap，第一個文字或字母會放大至 285%，約兩行文字的高度。

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約三點六萬平方公里，為世界第卅八大島嶼，其中七成為山地與丘陵，平原則主要集中於西部沿海，地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。

日本語（にほんご、にっぽんご）は、主に日本国内や日本人同士の間で使用されている言語である。日本は法令によって公用語を規定していないが、法令その他の公用文は全て日本語で記述され、各種法令において日本語を用いることが規定され、学校教育においては「国語」として学習を課されるなど、事実上、唯一の公用語となっている。

English is a West Germanic language that was first spoken in early medieval England and eventually became a global lingua franca. It is named after the Angles, one of the Germanic tribes that migrated to the area of Great Britain that later took their name, as England

<p class="para-dropcap">~略~</p>

Phrases

小號本文

字級縮小約 12.5%，使用 <small> 標籤

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望。

<p>臺灣是位於亞洲東部、<small>太平洋西北側的島嶼</small>，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望。</p>
刪除本文

顯示刪除線並且透明度降低至 38%，使用 <del> 標籤

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望。

<p>臺灣是位於亞洲東部、<del>太平洋西北側的島嶼</del>，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望。</p>
插入本文

顯示虛底線，使用 <ins> 標籤

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望。

<p>臺灣是位於亞洲東部、<ins>太平洋西北側的島嶼</ins>，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望。</p>
標示文字

標示段落中的某段文字，增加底色與底線樣式，使用 <mark> 標籤

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望。

<p>臺灣是位於亞洲東部、<mark>太平洋西北側的島嶼</mark>，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望。</p>
上標與下標

使用 <sup> 與 <sub> 標籤

臺灣自然景觀與生態系資源相當豐富而多元[8] 。現今人口約兩千三百萬，構成上以原住民族與漢族為兩大民族[9] ，或分為原住民族、河洛人、客家人、外省人、新住民等五大族群

<p>臺灣自然景觀與生態系資源相當豐富而多元<sup>[8]</sup> 。現今人口約兩千三百萬，構成上以原住民族與漢族為兩大民族<sub>[9]</sub> ，或分為原住民族、河洛人、客家人、外省人、新住民等五大族群</p>

分隔線

用於分隔內文，上下邊距各為約 20px，使用 <hr> 標籤，除預設樣式之外皆以 .hr 為前綴詞。

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約3.6萬平方公里， 為世界第38大島嶼。

由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。現今人口約兩千三百萬，構成上以原住民族與漢族為兩大民族，或分為原住民族、河洛人、客家人、外省人、新住民等五大族群，其中河洛人為最大群體。

<p>~略~</p> <hr> <p>~略~</p>

分隔留白

無邊線，適用需要區隔一個空間時。在 <hr> 加上 .hr-spacer

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約3.6萬平方公里， 為世界第38大島嶼。

由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。現今人口約兩千三百萬，構成上以原住民族與漢族為兩大民族，或分為原住民族、河洛人、客家人、外省人、新住民等五大族群，其中河洛人為最大群體。

<p>~略~</p> <hr class="hr-spacer"> <p>~略~</p>

分隔空間

需要不同大小的分隔空間，可透過 .sz:{倍數} 來達成。目前提供 0, 1/4, 1/2, 2x, 3x, 4x。

<hr class="sz:0"> <hr class="sz:quarter"> <hr class="sz:half"> <hr class="sz:2x"> <hr class="sz:3x"> <hr class="sz:4x">

垂直分隔線

當內容是水平排列需要分隔線時，可在 <hr> 加上 .hr-vertical

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約3.6萬平方公里， 為世界第38大島嶼。
由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。現今人口約兩千三百萬，構成上以原住民族與漢族為兩大民族，或分為原住民族、河洛人、客家人、外省人、新住民等五大族群，其中河洛人為最大群體。
<hr class="hr-vertical">

垂直分隔線同時可搭配雙線樣式、留白樣式、以及設定分隔空間。

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約3.6萬平方公里， 為世界第38大島嶼。
由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。現今人口約兩千三百萬，構成上以原住民族與漢族為兩大民族，或分為原住民族、河洛人、客家人、外省人、新住民等五大族群，其中河洛人為最大群體。
<hr class="hr-vertical hr-double-line">

引言

在文章中引用其他來源的內容。使用 <blockquote> 標籤。

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約三點六萬平方公里，為世界第卅八大島嶼，其中七成為山地與丘陵，平原則主要集中於西部沿海，地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。
<blockquote">臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約三點六萬平方公里，為世界第卅八大島嶼，其中七成為山地與丘陵，平原則主要集中於西部沿海，地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。</blockquote">

顯示出處

在 <blockquote> 加上 [cite] 屬性與值

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約三點六萬平方公里，為世界第卅八大島嶼，其中七成為山地與丘陵，平原則主要集中於西部沿海，地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。
<blockquote cite="維基百科">~略~</blockquote">

或是在 <blockquote> 內加上 <cite> 標籤

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約三點六萬平方公里，為世界第卅八大島嶼，其中七成為山地與丘陵，平原則主要集中於西部沿海，地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。 維基百科
<blockquote> ~略~ <cite>維基百科</cite> </blockquote>

引言符號

在 <blockquote> 加上 .bq-symbol。

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約三點六萬平方公里，為世界第卅八大島嶼，其中七成為山地與丘陵，平原則主要集中於西部沿海，地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。
<blockquote class="bq-symbol">~略~</blockquote">

深色主題

在 <blockquote> 加上 .theme:dark。

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約三點六萬平方公里，為世界第卅八大島嶼，其中七成為山地與丘陵，平原則主要集中於西部沿海，地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。
<blockquote class="theme:dark">~略~</blockquote">

清單 List

Lazy4 的清單樣式使用 HTML 預設模式。

有序清單 Ordered List

有序清單指的是有序號排列的清單，預設清單符號為數字。使用 <ol> 標籤。

  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
  4. Ordered list item
  5. Ordered list item
<ol> <li>~略~</li> <li>~略~</li> <li>~略~</li> </ol">

無序清單 Unordered List

無序清單指的是有無序號排列的清單，預設清單符號為實心圓。使用 <ul> 標籤。

  • Unordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item
<ul> <li>~略~</li> <li>~略~</li> <li>~略~</li> </ul>

混合使用 Mixed List

當有序清單為清單裡的子元素時，清單符號會變為 0 開頭的數字；無序清單則變為空心圓。

  1. Ordered list item
    1. Ordered list item
    2. Ordered list item
    3. Ordered list item
    4. Ordered list item
    5. Ordered list item
  2. Ordered list item
  3. Ordered list item
  4. Ordered list item
    • Unordered list item
    • Unordered list item
    • Unordered list item
    • Unordered list item
    • Unordered list item
  5. Ordered list item
  • Unordered list item
    1. Ordered list item
    2. Ordered list item
    3. Ordered list item
    4. Ordered list item
    5. Ordered list item
  • Unordered list item
  • Unordered list item
    • Unordered list item
    • Unordered list item
    • Unordered list item
    • Unordered list item
    • Unordered list item
  • Unordered list item
  • Unordered list item
<ol> <li> <ul> <li></li> </ul> </li> </ol>

多層級清單 Multi-layer Ordered List

在 <ol> 加上 .ooo後，可以呈現多層級有序清單編號，如果無序清單為子元素，符號則會變為箭頭符號。

  1. 臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約三點六萬平方公里，為世界第卅八大島嶼，其中七成為山地與丘陵，平原則主要集中於西部沿海，地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。
  2. Ordered List Item
    1. Ordered List Item
      1. Ordered List Item
      2. Ordered List Item
      3. Ordered List Item
        1. Ordered List Item
        2. Ordered List Item
        3. Ordered List Item
          1. Ordered List Item
          2. Ordered List Item
          3. Ordered List Item
            1. Ordered List Item
            2. Ordered List Item
            3. Ordered List Item
    2. Ordered List Item
    3. Ordered List Item
    • Unordered List Item
    • Unordered List Item
    • Unordered List Item
  3. Ordered List Item
<ol class="ooo"></ol>

描述清單 Description List

描述清單以一個小標與描述為一組，可在一個 <dl> 內使用多組 <dt> 與 <dd>。除預設樣式之外其餘樣式皆以 .dl- 為前綴詞。

小腹三層豈一日之饞
臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約三點六萬平方公里，為世界第卅八大島嶼，其中七成為山地與丘陵，平原則主要集中於西部沿海，地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。
石の上にも三年
日本語（にほんご、にっぽんご）は、主に日本国内や日本人同士の間で使用されている言語である。日本は法令によって公用語を規定していないが、法令その他の公用文は全て日本語で記述され、各種法令において日本語を用いることが規定され、学校教育においては「国語」として学習を課されるなど、事実上、唯一の公用語となっている。
The climbing of a height begins at the base.
English is a West Germanic language that was first spoken in early medieval England and eventually became a global lingua franca. It is named after the Angles, one of the Germanic tribes that migrated to the area of Great Britain that later took their name, as England
<dl> <dt>~略~</dt> <dd>~略~</dd> <dt>~略~</dt> <dd>~略~</dd> </dl>

有序描述清單

使一個 <dt> 可搭配多個 <dd> 並且加上序號。在 <dl> 加上 .dl-ordered

自然地理
地質
地形
水文
氣候
生物
人文地理
人口與民族
世界遺產潛力點
<dl class="dl-ordered"> <dt>~略~</dt> <dd>~略~</dd> <dd>~略~</dd> <dd>~略~</dd> <dt>~略~</dt> <dd>~略~</dd> <dd>~略~</dd> </dl>

水平排列

使一個 <dt> 可搭配多個 <dd> 並且加上序號。在 <dl> 加上 .dl-horizontal

自然地理
臺灣西與西北臨臺灣海峽，距歐亞大陸（主要距福建）海岸平均距離約200公里，臺灣海峽最窄之處為臺灣新竹縣到中國福建省平潭島，直線距離約130公里。
人文地理
包括臺灣與附屬的22座小島，以及臺灣海峽中澎湖群島的90座島嶼。目前臺灣約佔中華民國實際行政區域面積98%，其約位於東經120度至122度、北緯22度至25度之間，北迴歸線經過嘉義縣水上鄉與花蓮縣瑞穗鄉、豐濱鄉等地 。
<dl class="dl-horizontal"> <dt>~略~</dt> <dd>~略~</dd> <dt>~略~</dt> <dd>~略~</dd> </dl>

Address

使用 <address> 標籤。

誠品敦南店
台灣 台北市 10689
敦化南路一段245號
服務電話: (02)2775-5977
<address> <h6>誠品敦南店</h6> 台灣 台北市 10689<br> 敦化南路一段245號<br> 服務電話: (02)2775-5977 </address>

卡片樣式

在 <address> 加上 .vcard

誠品敦南店
台灣 台北市 10689
敦化南路一段245號
服務電話: (02)2775-5977
<address class="vcard"> <h6>誠品敦南店</h6> 台灣 台北市 10689<br> 敦化南路一段245號<br> 服務電話: (02)2775-5977 </address>

給編輯器

在開發過程中，經常會使用像是 CK Editor 這類的編輯器，讓使用者或客戶能夠像是使用 Word 一樣編輯內文，為了能讓編輯器內容延續 Lazy4 樣式，可將編輯器內容放置 .article 內。

<div class="article">~編輯器內容~</div>

襯線體

在英文中稱為襯線體，在中文則稱為明體。如果要使用襯線體風格，可加上 .u-ft:serif。

古文觀止　陋室銘

劉禹錫

山不在高，有仙則名；
水不在深，有龍則靈。
斯是陋室，惟吾德馨。
苔痕上階綠，草色入簾青；
談笑有鴻儒，往來無白丁。
可以調素琴，閱金經；
無絲竹之亂耳，
無案牘之勞形。
南陽諸葛廬，西蜀子雲亭。
孔子云：「何陋之有？」

ア、秋

太宰治

本職の詩人ともなれば、いつどんな注文があるか、わからないから、常に詩材の準備をして置くのである。 「秋について」という注文が来れば、よし来た、と「ア」の部の引き出しを開いて、愛、青、赤、アキ、いろいろのノオトがあって、そのうちの、あきの部のノオトを選び出し、落ちついてそのノオトを調べるのである。

The Cardinal Virtue of Prose

Arthur Clutton-Brock

Prose of its very nature is longer than verse, and the virtues peculiar to it manifest themselves gradually. If the cardinal virtue of poetry is love, the cardinal virtue of prose is justice; and, whereas love makes you act and speak on the spur of the moment, justice needs inquiry, patience, and a control even of the noblest passions.

<div class="u-ft:serif" lang="zh">~略~</div>

直式書寫

可在任意容器標籤加上 .article 與 :vertical，也可搭配襯線樣式使用。適合中文與日文使用。

古文觀止　陋室銘

劉禹錫

山不在高，有仙則名；
水不在深，有龍則靈。
斯是陋室，惟吾德馨。
苔痕上階綠，草色入簾青；
談笑有鴻儒，往來無白丁。
可以調素琴，閱金經；
無絲竹之亂耳，
無案牘之勞形。
南陽諸葛廬，西蜀子雲亭。
孔子云：「何陋之有？」

ア、秋

太宰治

本職の詩人ともなれば、いつどんな注文があるか、わからないから、常に詩材の準備をして置くのである。 「秋について」という注文が来れば、よし来た、と「ア」の部の引き出しを開いて、愛、青、赤、アキ、いろいろのノオトがあって、そのうちの、あきの部のノオトを選び出し、落ちついてそのノオトを調べるのである。

<div class="article :vertical">~略~</div>