mirror of https://github.com/Budibase/budibase.git
nocodelowcodelow-codedockerdocker-composeinternal-projectinternal-toolinternal-toolslow-code-developmentlow-code-development-platformopensourceselfhostedweb-devweb-developmentweb-development-toolswebdevwebdevelopmentworkflow-automationautomationdeveloper-tools
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
3.2 KiB
75 lines
3.2 KiB
id: link-primary-m
|
|
name: Link
|
|
SpectrumSiteSlug: https://spectrum.adobe.com/page/link/
|
|
status: Verified
|
|
sections:
|
|
- name: Migration Guide
|
|
description: |
|
|
### Subtle variant
|
|
Subtle variant was removed. Please use Quiet.
|
|
examples:
|
|
- id: link-primary-m
|
|
name: Sizing
|
|
markup: |
|
|
<div class="spectrum-Examples">
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">No size</h4>
|
|
|
|
<a href="#" class="spectrum-Link">Link using spectrum-Link</a>
|
|
</div>
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
|
|
|
|
<a href="#" class="spectrum-Link spectrum-Link--sizeS">Link using spectrum-Link</a>
|
|
</div>
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
|
|
|
|
<a href="#" class="spectrum-Link spectrum-Link--sizeM">Link using spectrum-Link</a>
|
|
</div>
|
|
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
|
|
|
|
<a href="#" class="spectrum-Link spectrum-Link--sizeL">Link using spectrum-Link</a>
|
|
</div>
|
|
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
|
|
|
|
<a href="#" class="spectrum-Link spectrum-Link--sizeXL">Link using spectrum-Link</a>
|
|
</div>
|
|
</div>
|
|
- id: link-secondary-m
|
|
name: Secondary
|
|
status: Verified
|
|
markup: |
|
|
<a href="#" class="spectrum-Link spectrum-Link--secondary">Link using spectrum-Link--secondary</a>
|
|
- id: link-over-background-m
|
|
name: Over Background
|
|
status: Verified
|
|
markup: |
|
|
<div style="background-color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;">
|
|
<p class="spectrum-Body" style="color: rgb(255, 255, 255);">
|
|
Hello, this is my <a href="#" class="spectrum-Link spectrum-Link--overBackground"> spectrum-Link--overBackground</a>. This is just filler text, but if you keep reading maybe something good will happen.
|
|
</p>
|
|
</div>
|
|
- id: link-quiet-primary-m
|
|
name: Quiet (Primary)
|
|
status: Verified
|
|
markup: |
|
|
<p> This uses <a href="#" class="spectrum-Link spectrum-Link--quiet">spectrum-Link--quiet</a>.</p>
|
|
- id: link-quiet-secondary-m
|
|
name: Quiet (Secondary)
|
|
status: Verified
|
|
markup: |
|
|
<p> This uses <a href="#" class="spectrum-Link spectrum-Link--quiet spectrum-Link--secondary">spectrum-Link--quiet</a>.</p>
|
|
- id: link-quiet-over-background-m
|
|
name: Quiet (Over Background)
|
|
status: Verified
|
|
markup: |
|
|
<div style="background-color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;">
|
|
<p class="spectrum-Body" style="color: rgb(255, 255, 255);">
|
|
Hello, this is my <a href="#" class="spectrum-Link spectrum-Link--overBackground spectrum-Link--quiet"> spectrum-Link--overBackground</a>. This is just filler text, but if you keep reading maybe something good will happen.
|
|
</p>
|
|
</div>
|
|
|