Health Design System

Inline Reference: Contact

No notes defined.

<div class="row au-callout au-callout--secondary au-callout--grid-row">
    <div about="/contacts/cancer-council" typeof="sioc:Item foaf:Document">

        <div class=" col-sm-2 col-xs-3">
            <div class="image--circle">
                <a href="#">
                    <img src="../../images/contact-single.png" />
                </a>
            </div>
        </div>

        <div class=" col-sm-10 col-xs-9">

            <p class="au-display-md">Dinosaur containment hotline</p>
            <p>Call us if you spot a dinosaur on the loose.</p>

            <div class="health-field health-field--label-hidden">

                <div class="health-field__item">
                    <div class="health-field health-field--light health-field--inline">
                        <div class="health-field__label">
                            Switchboard
                        </div>
                        <div class="health-field__item">
                            <span class="svg-inline--fa fa-fw fa-left">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <path d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z" />
                                </svg>
                            </span><a href="#">0123 456 789</a>
                        </div>
                    </div>
                </div>

                <div class="health-field__item">
                    <div class="health-field health-field--light health-field--inline">
                        <div class="health-field__label">
                            After hours
                        </div>
                        <div class="health-field__item">
                            <span class="svg-inline--fa fa-fw fa-left">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <path d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z" />
                                </svg>
                            </span><a href="#">0123 456 789</a>
                        </div>
                    </div>
                </div>

            </div>

            <div class="health-field health-field--label-hidden">
                <div class="health-field__item">
                    <span class="svg-inline--fa fa-fw fa-left">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                            <path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z" />
                        </svg>
                    </span><a href="#">info@dinosaurs-r-us.com.au</a>
                </div>
            </div>

            <div class="health-field health-field--label-hidden">
                <div class="health-field__item">
                    <span class="svg-inline--fa fa-fw fa-left">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
                            <path d="M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm82.29 357.6c-3.9 3.88-7.99 7.95-11.31 11.28-2.99 3-5.1 6.7-6.17 10.71-1.51 5.66-2.73 11.38-4.77 16.87l-17.39 46.85c-13.76 3-28 4.69-42.65 4.69v-27.38c1.69-12.62-7.64-36.26-22.63-51.25-6-6-9.37-14.14-9.37-22.63v-32.01c0-11.64-6.27-22.34-16.46-27.97-14.37-7.95-34.81-19.06-48.81-26.11-11.48-5.78-22.1-13.14-31.65-21.75l-.8-.72a114.792 114.792 0 0 1-18.06-20.74c-9.38-13.77-24.66-36.42-34.59-51.14 20.47-45.5 57.36-82.04 103.2-101.89l24.01 12.01C203.48 89.74 216 82.01 216 70.11v-11.3c7.99-1.29 16.12-2.11 24.39-2.42l28.3 28.3c6.25 6.25 6.25 16.38 0 22.63L264 112l-10.34 10.34c-3.12 3.12-3.12 8.19 0 11.31l4.69 4.69c3.12 3.12 3.12 8.19 0 11.31l-8 8a8.008 8.008 0 0 1-5.66 2.34h-8.99c-2.08 0-4.08.81-5.58 2.27l-9.92 9.65a8.008 8.008 0 0 0-1.58 9.31l15.59 31.19c2.66 5.32-1.21 11.58-7.15 11.58h-5.64c-1.93 0-3.79-.7-5.24-1.96l-9.28-8.06a16.017 16.017 0 0 0-15.55-3.1l-31.17 10.39a11.95 11.95 0 0 0-8.17 11.34c0 4.53 2.56 8.66 6.61 10.69l11.08 5.54c9.41 4.71 19.79 7.16 30.31 7.16s22.59 27.29 32 32h66.75c8.49 0 16.62 3.37 22.63 9.37l13.69 13.69a30.503 30.503 0 0 1 8.93 21.57 46.536 46.536 0 0 1-13.72 32.98zM417 274.25c-5.79-1.45-10.84-5-14.15-9.97l-17.98-26.97a23.97 23.97 0 0 1 0-26.62l19.59-29.38c2.32-3.47 5.5-6.29 9.24-8.15l12.98-6.49C440.2 193.59 448 223.87 448 256c0 8.67-.74 17.16-1.82 25.54L417 274.25z" />
                        </svg>
                    </span><a href="#">www.dinosaurs-r-us.com.au</a>
                </div>
            </div>

            <div class="health-field">
                <div class="health-field__label">Postal addresses:</div>
                <div class="health-field__item">
                    <div>GPO Box 1234</div>
                    <div>Sydney NSW 2001</div>
                </div>
            </div>

            <div class="health-field">
                <div class="health-field__label">Street addresses:</div>
                <div class="health-field__item">
                    <div>1 Dinosaur Lane</div>
                    <div>Sydney NSW 2001</div>
                </div>
            </div>

            <p><a href="#">View contact</a></p>
        </div>

    </div>

</div>