Sample content

This page shows the following Paragraph types, controllable from the Drupal content editor interface:

  • Text content
  • Accordion
  • Call to action
  • 2 Column
    • Two columns containing a combination of any other paragraph type except 2 Column
  • Webform
  • Graph
  • Local Video
  • Reusable Block
    • Block
    • View

Each block has the following background styles available:

  • Background Color
  • Background Gradient (between 2 colors)
  • Background Image
  • Paralax Background Image
  • Full Page Width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit, nulla sed euismod viverra, eros mauris viverra augue, at lobortis justo nunc vel sem. Morbi metus eros, malesuada vel sodales vitae, gravida non lorem.

Nulla sagittis, eros id interdum pellentesque, eros nibh cursus nisl, in condimentum mauris ipsum ac velit. Nullam rutrum sem eu tortor luctus feugiat nec ut enim. In tempus aliquam lacus non vehicula. 

Aenean odio libero, condimentum a efficitur in, feugiat eu dolor. In hac habitasse platea dictumst. Maecenas at est est. Vestibulum eu dictum orci. Nullam vitae consequat purus. Praesent vulputate orci eget eros vulputate lacinia. Donec eget sollicitudin massa.

Call to action link

Sed sed egestas enim, sed aliquam odio. Nam tincidunt aliquam turpis, in ullamcorper nibh gravida ac. Proin ut tincidunt ante. Morbi eu eros sagittis, luctus justo at, egestas nisi. Morbi magna metus, mattis sed tortor vel, lobortis dapibus lacus. Cras tempor ut dui in laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas rhoncus ullamcorper augue, vitae facilisis elit tempus eu. Curabitur lacinia, quam et porttitor mattis, neque libero hendrerit sapien, sed vehicula nibh mauris at lacus.

Table data
  Jane John
Apples 3 4
Pears 2 0
Plums 5 11
Bananas 1 1
Oranges 2 4

Colors

$core-blue

$core-blue-bg

$core-dark

$core-dark-blue

$core-teal

$heading-contrast-high

$heading-contrast-high-reversed

$heading-default

$heading-default-reversed

$heading-contrast-low

$heading-subtle

$body-contrast-high

$body-default

$body-default-reversed

$body-contrast-low

$body-subtle

$placeholder

$disabled

$link

$border-default

$border-dark

$success

$success-bg

$warning

$warning-bg

$warning-border

$info

$info-bg

$error

$error-bg

$error-border

$neutral

$neutral-bg

Cards

Card with media

Subtitle would appear here

Nullam quis risus eget urna mollis ornare vel eu leo.

Card without media

Subtitle would appear here

Nullam quis risus eget urna mollis ornare vel eu leo.

Card with actions

Subtitle would appear here

Nullam quis risus eget urna mollis ornare vel eu leo.

h1 HTML5 Kitchen Sink

h2 Back in my quaint garden

h3 Jaunty zinnias vie with flaunting phlox

h4 Five or six big jet planes zoomed quickly by the new tower.

h5 Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
h6 Pack my box with five dozen liquor jugs.

This paragraph is nested inside an article. It contains many different, sometimes useful, HTML5 tags. Of course there are classics like emphasis, strong, and small but there are many others as well. Hover the following text for abbreviation tag: abbr. Similarly, you can use acronym tag like this: ftw. You can define deleted text which often gets replaced with inserted text.

You can also use keyboard text, which sometimes is styled similarly to the <code> or samp tags. Even more specifically, there is a tag just for variables. Not to be mistaken with blockquotes below, the quote tag lets you denote something as quoted text. Lastly don't forget the sub (H2O) and sup (E = MC2) tags.

This is footer for this section

Blockquote: I quickly explained that many big jobs involve few hazards

This is a mult-line blockquote with a cite reference. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’tdone as the things I have done. Innovation is saying no to 1,000 things. Steve Jobs – Apple Worldwide Developers’ Conference, 1997

Tables can have captions now.
Person Number Third Column
Someone Lastname 900 Nullam quis risus eget urna mollis ornare vel eu leo.
Person Name 1200 Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person 1500 Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Last One 2800 Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
Definition List Title
Definition list division.
Kitchen Sink
Used in expressions to describe work in which all conceivable (and some inconceivable) sources have been mined. In this case, a bunch of markup.
aside
Defines content aside from the page content
blockquote
Defines a section that is quoted from another source
  • Unordered List item one
    • Nested list item
      • Level 3, item one
      • Level 3, item two
      • Level 3, item three
      • Level 3, item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four
  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four
1 Infinite Loop
Cupertino, CA 95014
United States
pre {
  display: block;
  padding: 7px;
  background-color: #F5F5F5;
  border: 1px solid #E1E1E8;
  border-radius: 3px;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: Menlo, Monaco;
  line-height: 160%;
}
Fig1. A placeholder image from via.placeholder.com

I am legend
I am also legend Check me out Or check me out