内容区

内容区大多数被设计用来添加需要额外格式化和要求间距的文本内容：

...
<div class="page-content">
    <p>This paragraph is outside of content block. Not cool, but useful for any custom elements with custom styling.</p>
 
    <!-- Content block -->
    <div class="content-block">
        <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
    </div>
 
    <!-- We can wrap content with additional "content-block-inner" element for additional highlighting -->
    <div class="content-block">
      <div class="content-block-inner">Here comes another text block additionaly wrapped with "content-block-inner". Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales. Integer blandit varius nisi quis consectetur. </div>
    </div>
 
    <!-- Add ".content-block-title" to add block's title -->
    <div class="content-block-title">Content block title</div>
    <div class="content-block">
        <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
    </div>
 
    <div class="content-block-title">Another ultra long content block title</div>
    <div class="content-block">
      <div class="content-block-inner">
        <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
      </div>
    </div>
 
    <div class="content-block-title">Inset</div>
    <!-- Inset content block -->
    <div class="content-block inset">
      <div class="content-block-inner">
        <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
      </div>
    </div>
 
    <div class="content-block-title">Tablet Inset</div>
    <!-- This block will be inset only on tablets -->
    <div class="content-block tablet-inset">
      <div class="content-block-inner">
        <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
      </div>
    </div>
 
</div>
 
...          

注意,只有在“content-block”或“list-block”前可以使用“content-block-title”！