Hello Vijay,

I have noted that you are using a List<ContentReference> field instead of a standard ContentArea field.  I would recommend utilizing the standard Content Area as this has additional functionality over List<ContentReference> type.

The UIHint does not work the way you're expecting it to do so in those images.  The UIHint attribute is used to indicate to EPiServer what type of control should be used to handle the field.  e.g. decorating a ContentReference field with [UIHint(UIHint.Image)] tells the UI to render an image picker/preview. It has no bearing on the language used.

As an easy alternate you can populate the [Display()] attribute with a description for your field like so:

[Display(
    Name = "Hero Image",
    Description = "The image to render at the top of the page",
    GroupName = SystemTabNames.Content,
    Order = 10)]
[UIHint(UIHint.Image)]
public virtual ContentReference HeroImage { get; set; }

[Display(
    Name = "Heading",
    Description = "The H1 to display",
    GroupName = SystemTabNames.Content,
    Order = 20)]
public virtual string Heading { get; set; }

[Display(
    Name = "Main Content Area",
    Description = "You can add a General Content Page or a Rich Text Block here.",
    GroupName = SystemTabNames.Content, 
    Order = 30)]
[AllowedTypes(typeof(RichTextBlock))]
public virtual ContentArea MainContentArea { get; set; }

The description renders as hint when hovering over the name of the field, but with a little CSS magic you can make it appear directly under the title like so:

To customise the CMS UI styles, you will need to create a css stylesheet, you can then reference it in modules.config like so (it does bother me slightly that we are still using XML config files in CMS 12):

<?xml version="1.0" encoding="utf-8"?>
<module>
  <dojo>
    <paths/>
  </dojo>
  <clientResources>
    <add name="epi-cms.widgets.base" path="~/Styles/cms-styles.css" resourceType="Style"/>
  </clientResources>
</module>