Charming Pro Documentation

Blocks

Blocks are a metaphor for the building blocks of a website that are vertically stacked on top of each other. In Charming, a block adds padding and a slight background gradient. There are also helper classes for borders and titles.

As an example, the FAQ section in the Startup example is a block.

Block

A component for structuring content

I am a small block for demonstration purposes.

<div class="block">
  <div class="container">
    <div class="block-heading">
      <h2 class="block-title">Block</h2>
      <h5 class="block-subtitle">A component for structuring content</h5>
    </div>

    <p>I am a small block for demonstration purposes.</p>
  </div>
</div>

Borders

Add borders to the top or bottom of a block with block-bb and block-bt. Depending on what is neighboring a block, this may or may not be necessary.

Block 1

I am block number 1

Block 2

I am block number 2. I have borders.

Block 3

I am block number 3
<div class="block">
    <div class="block-heading">
      <h2 class="block-title">Block 1</h2>
      <h5 class="block-subtitle">I am block number 1</h5>
    </div>
</div>
<div class="block block-bb block-bt">
    <div class="block-heading">
      <h2 class="block-title">Block 2</h2>
      <h5 class="block-subtitle">I am block number 2. I have borders.</h5>
    </div>
</div>
<div class="block">
    <div class="block-heading">
      <h2 class="block-title">Block 3</h2>
      <h5 class="block-subtitle">I am block number 3</h5>
    </div>
</div>

Colored blocks

Add block-primary (or any other theme color) to get a colored block.

An accent-1 block

With bright text

I am a small block for demonstration purposes.

A primary block

With bright text

I am a small block for demonstration purposes.

A dark block

With bright text

I am a small block for demonstration purposes.

<div class="block block-accent-1 text-center">
  <div class="container">
    <div class="block-heading">
      <h2 class="block-title">An accent-1 block</h2>
      <h5 class="block-subtitle">With bright text</h5>
    </div>
    <p>I am a small block for demonstration purposes.</p>
  </div>
</div>
<div class="block block-primary text-center">
  <div class="container">
    <div class="block-heading">
      <h2 class="block-title">A primary block</h2>
      <h5 class="block-subtitle">With bright text</h5>
    </div>
    <p>I am a small block for demonstration purposes.</p>
  </div>
</div>
<div class="block block-dark text-center">
  <div class="container">
    <div class="block-heading">
      <h2 class="block-title">A dark block</h2>
      <h5 class="block-subtitle">With bright text</h5>
    </div>
    <p>I am a small block for demonstration purposes.</p>
  </div>
</div>