Themeing

The page level theme can be overridden if the contained content belongs to a different theme by appending the appropriate theme class to the root element. Defaults to the page theme.

Required Elements

• Title
• Link

Example markup with optional components

                    
<section class="grid__item--article-body-float-{left, right} call-out [theme--{variant}]">
    <!-- Required: Title -->
    <div class="call-out__title">In-Practice</div>
    <!-- Optional: Content image -->
    <img class="call-out__media [media__ratio--{variant}] [media__fit--{variant}]" src="/Content/img/examples/article-demo.jpg" />
    <div class="call-out__content">
        <!-- Optional: Content type icon -->
        <i class="call-out__type icon icon--{variant}"></i>
        <!-- Required: Link -->
        <a href="#" class="call-out__cta">
            In-Practice content teaser related to body content will go here.
        </a>
        <!-- Optional: Members only pill -->
        <div class="content-asset__pill content-asset__pill--members">
            CFA Members-only
        </div>
        <!-- Optional: Gated content pill -->
        <div class="content-asset__pill content-asset__pill--locked">
            Sign-in/Sign-up for access
        </div>
        <!-- Optional: Short description -->
        <p class="call-out__description">
            More related content can be added, to generate reader interest on the bites/snacks/meals that may accompany an article.
        </p>
    </div>
</section>