Skip to content

One Column

Single column block of content.

Table of Contents

  1. Anatomy
  2. WordPress
  3. Specifications
    1. Properties
    2. Styling
      1. Modifiers
  4. Changelog
  5. Examples

Anatomy

  1. Content

WordPress

This component can be added to post content with the One Column block in the Gutenberg editor.

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
contentstring Inner main HTML content Yes-
constrainboolean Applies constrain modifier class No-

Styling

Modifiers

NameClassDescription
Constrain.tux-c-one-column--constrainuse a narrow width instead of the standard site width

Changelog

1.4.2 (2020-06-01)

  • fix: exclude images from constrain for infographics (2dda107)

1.0.0

  • one-column added

Examples

Default

Consectetur Ligula

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

{{ include( 'components/one-column.twig', {
	content: {...}
} ) }}

Constrain Width

Consectetur Ligula

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

{{ include( 'components/one-column.twig', {
	constrain: true
	content: {...}
} ) }}

Constrain Width - Centered

Consectetur Ligula

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

{{ include( 'components/one-column.twig', {
	class: "u-center"
	constrain: true
	content: {...}
} ) }}