# Social Media Links

> Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/socialmedia

<div class="prose">

The `.socialMedia` component consists of an unordered list of links to social media accounts and their corresponding icons.

</div>

<SocialMedia
  size="md"
  urls={[
    "https://www.instagram.com/amandaoleander/",
    "https://www.tiktok.com/@samdoesarts",
    "https://www.youtube.com/@ProkoTV",
  ]}
/>

<div class="prose">

<div class="docs_oversizedTable">

| File                        | Description | Source      |
| --------------------------- | ----------- | ----------- |
| `component.socialMedia.css` | All social links styles (`.socialMedia`) | [Github][1] |

</div>

[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.socialMedia.css

The following 4 sizes and 19 icons (18 social media platforms + 1 generic link icon) are available out of the box.

</div>

<div class="docs_examples_icons24">

<div class="docs_oversizedTable">

| Platform    | Icon                                         |
| ----------- | -------------------------------------------- |
| Unknown URL | <Fragment set:html={linkIcon} alt="" />      |
| Discord     | <Fragment set:html={discordIcon} alt="" />   |
| Facebook    | <Fragment set:html={facebookIcon} alt="" />  |
| Github      | <Fragment set:html={githubIcon} alt="" />    |
| Instagram   | <Fragment set:html={instagramIcon} alt="" /> |
| Linkedin    | <Fragment set:html={linkedinIcon} alt="" />  |
| Pinterest   | <Fragment set:html={pinterestIcon} alt="" /> |
| Reddit      | <Fragment set:html={redditIcon} alt="" />    |
| Snapchat    | <Fragment set:html={snapchatIcon} alt="" />  |
| Telegram    | <Fragment set:html={telegramIcon} alt="" />  |
| Tiktok      | <Fragment set:html={tiktokIcon} alt="" />    |
| X           | <Fragment set:html={xIcon} alt="" />         |
| Youtube     | <Fragment set:html={youtubeIcon} alt="" />   |
| Twitch      | <Fragment set:html={twitchIcon} alt="" />    |
| Odysee      | <Fragment set:html={odyseeIcon} alt="" />    |
| Minds       | <Fragment set:html={mindsIcon} alt="" />     |
| Substack    | <Fragment set:html={substackIcon} alt="" />  |
| Bitchute    | <Fragment set:html={bitchuteIcon} alt="" />  |
| Bastyon     | <Fragment set:html={bastyonIcon} alt="" />   |

</div>

</div>

## Playground

<Playground
  client:visible
  template={`<ul class="{classes}">
  <li><a href="https://x.com/_yannb_" aria-label="X">{x}</a></li>
  <li><a href="https://github.com/minimaldesign" aria-label="Github">{github}</a></li>
  <li><a href="https://www.youtube.com/@ProkoTV" aria-label="YouTube">{youtube}</a></li>
</ul>`}
  baseClasses="socialMedia"
  snippets={{
    x: { preview: xIcon, code: "<svg>[…]</svg>" },
    github: { preview: githubIcon, code: "<svg>[…]</svg>" },
    youtube: { preview: youtubeIcon, code: "<svg>[…]</svg>" },
  }}
  controls={[
    { heading: "Variation", items: [
      { type: "select", name: "size", label: "Size", default: "", options: [
        { label: "Default", value: "" },
        { label: "Medium", value: "socialMedia-md" },
        { label: "Large", value: "socialMedia-lg" },
        { label: "Extra large", value: "socialMedia-xl" },
      ]},
    ]},
  ]}
/>

## HTML

<div class="prose">

<div class="docs_oversizedTable">

| Available modifiers                | Description    |
| ---------------------------------- | -------------- |
| `.socialMedia`                     | Default - 24px |
| `.socialMedia` + `.socialMedia-md` | 32px           |
| `.socialMedia` + `.socialMedia-lg` | 44px           |
| `.socialMedia` + `.socialMedia-xl` | 64px           |

</div>

When using the HTML component you'll need to include the SVG icons "manually." All the icons are [available on Github](https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons). If you'd like to use different icons, [Lucide](https://lucide.dev/) is a great resource.

</div>

## Astro component

<div class="prose">

The Astro component ([Github](https://github.com/minimaldesign/mCSS/blob/main/src/components/SocialMedia.astro)) takes 3 props:

<div class="docs_oversizedTable">

| Prop         | Type     | Default   | Description                                                 |
| ------------ | -------- | --------- | ----------------------------------------------------------- |
| `urls`       | `array`  | `[]`      | An array of urls, or `{ url, label }` objects to override the accessible label (e.g. `"mCSS on GitHub"`). |
| `size`       | `string` | undefined | `md`, `lg`, `xl`.                                           |
| `newTab`     | `boolean` | `true`   | Open links in a new tab. Set to `false` to opt out.         |
| `class` | `string` | undefined | Additional CSS classes, useful for [helper classes](/docs/helpers). |

</div>
</div>

## Examples

<ul class="docs_examples">
  <li>
    <SocialMedia
      urls={[
        "https://www.instagram.com/amandaoleander/",
        "https://www.tiktok.com/@samdoesarts",
        "https://www.youtube.com/@ProkoTV",
      ]}
      class="mb-sm1"
    />

    ```astro
    ---
    import SocialMedia from "../../components/SocialMedia.astro";
    ---
    <SocialMedia
      urls={[
        "https://www.instagram.com/amandaoleander/",
        "https://www.tiktok.com/@samdoesarts",
        "https://www.youtube.com/@ProkoTV",
      ]}
    />
    ```

  </li>
  <li>
    <SocialMedia
      size="lg"
      urls={[
        "https://x.com/_yannb_",
        "https://github.com/minimaldesign",
        "https://www.youtube.com/@ProkoTV",
      ]}
      class="mb-sm1"
    />

    ```astro
    ---
    import SocialMedia from "../../components/SocialMedia.astro";
    ---
    <SocialMedia
      size="lg"
      urls={[
        "https://x.com/_yannb_",
        "https://github.com/minimaldesign",
        "https://www.youtube.com/@ProkoTV",
      ]}
    />
    ```

  </li>
</ul>

### HTML examples

<ul class="docs_examples">
  <li>
    <SocialMedia
      urls={[
        "https://www.instagram.com/amandaoleander/",
        "https://www.tiktok.com/@samdoesarts",
        "https://www.youtube.com/@ProkoTV",
      ]}
      class="mb-sm1"
    />

    ```html
    <ul class="socialMedia">
      <li>
        <a href="https://www.instagram.com/amandaoleander/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
         <svg>[…]</svg>
        </a>
      </li>
      <li>
        <a href="https://www.tiktok.com/@samdoesarts" target="_blank" rel="noopener noreferrer" aria-label="Tiktok">
         <svg>[…]</svg>
        </a>
      </li>
      <li>
        <a href="https://www.youtube.com/@ProkoTV" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
         <svg>[…]</svg>
        </a>
      </li>
    </ul>
    ```

  </li>
</ul>