Content

A single class to handle WYSIWYG generated content, where only HTML tags are available

When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use content as container. It can handle almost any HTML tag:

  • <p> paragraphs
  • <ul> <ol> <dl> lists
  • <h1> to <h6> headings
  • <blockquote> quotes
  • <em> and <strong>
  • <sup> and <sub>
  • <table> <tr> <th> <td> tables

This content class can be used in any context where you just want to (or can only) write some text. For example, it's used for the paragraph you're currently reading.

Ordered lists <ol> support different types of items markers. To modify them, use either:

  • the corresponding HTML attribute value
  • one of the following CSS modifier classes: is-lower-alpha, is-lower-roman, is-upper-alpha or is-upper-roman

Sizes: You can use the is-small, is-medium and is-large modifiers to change the font size.

  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
<div class="content">
    <ol type="1">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol type="A">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol type="a">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol type="I">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol type="i">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
</div>
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
<div class="content">
    <ol class="is-lower-alpha">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol class="is-lower-roman">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol class="is-upper-alpha">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol class="is-upper-roman">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
</div>

Size

You can use the is-small, is-medium and is-large modifiers to change the font size.

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name
Type
Default
$content-heading-colorcolor$text-strong
$content-heading-weightfont-weight$weight-semibold
$content-heading-line-heightunitless1.125
$content-blockquote-background-colorcolor$background
$content-blockquote-border-leftsize5px solid $border
$content-blockquote-paddingsize1.25em 1.5em
$content-pre-paddingsize1.25em 1.5em
$content-table-cell-bordersize1px solid $border
$content-table-cell-border-widthsize0 0 1px
$content-table-cell-paddingsize0.5em 0.75em
$content-table-cell-heading-colorcolor$text-strong
$content-table-head-cell-border-widthsize0 0 2px
$content-table-head-cell-colorcolor$text-strong
$content-table-foot-cell-border-widthsize2px 0 0
$content-table-foot-cell-colorcolor$text-strong