VCU Compass Web Framework

Callout: Default 

<div id="example-callout--default" class="cwf-callout ">
    <div class="cwf-callout__container">
        <div class="cwf-callout__wysiwyg">
            <h1>
                H1 header
            </h1>
            <p>
                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. Any WYSIWYG content can be added here, including buttons and
                images.
            </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--default",
  "content": "<h1>\n    H1 header\n</h1>\n<p>\n    The callout component should be used to highlight key elements on the\n    page that you want to visually distinguish from the rest of your\n    content. Any WYSIWYG content can be added here, including buttons and\n    images.\n</p>"
}
  • 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.