Skip to content

Icon Content

Table of Contents

  1. Specifications
    1. Properties
    2. Styling
      1. Modifiers
  2. Changelog
  3. Related
    1. Contains
  4. Examples

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
iconstring Name of Fontawesome icon to include. Can be namespaced with a style like light/bookYes-
icon_classstring Class applied to icon No-
contentstring Inner main HTML content Yes-

Styling

Modifiers

NameClassDescription
Stack.tux-c-icon-content--stackAlternate layout that keeps the icon vertically above the content in all screen sizes

Changelog

6.9.0 (2024-04-16)

  • fix: remove stack on mobile breakpoints (#566) (9ddd71a)

2.4.0 (2023-01-04)

  • fix: align icon with utility text align class (deda67b)

1.18.0

  • icon-content added

Contains

Other core components embedded within this template.

Examples

Simple content

Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

{{ include( 'components/icon-content.twig', {
	icon: "wheat"
	icon_class: "tux-c-icon--sm"
	content: "<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>"
} ) }}

Alternate icon style

Icons can be styled with any available modifiers.

Ultricies Magna Sem

Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.

{{ include( 'components/icon-content.twig', {
	icon: "bicycle"
	icon_class: "tux-c-icon--circle tux-c-icon--md"
	content: "<h4>Ultricies Magna Sem</h4><p>Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.</p>"
} ) }}

Stack

Typically used at the beginning of a new section.

Ultricies Magna Sem

{{ include( 'components/icon-content.twig', {
	class: "tux-c-icon-content--stack"
	icon: "sunglasses"
	icon_class: "tux-c-icon--md"
	content: "<h4>Ultricies Magna Sem</h4>"
} ) }}