const PrincipleBlock = () => {
    const principles = [
        {
            title: 'Lead with purpose',
            description: 'Our goal is to build trust with our users by designing with intent. We build reliable tools that allow users to complete critical tasks with ease, in order to excel in their jobs. We constantly create, revisit, and improve our users workflows so that they can spend their time solving the right problems.'
        },
        {
            title: 'Prioritize intuitiveness',
            description: 'We aim for our solutions to be obvious, usable, and familiar so that users feel supported in their goals. We provide context, speak our users’ language, and strive to to teach new concepts via first-time experiences. We guide novice users through their tasks and surface time-saving workflows for experts.'
        },
        {
            title: 'Sweat the details',
            description: 'We leverage the smallest details to elevate features into delightful tools. To ensure that we’re speaking the same language as our user base, we make design choices consistent with our user’s detail-oriented mental model.'
        },
        {
            title: 'Leverage contextual data',
            description: 'We combine qualitative research, insights provided by users, and design instinct to inform our decisions. We share that data with others to understand, connect, and build empathy with our users. We focus on solving problems and seek to understand the context in which those problems exist.'
        },
        {
            title: 'Achieve collective impact',
            description: 'We are thoughtful about our work and put it towards problems that have the largest impact on our product. We empower our colleagues to take part in the exploration and validation of ideas to gain understanding of our users and the problems they’re facing. As a team, we keep our standards high and inspire other titans to achieve the extraordinary.'
        },
        {
            title: 'Be a problem solving engine',
            description: 'We invest time to identify and properly solve problems to avoid creating inefficient workarounds. We test our assumptions and reframe the problem based on additional insights. Releasing is part of our design process and we’re committed to leveraging a constant feedback loop.'
        }
    ];
    return (
        <div>
            <Stack wrap="wrap">
                {principles.map(({title, description}, index) => (
                    <Stack.Item key={index} className="customStack--column" >
                        <Avatar name={(index+1)+''} size="l" className="principle-circle__number c-black" color="" />
                        <Headline el="h3" size="large" className="m-t-2 m-b-1">{title}</Headline>
                        <BodyText subdued>{description}</BodyText>
                    </Stack.Item>
                ))}
            </Stack>
        </div>
    )
}
render (PrincipleBlock)