Heading with Illustration

Typography Heading with an Illustration to the left of the heading

Example

Mark-up

<div class="d-flex align-items-center">
    <svg class="mr-3" width="50" height="50" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><title>Handshake</title><g fill="none" fill-rule="evenodd"><path class="illustration-main" fill="#0A2F73" d="M177.112 100.852l-51.06-50.888a2.695 2.695 0 0 0-3.714-.096l-34.056 30.63c-.004.004-.007.008-.011.01-6.86 6.236-17.067 6.68-22.759.99-2.666-2.668-3.994-6.385-3.738-10.464.263-4.21 2.167-8.285 5.362-11.48l29.117-29.118h41.366l54.955 54.955-15.462 15.46zm11.244 23.519c.095 3.05-.991 5.868-3.06 7.937-4.061 4.06-10.62 4.068-15.33.214-.273-.317-.55-.634-.848-.933l-18.73-18.73-.009-.009c-.12-.122-.276-.182-.413-.276-.158-.106-.302-.243-.475-.313-.16-.069-.334-.069-.501-.101-.173-.036-.34-.1-.515-.1-.166 0-.327.06-.492.093-.177.032-.357.034-.525.102-.16.064-.292.191-.44.289-.15.097-.318.166-.452.297-.001.002-.001.004-.003.005l-.006.004c-.122.123-.183.28-.277.418-.108.157-.243.3-.314.47-.063.157-.063.325-.097.485-.034.178-.1.351-.1.53-.003.182.064.355.098.531.035.164.033.332.096.487.068.171.202.312.308.468.095.143.155.3.277.424l18.777 18.956c.256.25.524.467.79.696a12.095 12.095 0 0 1 2.781 7.335c.096 3.05-.99 5.869-3.061 7.939-4.308 4.308-11.43 4.06-16.177-.54l-18.74-18.741a2.703 2.703 0 0 0-3.822 3.823l18.74 18.739c4.608 4.609 4.851 11.867.54 16.176-4.046 4.046-10.56 4.073-15.26.274-.241-.274-.476-.551-.737-.812l-18.739-18.739c-.119-.119-.27-.175-.405-.268-.159-.112-.306-.25-.483-.321-.155-.063-.322-.065-.485-.097-.176-.037-.35-.103-.531-.103-.175-.002-.344.063-.517.097-.166.033-.339.033-.5.097-.172.069-.316.206-.475.312-.139.096-.294.153-.416.274l-.004.005-.005.004c-.123.124-.184.281-.278.42-.108.157-.243.299-.313.468-.063.157-.063.323-.098.487-.034.178-.1.35-.1.53-.002.181.064.353.099.531.034.164.032.33.095.485.069.17.202.313.308.468.096.143.155.3.278.424l18.596 18.776c.29.28.593.528.892.786 3.877 4.612 3.865 11.297-.202 15.364-4.306 4.31-11.43 4.057-16.158-.523l-7.298-7.445c4.393-6.621 3.862-15.452-1.73-21.041-4.095-4.096-9.826-5.472-15.248-4.197.249-1.088.396-2.203.43-3.337.143-4.555-1.506-8.792-4.64-11.926-4.046-4.045-9.693-5.447-15.055-4.248 1.222-5.388-.166-11.152-4.225-15.211-4.096-4.094-9.827-5.474-15.247-4.198.247-1.089.395-2.204.429-3.336.142-4.554-1.506-8.79-4.642-11.926-5.475-5.477-13.879-6.1-20.547-1.989L7.422 85.39l54.96-55.134H88.79L63.314 55.733c-4.126 4.124-6.589 9.438-6.935 14.962-.357 5.65 1.532 10.845 5.312 14.625 7.697 7.698 21.245 7.34 30.21-.805l32.148-28.917 41.492 41.351c.101.153.17.32.303.452l18.91 18.73c2.229 2.227 3.506 5.153 3.602 8.24zm-99.247 65.566c-4.779 4.63-11.897 4.88-16.207.57-4.312-4.31-4.069-11.569.54-16.178l8.445-8.446c4.782-4.622 11.894-4.869 16.202-.563 4.034 4.035 4.077 10.653.288 15.262-.086.068-.19.097-.27.176-.15.146-.229.328-.337.497-.076.08-.142.164-.222.244l-8.44 8.438zm-35.667-18.89c-2.068-2.069-3.157-4.887-3.061-7.937a12.096 12.096 0 0 1 2.79-7.345c.271-.236.549-.46.812-.715l4.322-4.324 4.326-4.325c.253-.252.478-.52.71-.783 2.326-1.881 5.081-2.831 7.76-2.831 2.777 0 5.473 1.018 7.529 3.074 2.068 2.068 3.155 4.888 3.06 7.937-.096 3.086-1.376 6.014-3.601 8.24l-8.44 8.44c-4.776 4.63-11.895 4.878-16.207.568zm-19.461-19.278c-4.076-4.076-4.074-10.784-.166-15.4.312-.267.627-.528.928-.82l4.124-4.3 4.28-4.284c2.5-2.416 5.634-3.637 8.675-3.637 2.775 0 5.47 1.02 7.528 3.073 4.065 4.067 4.078 10.754.198 15.366-.31.265-.621.525-.918.813l-8.469 8.468c-.294.292-.564.604-.832.914-4.74 3.875-11.287 3.865-15.348-.193zm-19.278-19.461c-2.068-2.069-3.156-4.887-3.06-7.937.095-3.088 1.374-6.015 3.64-8.28l4.105-4.284 4.294-4.294c.286-.28.582-.535.884-.782.073-.057.16-.083.228-.15.014-.016.02-.035.034-.05 2.277-1.766 4.94-2.663 7.535-2.663 2.776 0 5.472 1.018 7.528 3.074 2.068 2.07 3.155 4.888 3.061 7.939-.097 3.088-1.377 6.014-3.602 8.24l-8.648 8.648c-.256.254-.483.526-.721.793-4.733 3.82-11.238 3.785-15.278-.254zM198.307 83.48l-57.295-57.296c-.118-.193-.213-.396-.38-.56l-7.783-7.638L145.514 5.32a2.701 2.701 0 1 0-3.821-3.821l-14.597 14.594a2.707 2.707 0 0 0 .018 3.84l5.195 5.097H96.084a2.687 2.687 0 0 0-.95-.18H67.873l5.01-4.917a2.707 2.707 0 0 0 .019-3.84L58.305 1.5a2.701 2.701 0 0 0-3.821 0 2.701 2.701 0 0 0 0 3.821L67.15 17.987l-7.784 7.638-.003.005-.016.015L1.689 83.483a2.702 2.702 0 0 0 .004 3.82l17.277 17.279-3.445 3.443-4.103 4.285c-3.203 3.201-5.045 7.427-5.182 11.893-.142 4.557 1.507 8.793 4.642 11.928 3.112 3.112 7.17 4.661 11.324 4.661a16.98 16.98 0 0 0 3.733-.432c-1.228 5.395.157 11.168 4.22 15.23 3.117 3.118 7.184 4.667 11.337 4.667 1.294 0 2.591-.17 3.876-.468a17.386 17.386 0 0 0-.393 3.153c-.142 4.557 1.506 8.793 4.642 11.928 3.117 3.117 7.182 4.667 11.338 4.667 1.305 0 2.615-.172 3.91-.476-1.245 5.405.137 11.196 4.211 15.268 3.115 3.117 7.18 4.667 11.335 4.667 4.404 0 8.908-1.742 12.487-5.207l7.169-7.168 7.056 7.197c3.558 3.447 8.048 5.182 12.443 5.182 4.157 0 8.229-1.55 11.348-4.67 4.06-4.06 5.448-9.826 4.225-15.215 1.229.272 2.47.425 3.708.425 4.153-.002 8.227-1.551 11.346-4.67 4.072-4.072 5.454-9.861 4.21-15.263 1.293.303 2.6.474 3.902.474 4.157 0 8.229-1.552 11.348-4.67 3.137-3.134 4.785-7.372 4.641-11.927a17.425 17.425 0 0 0-.39-3.146c1.278.298 2.572.463 3.86.463 4.157 0 8.23-1.55 11.35-4.67 3.135-3.135 4.782-7.371 4.641-11.93-.138-4.464-1.978-8.69-5.193-11.9l-7.664-7.593 17.405-17.406a2.701 2.701 0 0 0 0-3.821z"></path><path class="illustration-highlight" fill="#147CB3" d="M162.882 9.81c3.874 0 7.027 3.154 7.027 7.028 0 3.874-3.153 7.027-7.027 7.027s-7.027-3.153-7.027-7.027 3.153-7.027 7.027-7.027m0 19.46c6.856 0 12.432-5.577 12.432-12.433s-5.576-12.433-12.432-12.433c-6.856 0-12.432 5.577-12.432 12.433s5.576 12.432 12.432 12.432M33.152 9.81c3.874 0 7.027 3.154 7.027 7.028 0 3.874-3.153 7.027-7.027 7.027s-7.027-3.153-7.027-7.027 3.153-7.027 7.027-7.027m0 19.46c6.856 0 12.433-5.577 12.433-12.433S40.008 4.405 33.152 4.405 20.72 9.982 20.72 16.838 26.296 29.27 33.152 29.27"></path></g></svg>
    <h2 class="mb-0">...</h2>
</div>

Dependencies

• Illustration