VCU Compass Web Framework

Callout: Accent 

<div id="example-callout--accent" class="cwf-callout cwf-callout--accent">
    <div class="cwf-callout__container">
        <div class="cwf-callout__wysiwyg">
            <h2 class="h3">
                Hours and location
            </h2>
            <p>
                Any content can go here. <a href="/">adipisicing elit</a>.
            </p>
            <img src="https://picsum.photos/400/225" alt="Random image from picsum.photos" />
            <h3 class="h4 cwf-marker">
                Reminder
            </h3>
            <p>
                Don't forget your cap and gown at graduation!
            </p>
        </div>
    </div>
</div>
 
<div id="{{ id ?? 'cwf-callout' }}"
    class="cwf-callout {{ accent ? 'cwf-callout--accent' }}">
    <div class="cwf-callout__container">
        <div class="cwf-callout__wysiwyg">
            {{ content }}
        </div>
    </div>
</div>
 
{
  "id": "example-callout--accent",
  "content": "<h2 class=\"h3\">\n    Hours and location\n</h2>\n<p>\n    Any content can go here. <a href=\"/\">adipisicing elit</a>.\n</p>\n<img src=\"https://picsum.photos/400/225\"\n    alt=\"Random image from picsum.photos\" />\n<h3 class=\"h4 cwf-marker\">\n    Reminder\n</h3>\n<p>\n    Don't forget your cap and gown at graduation!\n</p>",
  "accent": true
}
  • Content: 
    // Callout component styles

@import "../../shared/media";
@import "../../shared/style";

// Callout colors
$callout--background-color: darken(
    style__color(white-dark),
    7.5%
) !default; // #e5e5e5
$callout--foreground-color: style__color(gray-dark) !default;
$callout--marker-color: style__color(gold) !default;
$callout--link-color: style__color(blue, accent) !default;

.cwf-callout {
    margin-bottom: 1rem;
    background-color: var(--cwf-callout--background-color);

    --cwf-callout--background-color: #{$callout--background-color};
    --cwf-callout--foreground-color: #{$callout--foreground-color};
    --cwf-callout--marker-color: #{$callout--marker-color};
    --cwf-callout--link-color: #{$callout--link-color};
}

// Callout accent colors
$callout--accent--background-color: style__color(blue, accent) !default;
$callout--accent--foreground-color: style__color(white) !default;
$callout--accent--marker-color: style__color(gold) !default;
$callout--accent--link-color: style__color(white) !default;

// Callout themes
$callout__themes: (
    accent: (
        background-color: $callout--accent--background-color,
        foreground-color: $callout--accent--foreground-color,
        marker-color: $callout--accent--marker-color,
        link-color: $callout--accent--link-color
    )
);

@mixin callout__theme($instructions) {
    .cwf-callout--#{map-get($instructions, theme)} {
        --cwf-callout--background-color: #{map-get(
                $instructions,
                background-color
            )};
        --cwf-callout--foreground-color: #{map-get(
                $instructions,
                foreground-color
            )};
        --cwf-callout--marker-color: #{map-get($instructions, marker-color)};
        --cwf-callout--link-color: #{map-get($instructions, link-color)};
    }
}

@mixin callout__theme--official($theme) {
    $colors: map-get($callout__themes, $theme);

    $instructions: map-merge(
        $colors,
        (
            theme: $theme
        )
    );

    @include callout__theme($instructions);
}

@each $theme, $colors in $callout__themes {
    @include callout__theme--official($theme);
}

.cwf-callout__container {
    padding: 1.5rem;
    @include media__contain;
}

.cwf-callout__wysiwyg {
    color: var(--cwf-callout--foreground-color);

    & > *:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    & > *:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    a {
        font-weight: 700;
        --cwf-link--color: var(--cwf-callout--link-color);
        --cwf-link--active--color: var(--cwf-callout--link-color);
    }

    // Callout button colors
    $callout__button--background-color: style__color(white) !default;
    $callout__button--border-color: style__color(gray-lightest) !default;
    $callout__button--color: style__color(blue, accent) !default;
    $callout__button--active--background-color: lighten(
        style__color(blue, accent),
        17%
    ) !default;
    $callout__button--active--color: style__color(gray-dark) !default;
    $callout__button--hover-focus--background-color: style__color(
        gold
    ) !default;
    $callout__button--hover-focus--color: style__color(gray-dark) !default;

    .t4_button,
    .cwf-button {
        --cwf-button--background-color: #{$callout__button--background-color};
        --cwf-button--border-color: #{$callout__button--border-color};
        --cwf-button--color: #{$callout__button--color};
        --cwf-button--active--background-color: #{$callout__button--active--background-color};
        --cwf-button--active--color: #{$callout__button--active--color};
        --cwf-button--hover-focus--background-color: #{$callout__button--hover-focus--background-color};
        --cwf-button--hover-focus--color: #{$callout__button--hover-focus--color};
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6 {
        line-height: 1.5;
        overflow: hidden;

        &.t4_text-primary:before,
        &.cwf-marker:before {
            background-color: var(--cwf-callout--marker-color);
            content: " ";
            display: inline-flex;
            height: 0.75em;
            margin-left: -0.6rem;
            margin-right: 0.6em;
            width: 1em;
            transform: skew(-28deg);
        }
    }

    h1,
    .h1 {
        font-size: 2.055555rem;
    }

    h2,
    .h2 {
        font-size: 1.61111rem;
    }

    h3,
    .h3 {
        font-size: 1.277777rem;
    }

    h4,
    .h4 {
        font-size: 1rem;
    }
}
  • URL: /components/raw/callout/_index.scss
  • Filesystem Path: components/callout/_index.scss
  • Size: 4.6 KB

Callout

The callout component should be used to highlight key elements on the page that you want to visually distinguish from the rest of your content. While any WYSIWYG content can be added inside this component, it is recommended to keep the content in this element concise to ensure the integrity and original intent of the component.

Variations

By default the callout background color will be gray. An additional class of cwf-callout--accent can be applied to the wrapping element to turn the background blue.

T4 implementation

When using the callout content type in the sidebar of a T4 website the cwf-callout--accent class will automatically be applied, rendering the callout with a blue background.