**LittleLink Extended** is an add-on repository for [LittleLink](https://github.com/sethcottle/littlelink). It welcomes more niche or region-specific services that aren’t quite popular enough for the core LittleLink repo. By importing this extension, you can expand your LittleLink setup with additional brands and icons. You can either import everything or selectively copy only the pieces you need.
To use **LittleLink Extended**, you’ll need a copy of the original [LittleLink project](https://github.com/sethcottle/littlelink). Fork or download that repository first.
In this repo’s `css` folder, you’ll find **`brands-extended.css`**. Copy that file into the `css` folder of your LittleLink project. Your folder structure should look something like this afterward:
In this repo’s `images` folder, you’ll find a folder named **`icons-extended`**. Copy that entire folder into the `images` folder of your LittleLink project. Your structure might then look like:
That’s all you need to pull in the extended brand styles.
---
## 👍 That’s It!
At this point, you’ve successfully imported **LittleLink Extended**. To see how to use the newly added buttons, simply reference them in your `index.html` or `preview.html` by using their associated classes (e.g., `button-anilist`, `button-bereal`, etc.).
For more information on the original LittleLink project, check out the [LittleLink repo](https://github.com/sethcottle/littlelink).
---
# Extended Modules
## Sensitive Content Warning
In addition to extended brands, this repository includes an **optional module** for adding **“Sensitive Content”** warnings. This module lets you display a slide-down panel warning users about potentially sensitive or age-restricted content. Each panel can include a **“Continue”** button that opens a custom link, set entirely in your HTML.
Download `sensitive-content.css` from this repo (in the `css` folder) and place it in your LittleLink project’s `css` folder. You can adjust the button color that is declared in `sensitive-content.css` or use a button color style from `brands.css` or `brands-extended.css` to adjust the button to any styling of your choice.
2.**Copy the JS**
Download `js` folder which contains `sensitive-content.js` from this repo and place it in your LittleLink project. By default LittleLink doesn't use any JS.
3.**Reference Them**
In your `index.html` (or `preview.html` in LittleLink Extended), add the CSS after your main styles:
- **`data-continue-url="..."`** sets the external link for the “Continue” button.
- **`.sensitive-trigger`** toggles the panel open/close.
- **`.sensitive-panel`** is the collapsible container.
- **`.sensitive-continue`** triggers navigation to the `data-continue-url`.
### Multiple Sensitive Content Panels
You can add **multiple** sensitive content panels by repeating the snippet above with different `data-continue-url` values. The JS automatically handles each one independently, so each panel can open a different link.
