Color Flow Chart

Intro

This is a bit complicated and situational. Originally built for the Use Case pages on the marketing website, this component serves as a way to explain an infographic. The format definitely better suits a marketing oriented page.

Basics

The color flow chart is a custom element that takes several slots to display the content. You have the:

• title slot:
  This is typically your <h2> tag.
• big-text slot:
  This is a large text that is meant to be some kind of eye-catching hook line—typically different from the actual title of the graphic. This is usually a <div> tag.
• summary slot:
  This is a summary of the content, and is usually a <div> wrapper around a <p>aragraph.
• flow-chart-image slot:
  This is the image that you want to display. This should be an <img> tag with all of the appropriate attributes.
• flow-description slot:
  This is a list (usually an <ul>) of items that describe the flow chart. If you want to have color coded circles that tie-in with the image, each <li> tag should have a data-circle-color attribute that specifies the color (any valid CSS color type) of the circle.

Copy
html
<ap-color-flow-chart>
    <div slot="title">Title/H2</div>
    <div slot="big-text">Hook Line</div>
    <div slot="summary">
        <p>
            Summary. Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Delectus nemo officia voluptatem recusandae, beatae fuga magnam.
            Illo dolor quos molestiae. Atque repellendus debitis deserunt amet
            id ratione architecto quibusdam minus!
        </p>
    </div>
    <div slot="flow-chart-image">
        <img
            alt=""
            loading="lazy"
            width="1368"
            height="847"
            decoding="async"
            src="https://anglepoint.mystagingwebsite.com/wp-content/uploads/2018/12/business-case.png"
        />
    </div>
    <ul slot="flow-description">
        <li data-circle-color="#32657f">
            <p>
                <strong>Understand</strong> the priorities of the organization.
            </p>
            <p>
                Whether it‘s cost savings, reducing overspend, or risk
                mitigation, your business case should align with what you value
                as an organization.
            </p>
        </li>

        <li data-circle-color="#00b378">
            <p><strong>Assess</strong> your application portfolio.</p>
            <p>
                Which are the riskiest software publishers in your portfolio?
                Identify areas that are not covered by your inventory tools.
            </p>
        </li>

        <li data-circle-color="#dc4746">
            <p><strong>Interview</strong> your IT stakeholders.</p>
            <p>
                What IT issues are causing headaches in your organization? Use
                your business case to address the specific pain-points of your
                users.
            </p>
        </li>

        <li data-circle-color="#0789aa">
            <p><strong>Justify</strong> the resources you need.</p>
            <p>
                Paint a clear picture of the future with elements on ROI, cost
                savings potential, and the risks of inaction.
            </p>
        </li>
    </ul>
</ap-color-flow-chart>
Expand