Arkui

Basic UI components for Douban Read.

Typography

<p>Bold text works for emphasis<em>emphasis</em>, but it is harder to read.</p>

<p>Type set in italics<i>italics</i>can lose legibility. Word shapes shift as sans serif fonts slant over to one side. Spacing within and between letters gets lost as serif fonts tend to get narrower and closer together in their italic form. Readers have to slow down to process the word shapes.</p>

h1 / 一级标题

h2 / 二级标题

h3 / 三级标题

Two Column List.list-col2

  • 134 x 297
  • 134 x 297
  • 134 x 297
  • 134 x 297

Five Column List.list-col5

  • cover
  • cover
  • cover
  • cover
  • cover

Buttons

ButtonInputclass=""Description
btnStandard button in Store
btn btn-minorUsually appears with standard button
btn btn-infoInfo button for the particular entry
btn btn-readDouban Read exclusive button
btn btn-greenSage green button, used for submission
btn btn-disabledDisabled button
btn-linkLink-like button

Tables

NameClassDescription
DefaultNoneNo styles, just columns and rows
Basic.tableOnly horizontal lines between rows
Bordered.table-borderedRounds corners and adds outer border
Striped.table-stripedAdds background color to odd rows

Forms

Horizontal Form

Multi inline input

Block help text for current field

Inline help textInline help text