# Case Studies (All case studies) Template

**Principle** has a template for the **Case Studies (All case studies) page**, which shows all of the case study of your publication. **Case Studies** page is not required, but you can add it if you want.

<figure><img src="https://3747166499-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNEUq8JgkqyvfvcerS2FD%2Fuploads%2F2Bw7F4vn3Z2TlUzKC8Pn%2Fcase-studies.JPG?alt=media&#x26;token=3bb891ef-80b5-45b6-a593-edea4b5fae79" alt=""><figcaption></figcaption></figure>

## To add **Case Studies** Page:

To add an Case Studies Page to your publication, you'll need [configure and upload](https://highfivethemes.gitbook.io/principle-user-documentation/openapi#heres-a-quick-guide) routes.yaml file.&#x20;

### Adding an **Case Studies** Page:

1. In your Ghost admin area, go to **Pages** and click on the **New Page** button in the top right corner.
2. Title your page. You can choose any title you like for the **Case Studies**.
3. Click <img src="https://3747166499-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNEUq8JgkqyvfvcerS2FD%2Fuploads%2FjafE8K5kJ5uVqReN9ZPN%2F01.png?alt=media&#x26;token=bd4285b8-9261-4cdc-ad1b-e631c1df89b5" alt="" data-size="line"> icon in the top right corner to open the **Page settings**
4. In the **Page** **URL** section, ensure the slug is set to `case-studies`. This links the page to the route you've set up in your `routes.yaml` file.
5. **Optionally**, you can add an excerpt and feature an image to make the page more engaging.
6. Once you're done, click on **Publish** to make your **Projects Page** live.

## To add a company logo to a case study card:

To add a company logo, the logo must first be added to the theme folder. Locate the "assets" folder and add the logo to the "images" folder. If there is no "images" folder in "assets," you need to create one. Then, specify the required path in the code. After adding a logo to the theme, reload the theme

1. Check the case study slug. You can do that in **Post** settings in the admin panel.
2. Combine the slug with `case-study-card` to build a CSS class. For example, if the slug is 'spectra', the CSS class will be `.case-study-card__spectra`.
3. Go to **Settings -> Code Injection** from Admin Panel
4. Add the following code in the **Site Footer** section:&#x20;

For example:

```css
<style>
  .case-study-card__spectra::after {
    content: '';
    background-image: url('../assets/images/spectra.svg');
    background-repeat: no-repeat;
    position: absolute;
    top: 24px;
    left: 24px;
    width: 113px;
    height: 29px;
  }
</style>
```

Copy and add your params:

```
<style>
    .case-study-card__CHANGE_THIS_TO_POST_SLUG:before {
        content: "";
        background-image: url(URL_TO_YOUR_IMAGE);
    }
</style>
```

Paste the URL of the image or emoji to the `background-image: url(`**`HERE`**`)`.

Click **Save**

## Contact form in Sidebar

**Principle** offers a contact form in sidebar on case studies page. For an easy way for your readers to reach you, add a contact page using [Formspree](https://formspree.io/).

### Add **your Formspree endpoint:**

* Go to the '**Design & branding'** settings in the Ghost Admin.
* On the right you’ll see the tab '**Homepage'** – expand this settings list and go to the Formspree endpoint.
* Please provide your Formspree endpoint, e.g `https://formspree.io/f/xhyplkej`
* Finally, click **Save** to activate.

{% hint style="info" %}
**Customize the title and text for your contact form.**
{% endhint %}

<figure><img src="https://3747166499-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNEUq8JgkqyvfvcerS2FD%2Fuploads%2F2kTXHntDsbKmkTsVtx2m%2Ftitle%2Btext.JPG?alt=media&#x26;token=7d99452b-1e3b-4b17-b324-391b51062252" alt=""><figcaption><p>Contact form in sidebar</p></figcaption></figure>

### Add title for contact form

* Go to the '**Design & branding'** settings in the Ghost Admin.
* On the right you’ll see the tab '**Site wide'** – expand this settings list and go to the **"Sidebar contact form title"**.&#x20;

  <figure><img src="https://3747166499-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNEUq8JgkqyvfvcerS2FD%2Fuploads%2FHTtNHR36zyKi3rGPXlfZ%2Ftitle.JPG?alt=media&#x26;token=8ee4e013-95f7-4c44-860b-da65ba9a9b58" alt=""><figcaption></figcaption></figure>
* Add title.
* Click **Save** to display.

### Add addiotional text for contact form

* Go to the '**Design & branding'** settings in the Ghost Admin.
* On the right you’ll see the tab '**Site wide'** – expand this settings list and go to the "Sidebar contact form text".&#x20;

  <figure><img src="https://3747166499-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNEUq8JgkqyvfvcerS2FD%2Fuploads%2F350v8MOEszEmmPz5fMFp%2Ftext.JPG?alt=media&#x26;token=c687f7b6-f633-4ab1-a9b7-060a61341919" alt=""><figcaption></figcaption></figure>
* Add title.
* Click **Save** to display.