This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/virtual_boot.css, line 13221

14.3.1 Branded Header Overrides

deprecated

This is a templated banner that uses as the central branding of a conference product.

acc21 - Annual Scientific Session 2021 ah20 - Care of the Athletic Heart ada20 - ADA/Siegfried Conf

Deprecated: Old Designs

Example 


<div id="" class="brand-header"></div><br>
<style>
.brand-header {
    height: 160px;
    width: 100%;
    background-color: #002d5b;
    background-image: url('../img/virtual/header.backgroundTexture.sm.png');
    background-repeat: no-repeat;
    background-position: center top;
}
@media only screen and (min-width : 768px) {
    .brand-header {
        height: 160px;
        width: 100%;
        background-image: url('../img/virtual/header.mainLogo.md.png'), url('../img/virtual/header.secondary.md.png'), url('../img/virtual/header.img.md.png'), url('../img/virtual/header.backgroundTexture.png');
        background-size: contain, contain, contain, cover;
        background-position: left center, right center, 27% center, center center;
        background-size: contain, contain, contain, cover;
        background-repeat: no-repeat;
    }
}
@media only screen and (min-width : 1200px) {
    .brand-header {
        height: 240px;
        width: 100%;
        background-image: url('../img/virtual/header.mainLogo.lg.png'), url('../img/virtual/header.secondary.lg.png'), url('../img/virtual/header.img.lg.png'), url('../img/virtual/header.backgroundTexture.png');
        background-position: left center, right center, 14% center, center center;
    }
}
 #.brand-header {
     background-image: url('../img//header.backgroundTexture.sm.png');
}
@media only screen and (min-width : 768px) {
    #.brand-header {
        background-image: url('../img//header.mainLogo.md.png'),
            url('../img//header.secondary.md.png'),
            url('../img//header.img.md.png'),
            url('../img//header.backgroundTexture.png');
    }
}
@media only screen and (min-width : 1200px) {
     #.brand-header {
        background-image: url('../img//header.mainLogo.lg.png'),
            url('../img//header.secondary.lg.png'),
            url('../img//header.img.lg.png'),
            url('../img//header.backgroundTexture.png');
    }
}
</style>
Copy Code