Teaser Component Title I would like to Center

[MarkKilroy]

I would like to write a custom style value to Center the Title in the Teaser Component.  I do not see an example of this.

[nitesh_kumar]

Hi @MarkKilroy 

There are two ways:-

1.) You can write/add a custom style in clientlibs and add it to the template editor, which would enable authors to apply it to the component. See the example here

https://experienceleague.adobe.com/docs/experience-manager-65/authoring/siteandpage/style-system.htm... 

2.) If you want the title to be aligned center always, then write your styles in the clientlibs which is deployed with your project by picking up the HTML element selectors from the teaser component.

Hope this helps

Regards,

Nitesh

[MarkKilroy]

I previously had read and used the page that you mentioned.

The Teaser is a bit different because the Title is a component inside of the Component.  I have not been able to make a style for the "Teaser Title"  I made this style but this ends up Centering all of the content.

.cmp-teaser__title_aligncenter {

    text-align: center;

}

Here is an image where the Title is centered but the Text is centered as well.

Do you know what css I can write to get into the Teaser's Title.

Best Regards

[nitesh_kumar · Accepted solution]

You are right, the CSS style classes are set at the parent level, but you can make use of inheritance while writing the CSS to pick the specific element.

For instance, you can specify the selector for picking up the title, for instance, you can set the style class the template like "cmp-teaser-title-centre", and use this selector in CSS to pick the title which is in H2 with the default class name "cmp-teaser__title". That would ensure that aligning only affects the title.

So your CSS might look like this.

.cmp-teaser-title-centre .cmp-teaser__title{
  text-align: center;
}

hope this helps!

Regards,

Nitesh