logo-demo.component.html

<div class="demo-content">
    <h1>Health Catalyst Logo</h1>
    <h6>Last updated Jan 27, 2021</h6>

    <hc-tile>
        <h5 id="overview">Overview</h5>

        <p>
            The company logo is an important and valued graphic element and must be used consistently and appropriately, even minor variations will undermine and compromise the image of the branding.
            The space available should dictate whether the horizontal or stacked logo should be used, otherwise they can be used interchangeably.
        </p>
    </hc-tile>

    <hc-tile>
        <h5 id="usage-guidance">Usage Guidance</h5>

        <p>
            Secondary color options should be used on colored backgrounds or on top of imagery. Maintain clear space and make sure logo is legible.
            In order to maintain brand consistency always be sure to use official logo files.
        </p>

        <p>
            In order to ensure legibility, a “safe area” must exist around the logo. This area is equal to the x-height of the letters in the logo. No other elements should intrude into the safe area –
            this includes placement too close to a cut or folded edge.
        </p>

        <p>
            The logo must always maintain its proportions – never distort, rotate, or cover the logo in any way. Never change the alignment or color.
        </p>

        <p>
            <strong>Never create your own logo.</strong> If you have a specialized logo need or request, contact Marketing at <a href="mailto:brand@healthcatalyst.com">brand@healthcatalyst.com</a>.
        </p>

        <img src="./assets/logos/Logo-Safe-Area.png" class="logo-img-lg" />

    </hc-tile>

    <hc-tile>
        <h5 id="co-branding">Co-Branding</h5>

        <h3 class="logo-subhead">Print or Media</h3>
        <p>
            In order to maintain brand hierarchy and show deference to our partners, the Health Catalyst logo should always be second when co-branding.
            Only use the full primary color or reverse white logos. Use double the safe are rules for co-branding applications.
        </p>

        <img src="./assets/logos/Print-Cobrand.png" class="logo-img-lg" />

        <h3 class="logo-subhead">Web Apps or Analytic Accelerators</h3>
        <p>
            The Cashmere navbar provides the ability to co-brand with a customer's logo.
            For web apps, refer to the <a routerLink="/web/components/navbar/examples?section=navbar-cobrand">Navbar Co-brand</a> example on the navbar component.
            For analytic acclerators, refer to the <a routerLink="/analytics">Analytics tab</a>. Specifically the <em>Customer Branding</em> description in the <strong>Foundations</strong> section of the BI platform you are working.
        </p>
    </hc-tile>

    <hc-tile>
        <h5 id="complete-logo-set">Complete Logo Set</h5>
        <br><br>
        <a href="./assets/logos/Health-Catalyst-Logos.eps">
            <img src="./assets/logos/Health-Catalyst-Logos-Preview.png" class="logo-img-lg" />
        </a>
        <br>
        <a hc-button buttonStyle="primary-alt" download href="./assets/logos/Health-Catalyst-Logos.eps" title="Download logo EPS file">
            <hc-icon fontSet="fa" fontIcon="fa-file-pdf-o" class="icon-left"></hc-icon>
            Download Logo Set EPS File
        </a>
    </hc-tile>

    <hc-tile>
        <h5 id="primary-logo-horizontal">Primary Logo Horizontal</h5>
        <a href="./assets/logos/PrimaryLogoHorizontal.zip">
            <img src="./assets/logos/PrimaryLogoHorizontal.svg" class="logo-img-lg" />
        </a>
        <a hc-button buttonStyle="primary-alt" download href="./assets/logos/PrimaryLogoHorizontal.zip" title="Download logo zip file">
            <hc-icon fontSet="fa" fontIcon="fa-file-archive-o" class="icon-left"></hc-icon>
            Download logo zip file
        </a>
    </hc-tile>

    <hc-tile>
        <h5 id="primary-logo-horizontal-(white)">Primary Logo Horizontal (white)</h5>
        <p><em>Blue background for illustrative purposes only</em></p>
        <a href="./assets/logos/PrimaryLogoHorizontal(white).zip">
            <img src="./assets/logos/PrimaryLogoHorizontal(white).svg" class="logo-img-lg" />
        </a>
        <a hc-button buttonStyle="primary-alt" download href="./assets/logos/PrimaryLogoHorizontal(white).zip" title="Download logo zip file">
            <hc-icon fontSet="fa" fontIcon="fa-file-archive-o" class="icon-left"></hc-icon>
            Download logo zip file
        </a>
    </hc-tile>

    <hc-tile>
        <h5 id="stacked-logo">Stacked Logo</h5>
        <a href="./assets/logos/StackedLogo.zip">
            <img src="./assets/logos/StackedLogo.svg" class="logo-img-md" />
        </a>
        <br>
        <a hc-button buttonStyle="primary-alt" download href="./assets/logos/StackedLogo.zip" title="Download logo zip file">
            <hc-icon fontSet="fa" fontIcon="fa-file-archive-o" class="icon-left"></hc-icon>
            Download logo zip file
        </a>
    </hc-tile>

    <hc-tile>
        <h5 id="stacked-logo-(white)">Stacked Logo (white)</h5>
        <p><em>Blue background for illustrative purposes only</em></p>
        <a href="./assets/logos/StackedLogo(white).zip">
            <img src="./assets/logos/StackedLogo(white).svg" class="logo-img-md" />
        </a>
        <br>
        <a hc-button buttonStyle="primary-alt" download href="./assets/logos/StackedLogo(white).zip" title="Download logo zip file">
            <hc-icon fontSet="fa" fontIcon="fa-file-archive-o" class="icon-left"></hc-icon>
            Download logo zip file
        </a>
    </hc-tile>

    <hc-tile>
        <h5 id="tri-flame">Tri-Flame</h5>

        <p>
            The Health Catalyst ‘Flame’ icon represents the spark of change that Catalyst’s services and solutions provides to clients.
            Icons should be thought of as a complementary asset, typically used in conjunction with the primary logo.
            You can also use the 'Flame' on a background color from the brand palette.
        </p>
        <br><br>
        <a href="./assets/logos/Tri-Flame.zip">
            <img src="./assets/logos/Tri-Flame.png" class="logo-img-lg" />
        </a>
        <br>
        <a hc-button buttonStyle="primary-alt" download href="./assets/logos/Tri-Flame.zip" title="Download logo zip file">
            <hc-icon fontSet="fa" fontIcon="fa-file-archive-o" class="icon-left"></hc-icon>
            Download logo zip file
        </a>
    </hc-tile>

    <hc-tile>
        <h5 id="tri-flame">Vitalware® by Health Catalyst</h5>

        <p><em>The Vitalware logo set linked below includes full-color, grayscale, and white versions.</em></p>
        <a href="./assets/logos/Vitalware_Logos.zip">
            <img src="./assets/logos/Vitalware_Logo.png" class="logo-img-lg" />
        </a>
        <br>
        <a hc-button buttonStyle="primary-alt" download href="./assets/logos/Vitalware_Logos.zip" title="Download logo zip file">
            <hc-icon fontSet="fa" fontIcon="fa-file-archive-o" class="icon-left"></hc-icon>
            Download logo zip file
        </a>
    </hc-tile>

    <hc-feedback-form></hc-feedback-form>
</div>