How to present content in a teaser card

You can present your content either in an icon-based or image-based teaser card.

Showing content in an icon teaser

To show content in an icon teaser card:

1. Edit a page.
2. Insert:
   1. one of the components: "Icon Teaser" or "Three Columns with Icon Teasers" (Components | Teasers),
   2. or the Orckestra.Web.Html.TeaserCards.IconTeaser function ( Insert | Function),
   3. or the following code:
      Expand code

      <f:function name="Orckestra.Web.Html.TeaserCards.IconTeaser" 
      		xmlns:f="http://www.composite.net/ns/function/1.0">
      	<f:param name="Icon" value="heart" />
      	<f:param name="IconColor" value="danger" />
      	<f:param name="Title" value="Icon Teaser" />
      	<f:param name="Description" 
      		value="Lorem ipsum dolor sit amet, consectetur adipisicing elit." />
      	<f:param name="ReadMoreUrl" value="http://contoso.com" />
      	<f:param name="ReadMoreText" value="Read More" />
      	<f:param name="BackgroundStyle" value="light" />
      </f:function>

3. Set these parameters:
   • Icon: One of the icons from the pre-defined list.
   • Icon Color: One of the pre-defined color style for the icon. "info" by default.
   • Title: The title of the teaser.
   • Description: Short description for the teaser.
   • Read More URL: The URL to a page with more information. Optional.
   • Read More Text: The text to appear on the "Read More URL" button. "Read more" by default.
   • Background Color (BackgroundStyle): The style options for the background (none, light or dark). None by default.

Showing content in an image teaser

To show content in an image teaser card:

1. Edit a page.
2. Insert:
   
   1. one of the components: "Image Teaser" or "Three Columns with Image Teasers" (Components | Teasers),
      
   2. or the Orckestra.Web.Html.TeaserCards.ImageTeaser function ( Insert | Function),
   3. or the following code:
      Expand code

      <f:function name="Orckestra.Web.Html.TeaserCards.ImageTeaser" 
      		xmlns:f="http://www.composite.net/ns/function/1.0">
      	<f:param name="Image" 
      		value="MediaArchive:969705d6-adc5-4311-8186-641e59bbbddb" />
      	<f:param name="Title" value="Image Teaser" />
      	<f:param name="Description" 
      		value="Lorem ipsum dolor sit amet, consectetur adipisicing elit. " />
      	<f:param name="ReadMoreUrl" 
      		value="/page(a3055286-0e90-4b04-99dd-fb1a61dde0bf)" />
      	<f:param name="ReadMoreText" value="Read More" />
      </f:function>

3. Set these parameters:
   • Image: An image for the teaser.
   • Title: The title of the teaser.
   • Description: Short description for the teaser.
   • Read More URL: The URL to a page with more information. Optional.
   • Read More Text: The text to appear on the "Read More URL" button. "Read more" by default.
     

Examples

You can view the examples of using teaser cards on the "Venus" starter site at:

• Icon teasers: ~/Getting-Started/components/Icon-Teasers
• Image teasers: ~/Getting-Started/components/Image-Teasers