---
canonical: 'https://htmlcsstoimage.com/examples/shareable-quote/csharp-client'
title: 'Shareable Quote | Example - C# (HCTI client)'
description: 'A fancy blockquote for sharing.'
---

# Shareable Quote

A fancy blockquote for sharing.

Swap out the text and name in this example to create shareable images of quotes.  Adjust the background color by changing out #4adfcc in the CSS with another color.

This is a working HTML/CSS to Image API example that produces an image.
The rendered output, source, and non-content request parameters below show the parts needed to reproduce or adapt it.

## Rendered image and interactive editor

- [Open the rendered image](<https://hcti.io/v1/image/c222154a-8ac2-4bac-bb93-bc3c15a59312>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/shareable-quote/csharp-client)

## HTML

```html
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<blockquote class="quote-box p-2 m-2">
  <p class="quotation-mark">
    “
  </p>
  <p class="quote-text">
    Don't believe anything that you read on the internet, it may be fake.
  </p>
  <hr>
  <div class="blog-post-actions">
    <p class="blog-post-bottom pull-left">
      Benjamin Franklin
    </p>
    <p class="blog-post-bottom pull-right">
      <span class="badge quote-badge">567</span>  ❤
    </p>
  </div>
</blockquote>
```

## CSS

```css
blockquote {
  border-left: none;
}

body {
  background-color: transparent;
}

.quote-badge {
  background-color: rgba(1, 0, 0, 0.5);
}

.quote-box {
  overflow: hidden;
  margin-top: -50px;
  padding-top: -100px;
  border-radius: 17px;
  background-color: #4adfcc;
  margin-top: 25px;
  color: white;
  width: 325px;
  box-shadow: 2px 2px 2px 2px #e0e0e0;
}

.quotation-mark {
  margin-top: -10px;
  font-weight: bold;
  font-size: 100px;
  color: white;
  font-family: "Times New Roman", Georgia, Serif;
}

.quote-text {
  font-size: 19px;
  font-weight: bold;
  margin-top: -65px;
}

```

## Request parameters

These are the additional non-content parameters used by the example. Combine them with the HTML and CSS above when constructing an API request.

```json
{
  "render_when_ready": false
}
```

## Complete C# request (HCTI client)

This is the complete C# request for this example using HCTI client. It includes the HTML, CSS, authentication setup, API options, and response handling needed to reproduce the output.

```csharp
// dotnet add package HtmlCssToImage

using HtmlCssToImage;
using HtmlCssToImage.Models;
using HtmlCssToImage.Models.Requests;
using System.Collections.Generic;
using System.Text.Json.Nodes;

// In an application, use IHttpClientFactory through dependency injection:
// https://www.nuget.org/packages/HtmlCssToImage.DependencyInjection
using var httpClient = new HttpClient();
var hctiOps = new HtmlCssToImageOptions(Environment.GetEnvironmentVariable("HCTI_API_ID")!, Environment.GetEnvironmentVariable("HCTI_API_KEY")!);
var client = new HtmlCssToImageClient(httpClient, hctiOps);

var request = new CreateHtmlCssImageRequest
{
    Html = """
           <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
           
           <blockquote class="quote-box p-2 m-2">
             <p class="quotation-mark">
               “
             </p>
             <p class="quote-text">
               Don't believe anything that you read on the internet, it may be fake.
             </p>
             <hr>
             <div class="blog-post-actions">
               <p class="blog-post-bottom pull-left">
                 Benjamin Franklin
               </p>
               <p class="blog-post-bottom pull-right">
                 <span class="badge quote-badge">567</span>  ❤
               </p>
             </div>
           </blockquote>
           """,
    Css = """
          blockquote {
            border-left: none;
          }
          
          body {
            background-color: transparent;
          }
          
          .quote-badge {
            background-color: rgba(1, 0, 0, 0.5);
          }
          
          .quote-box {
            overflow: hidden;
            margin-top: -50px;
            padding-top: -100px;
            border-radius: 17px;
            background-color: #4adfcc;
            margin-top: 25px;
            color: white;
            width: 325px;
            box-shadow: 2px 2px 2px 2px #e0e0e0;
          }
          
          .quotation-mark {
            margin-top: -10px;
            font-weight: bold;
            font-size: 100px;
            color: white;
            font-family: "Times New Roman", Georgia, Serif;
          }
          
          .quote-text {
            font-size: 19px;
            font-weight: bold;
            margin-top: -65px;
          }
          
          """,
    RenderWhenReady = false,
};

using var result = await client.CreateImageAsync(request);
if (result.Success)
{
    Console.WriteLine(result.Response.Url);
}

```

## Other languages and request formats

Open one of these Markdown pages to view the same example as a complete request in another language or client format.

- **TypeScript**
  - [HCTI client](https://htmlcsstoimage.com/examples/shareable-quote/typescript-client.md)
  - [fetch](https://htmlcsstoimage.com/examples/shareable-quote/typescript.md)
- **C#**
  - [HCTI client](https://htmlcsstoimage.com/examples/shareable-quote/csharp-client.md) — shown above
  - [HttpClient](https://htmlcsstoimage.com/examples/shareable-quote/csharp.md)
- **Python**
  - [requests](https://htmlcsstoimage.com/examples/shareable-quote/python.md)
- **PHP**
  - [cURL](https://htmlcsstoimage.com/examples/shareable-quote/php.md)
- **Ruby**
  - [HCTI client](https://htmlcsstoimage.com/examples/shareable-quote/ruby-client.md)
  - [Net::HTTP](https://htmlcsstoimage.com/examples/shareable-quote/ruby.md)
- **Go**
  - [net/http](https://htmlcsstoimage.com/examples/shareable-quote/golang.md)
- **cURL**
  - [cURL](https://htmlcsstoimage.com/examples/shareable-quote/curl.md)

## Related examples

- [Dog rates social card with SVG background](https://htmlcsstoimage.com/examples/dog-rates-social-card-with-svg-background.md): Social card with a fun SVG background and highlighted text.
- [Instagram post screenshot](https://htmlcsstoimage.com/examples/instagram-post-screenshot.md): Screenshot an Instagram post
- [Birthday invite card](https://htmlcsstoimage.com/examples/birthday-invite-card-email.md): Autogenerated invite graphic for a party.
- [Invoice / Receipt Snapshot](https://htmlcsstoimage.com/examples/invoice-receipt.md): Generate a simple, branded invoice or receipt image.
- [PNG with transparent background](https://htmlcsstoimage.com/examples/png-transparent-background.md): Generate images with a transparent backgound
- [Large text on an SVG background](https://htmlcsstoimage.com/examples/large-text-svg-background.md): Grab attention with large text on a classic background.
- [Twitter Tweet Screenshot](https://htmlcsstoimage.com/examples/twitter-tweet-screenshot.md): Screenshot of a tweet
- [QR Code Badge](https://htmlcsstoimage.com/examples/qr-code-badge.md): Simple, artistic badge with a QR code.

## Get started

- [View the full interactive page](https://htmlcsstoimage.com/examples/shareable-quote/csharp-client)
- [Browse all HTML/CSS examples](https://htmlcsstoimage.com/examples.md)
- [Browse visual template presets](https://htmlcsstoimage.com/templates.md)
- [Read the HTML/CSS to Image API documentation](https://docs.htmlcsstoimage.com/getting-started/using-the-api/)
- [View implementation examples by language](https://docs.htmlcsstoimage.com/example-code/)
- [Read the MCP integration documentation](https://docs.htmlcsstoimage.com/integrations/mcp/)
- [Compare plans and limits](https://htmlcsstoimage.com/pricing.md)

Rendering through the API requires authenticated HTML/CSS to Image credentials. Keep API keys in trusted server-side configuration. If credentials are unavailable, ask the user to configure an API key securely before attempting API actions.