Skip to content

Preview

Table of Contents

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

Anatomy

  1. Title
  2. Content
  3. Byline (optional)
  4. Image (optional)
  5. Icon (optional)

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
titlestring Primary descriptive text. Yes-
h_levelinteger Makes sure the title is the correct heading level for the page outline. No3
h_classstring Class applied to main heading element No"h3"
hrefstring If supplied, will insert an anchor tag into the main heading element. Alternatively, include your own button into the main content slot. No-
slotstring Main inner HTML markup content. No-
imagestring image markup content. The image element should have a class of `tux-c-preview__image`. No-
iconstring Name of icon to show. Defaults to `'leaf'`, but can be set to `false`. No-
classstring list of additional classes to apply to main element. No-

Styling

Modifiers

NameClassDescription
Compact.tux-c-preview--compactResizes image and keeps layout horizontal on mobile. Designed to be used with the href option, and typically not providing any inner content

Custom Properties

NameDefaultResetsDescription
--tux-comp-preview--icon-colorvar(--tux-c-icon--color, var(--tux-theme--accent-color, var(--tux-theme--text-color, black)))Yes-
--tux-comp-preview--icon-aux-colorvar(--tux-c-icon--aux-color, var(--tux-theme--bg-color, white))Yes-

Changelog

6.2.0 (2023-10-04)

1.34.0 (2022-06-09)

  • feat: add compact modifier (08de4d1)

1.32.0

  • preview added

Contains

Other core components embedded within this template.

Examples

Default

Etiam Sem Inceptos Malesuada

5 Min Read Business, Healthcare

Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Read More 
<x-preview title="Etiam Sem Inceptos Malesuada" h_level="4" icon="cloud">
	<x-slot name="image">
		<img class='tux-c-preview__image' src='/wp-content/themes/tux-wp/public/images/hero-background-lg.jpg'>
	</x-slot>
	<x-slot name="byline">
		<span class="highlight highlight-accent">5 Min Read</span>
		<span class="highlight">Business, Healthcare</span>
	</x-slot>
	<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
	<x-button href="http://example.com" class="tux-c-button--narrow">Read More</x-button>
</x-preview>

No Image

Etiam Sem Inceptos Malesuada

5 Min Read Business, Healthcare

Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Read More 
<x-preview title="Etiam Sem Inceptos Malesuada" h_level="4">
	<x-slot name="byline">
		<span class="highlight highlight-accent">5 Min Read</span>
		<span class="highlight">Business, Healthcare</span>
	</x-slot>
	<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
	<x-button href="http://example.com" class="tux-c-button--narrow">Read More</x-button>
</x-preview>

Content Only

Etiam Sem Inceptos Malesuada

5 Min Read Business, Healthcare

Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Read More 
<x-preview title="Etiam Sem Inceptos Malesuada" h_level="4" :icon="false">
	<x-slot name="byline">
		<span class="highlight highlight-accent">5 Min Read</span>
		<span class="highlight">Business, Healthcare</span>
	</x-slot>
	<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
	<x-button href="http://example.com" class="tux-c-button--narrow">Read More</x-button>
</x-preview>

Compact

Etiam Sem Inceptos Malesuada 

<x-preview class="tux-c-preview--compact" h_class="h5" title="Etiam Sem Inceptos Malesuada" h_level="4" href="http://example.com">
	<x-slot name="image">
		<img class='tux-c-preview__image' src='/wp-content/themes/tux-wp/public/images/placeholder-plaza-square.jpg'>
	</x-slot>
</x-preview>