Demo Responsive Paragraphs

Full Width Row

Content can be added as one full-width column. This is useful for paragraph text like this one, or even large images, like the one below this text. The text editor is a full WYSIWYG editor, so we can do things like bold, italicize or strikethrough text. 

  1. We can create
  2. numbered lists
  3. of items.
This is a blockquote of text that is really long and quoted. 

Vestibulum fringilla pede sit amet augue. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Fusce vulputate eleifend sapien. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Praesent blandit laoreet nibh.

Donec id justo. Curabitur suscipit suscipit tellus. In hac habitasse platea dictumst. Vestibulum suscipit nulla quis orci. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna.

Full Width Image

Placeholder

We can add text in a two column row as well. So we can have text one one side and some other type of content on the other side. The width of each column can be aligned differently, as well. So we can have 50/50 splits, 60/40 splits or 70/30 splits. This is a 50/50 split.

Another Placeholder
  1. <div class="example-code">
  2. <img src="images/example.jpg" alt="Example Code">
  3. This is a code snippet
  4. </div>

This is a two-column row with a code snippet and some text. The alignment here is 60/40 instead of the 50/50 above. The code snippets have automatic syntax highlighting, as well.

More Columns

We can also create rows with three, four, or even six columns! Since these will start to look pretty squished with regular images and text, we also have the ability to add Cards to the columns. They look like this:

Fancy Card 1
Slider Card 1 more_vert
Slider Card 1 close
The Slider Cards can have more text than a regular card, since it slides up over the image when the icon is clicked. So we can have a good bit of information here.
Slider Card 2
Slider Card 2 more_vert
Slider Card 2 close
The Slider Cards can have more text than a regular card, since it slides up over the image when the icon is clicked. So we can have a good bit of information here.
Slider Card 3 Image
Slider Card 3 more_vert
Slider Card 3 close
The Slider Cards can have more text than a regular card, since it slides up over the image when the icon is clicked. So we can have a good bit of information here.
Regular Card 1 Image
Simple Cards are good for small amounts of information with an image.
Regular Card 2 Image
Simple Cards are good for small amounts of information with an image.
Regular Card 3
Simple Cards are good for small amounts of information with an image.
Regular Card 4
Simple Cards are good for small amounts of information with an image.
Cards can be just text, too.
Text cards can be useful for small pieces of information.
Some more text can go here.
Six columns is a lot, but may be useful.
Cras ultricies mi eu turpis hendrerit.
Quisque libero metus, condimentum nec.

Parallax Images

We can also add parallax images to our pages if full-sized pictures aren't enough.

parallax

Lists

We can add lists to our pages as well. These can be simple lists of items, or can be "accordion" lists, which can hide more information underneath the list headers. It's tough to explain, so click on the list items below to see what I mean.

  • First Item

    Vestibulum eu odio. Suspendisse eu ligula. Suspendisse potenti. Etiam imperdiet imperdiet orci. Nam pretium turpis et arcu.

    Duis lobortis massa imperdiet quam. Nullam dictum felis eu pede mollis pretium. Phasellus tempus. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Pellentesque auctor neque nec urna.

  • Second Item

    Vestibulum eu odio. Suspendisse eu ligula. Suspendisse potenti. Etiam imperdiet imperdiet orci. Nam pretium turpis et arcu.

    Duis lobortis massa imperdiet quam. Nullam dictum felis eu pede mollis pretium. Phasellus tempus. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Pellentesque auctor neque nec urna.

  • Third Item

    Vestibulum eu odio. Suspendisse eu ligula. Suspendisse potenti. Etiam imperdiet imperdiet orci. Nam pretium turpis et arcu.

    Duis lobortis massa imperdiet quam. Nullam dictum felis eu pede mollis pretium. Phasellus tempus. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Pellentesque auctor neque nec urna.