Sub menu
Home
Abonneren
Profiel menu
Abonneren
Inloggen
Service & Contact
Display options
System (device setting)
Light theme
Dark theme
Search
Close sub menu
Close sub menu
Breaking Switch
Is used on the my news page.
This is an example of a Breaking Alert Switch.
Breaking nieuws alert
Ontvang een e-mail alert bij belangrijk FD Nieuws
Code: 🔼
📋
CSS
📋
HTML
<div class="BreakingSwitch_breakingSwitch__Mgs3H"> <h3>Breaking nieuws alert</h3> <div class="BreakingSwitch_content__ZbGtQ"><span class="BreakingSwitch_description__keFyR">Ontvang een e-mail alert bij belangrijk FD Nieuws</span><label class="BreakingSwitch_switch__JgTaX" data-addurl="/add-breaking-alert" data-deleteurl="/delete-breaking-alert"><input type="checkbox" class="BreakingSwitch_switchInput__BUYkZ" aria-label="Ontvang een e-mail alert bij belangrijk FD Nieuws" /><span class="BreakingSwitch_switchLabel__KVcMO"><span class="BreakingSwitch_iconCheck__dgxG9"><svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="-240 -240 512 512"><path d="M-54.371 243.208l313.454-433.155-37.483-20.687L-66.106 102.03l-138.441-54.537-22.77 28.15 172.946 167.565z"></path></svg></span><span class="BreakingSwitch_iconTimes__vLAI6"><svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="-238.5 -240 512 512"><path d="M-164.47-126.755l39.34-39.34L17.53-23.455l142.6-142.64 39.34 39.34L17.51 55.285l-181.98-182.04z"></path><path d="M199.47 158.755l-39.34 39.34L17.47 55.455l-142.6 142.64-39.34-39.34L17.49-23.285l181.98 182.04z"></path></svg></span></span><span class="BreakingSwitch_switchHandle__EdrmD"></span></label></div> </div>
📋
React
<BreakingSwitch onChange={function k(){}} />