Look'n Feel

<HTMLBlock>{`
<style>
      section#hub-content header h1, section#hub-content header h2 {
        color: #f71963
      }
    
      p {
        line-height: 1.5rem;
      }
    </style>
`}</HTMLBlock>

# Look'n Feel

## Introduction

The Admin Framework exists to unify channels and make life easier for the store operator. It is important, however, that the visual experience is homogeneous to avoid inconsistency of usability.

In order to facilitate visual integration for the developer, [Styleguide](https://styleguide.vtex.com) is available and with several components that can be used to quickly create administrative screens.

## Activity

1. In step 1, in the `/react/adminExample.tsx` file we add `vtex.styleguide` as a dependency, import the styleguide's`Layout` and `PageBlock` so that we can use them:

```code
import { Layout, PageBlock } from 'vtex.styleguide'

import React, { FC } from 'react'
import { Layout, PageBlock } from 'vtex.styleguide'

const AdminExample: FC = () => {
  return (
    <Layout>
      <PageBlock variation="full">
        <h1>Hello, World!</h1>
      </PageBlock>
    </Layout>
  )
}

export default AdminExample

import React, { FC } from "react";
import { Layout, PageBlock } from "vtex.styleguide";

const AdminExample: FC = () => {
  return (
    <Layout>
      <PageBlock
+       title="Titulo"
+       subtitle="Alguma explicação."
+       variation="full"
      >
        <h1>Hello, World!</h1>
      </PageBlock>
    </Layout>
  );
};

export default AdminExample;