---
canonical: 'https://htmlcsstoimage.com/examples/speech-bubble-card/csharp'
title: 'Speech bubble card | Example - C# (HttpClient)'
description: 'Social card with text in a speech bubble.'
---

# Speech bubble card

Social card with text in a speech bubble.

Use this example for sharing a quick quote. Replace the text and avatar image with your own to auto generate tweet like shareable images.

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/7bd5b785-211e-405f-82e4-4641d6c586f0>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/speech-bubble-card/csharp)

## HTML

```html
<div class="p-4 text-center" style="width: 500px">
  <div class="speech-bubble-ds">
    This is Little Bear. He tolerates baths because he knows how phenomenal his
    floof will appear afterwards. 13/10
    <div class="speech-bubble-ds__arrow"></div>
  </div>
  <img src="https://docs.htmlcsstoimage.com/assets/images/dog.jpg" class="rounded-circle shadow mt-2" width="100px">
  <h4 class="mt-2">
    WeRateDogs
  </h4>
  <span class="text-muted">@dog_rates</span>
</div>

<!-- Include external CSS, JavaScript or Fonts! -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700" rel="stylesheet">
```

## CSS

```css

body {
  background-color: #FFE86E !important;
}


.speech-bubble-ds {
  color: #FFFFFF;
  background: #000000;
  border: 1px solid #ffffff;
  border-radius: 16px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0 auto 40px;
  max-width: 400px;
  padding: 15px;
  position: relative;

  p {
    margin-bottom: 10px;

    :last-of-type {
      margin-bottom: 0;
    }
  }
}

.speech-bubble-ds__arrow {
  border-left: 21px solid transparent;
  border-top: 20px solid rgba(0, 0, 0, 0.2);
  bottom: -25px;
  position: absolute;
  right: 200px;

  &::before {
    border-left: 23px solid transparent;
    border-top: 23px solid #a7a7a7;
    bottom: 2px;
    content: "";
    position: absolute;
    right: 5px;
  }
  &::after {
    border-left: 21px solid transparent;
    border-top: 21px solid #efefef;
    bottom: 4px;
    content: "";
    position: absolute;
    right: 6px;
  }
}
```

## 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 (HttpClient)

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

```csharp
using System.Net.Http.Headers;
using System.Net.Http.Json;
using System.Collections.Generic;
using System.Text;
using System.Text.Json.Nodes;

var apiId = Environment.GetEnvironmentVariable("HCTI_API_ID")!;
var apiKey = Environment.GetEnvironmentVariable("HCTI_API_KEY")!;
using var client = new HttpClient();
var credentials = Convert.ToBase64String(Encoding.ASCII.GetBytes($"{apiId}:{apiKey}"));
client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", credentials);

var request = new
{
    html = """
           <div class="p-4 text-center" style="width: 500px">
             <div class="speech-bubble-ds">
               This is Little Bear. He tolerates baths because he knows how phenomenal his
               floof will appear afterwards. 13/10
               <div class="speech-bubble-ds__arrow"></div>
             </div>
             <img src="https://docs.htmlcsstoimage.com/assets/images/dog.jpg" class="rounded-circle shadow mt-2" width="100px">
             <h4 class="mt-2">
               WeRateDogs
             </h4>
             <span class="text-muted">@dog_rates</span>
           </div>
           
           <!-- Include external CSS, JavaScript or Fonts! -->
           <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
           
           <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700" rel="stylesheet">
           """,
    css = """
          
          body {
            background-color: #FFE86E !important;
          }
          
          
          .speech-bubble-ds {
            color: #FFFFFF;
            background: #000000;
            border: 1px solid #ffffff;
            border-radius: 16px;
            box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
            font-size: 1.2rem;
            line-height: 1.3;
            margin: 0 auto 40px;
            max-width: 400px;
            padding: 15px;
            position: relative;
          
            p {
              margin-bottom: 10px;
          
              :last-of-type {
                margin-bottom: 0;
              }
            }
          }
          
          .speech-bubble-ds__arrow {
            border-left: 21px solid transparent;
            border-top: 20px solid rgba(0, 0, 0, 0.2);
            bottom: -25px;
            position: absolute;
            right: 200px;
          
            &::before {
              border-left: 23px solid transparent;
              border-top: 23px solid #a7a7a7;
              bottom: 2px;
              content: "";
              position: absolute;
              right: 5px;
            }
            &::after {
              border-left: 21px solid transparent;
              border-top: 21px solid #efefef;
              bottom: 4px;
              content: "";
              position: absolute;
              right: 6px;
            }
          }
          """,
    render_when_ready = false,
};

using var response = await client.PostAsJsonAsync("https://hcti.io/v1/image", request);
response.EnsureSuccessStatusCode();
var result = await response.Content.ReadFromJsonAsync<JsonObject>();
var imageUrl = result?["url"]?.GetValue<string>();
if (imageUrl is not null)
{
    Console.WriteLine(imageUrl);
}

```

## 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/speech-bubble-card/typescript-client.md)
  - [fetch](https://htmlcsstoimage.com/examples/speech-bubble-card/typescript.md)
- **C#**
  - [HCTI client](https://htmlcsstoimage.com/examples/speech-bubble-card/csharp-client.md)
  - [HttpClient](https://htmlcsstoimage.com/examples/speech-bubble-card/csharp.md) — shown above
- **Python**
  - [requests](https://htmlcsstoimage.com/examples/speech-bubble-card/python.md)
- **PHP**
  - [cURL](https://htmlcsstoimage.com/examples/speech-bubble-card/php.md)
- **Ruby**
  - [HCTI client](https://htmlcsstoimage.com/examples/speech-bubble-card/ruby-client.md)
  - [Net::HTTP](https://htmlcsstoimage.com/examples/speech-bubble-card/ruby.md)
- **Go**
  - [net/http](https://htmlcsstoimage.com/examples/speech-bubble-card/golang.md)
- **cURL**
  - [cURL](https://htmlcsstoimage.com/examples/speech-bubble-card/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/speech-bubble-card/csharp)
- [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.