HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
style : '--frame-color:#000;'//- Params
-
var panel_data = [
{
image : 'https://images.unsplash.com/photo-1550450339-e7a4787a2074?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxODgxMTQzNg&ixlib=rb-1.2.1&q=85',
title : 'お茶が美味しく感じる湯呑',
caption : 'お茶の渋みや甘みをじっくり感じる、楽しむ',
category : 'カテゴリー1',
date : '2021年5月12日',
year : '2021',
month : '5',
day : '12',
additionalClass : 'has-date has-cat vertical-date has-frame frame-bd txt-pos-top txt-pos-r',
},
{
image : 'https://images.unsplash.com/photo-1506159904226-d6cfd457c30c?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxODgxMjE1NA&ixlib=rb-1.2.1&q=85',
title : 'Stylish Plate',
caption : 'クールでスタイリッシュなプレートを求めて',
category : 'カテゴリー2',
date : '2021年5月10日',
year : '2021',
month : '5',
day : '10',
additionalClass : 'has-date has-cat frame-date frame-date__bd has-inner-frame has-shape-bg shape__triangle',
},
{
image : 'https://images.unsplash.com/photo-1548084769-1b94d5c3168e?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxODgxMzY1OA&ixlib=rb-1.2.1&q=85',
title : 'あなただけの最高の器を探そう',
caption : 'いつも使う「食器」だからこそ、デザインだけじゃなく使い勝手にこだわる。',
category : 'Category 3',
date : '2021年5月5日',
year : '2021',
month : '5',
day : '5',
additionalClass : 'has-date has-cat rotate-title txt-pos-btm txt-pos frame-date frame-date__arc',
},
{
image : 'https://images.unsplash.com/photo-1615970404801-9771dfaa1348?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxODgxMjMwNA&ixlib=rb-1.2.1&q=85',
title : '究極の漆に魅せられて',
caption : '色、形、材質、そして工程にまでこだわりを魅せる本物の器を見てみよう。',
category : 'おすすめの食器',
date : '2021年5月1日',
year : '2021',
month : '5',
day : '1',
additionalClass : 'has-date has-cat serif vertical-txt frame-date frame-date__bd',
},
{
image : 'https://images.unsplash.com/photo-1598511756475-c722aeaf9ad5?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxODgxMzU1OQ&ixlib=rb-1.2.1&q=85',
title : 'こだわりの器で旬の食材をいただく',
caption : '手に馴染むあなただけの器をさがしてみよう',
category : 'カテゴリー1',
date : '2021年5月12日',
year : '2020',
month : '12',
day : '24',
additionalClass : 'has-date has-cat has-line-frame has-inner-frame frame-line txt-pos-btm txt-pos-l txt-tr-none frame-date frame-date__arc vertical-cat',
},
{
image : 'https://images.unsplash.com/photo-1605117012605-b68dedd4accc?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxODgxNDM1MA&ixlib=rb-1.2.1&q=85',
title : 'Japanese Tea Cup',
caption : '匠の技術でしか生み出せないこの手触りをあなたにも',
category : 'カテゴリー2',
date : '2021年5月10日',
year : '2020',
month : '10',
day : '8',
additionalClass : 'has-date has-cat serif vertical-txt has-frame frame-bd no-right no-btm rotate-title title-back',
style : '--frame-color:#a5846d;--title-back-color:#a5846d;--title-color:#fff;',
},
{
image : 'https://images.unsplash.com/photo-1598514982901-ae62764ae75e?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxODgxMzYyNw&ixlib=rb-1.2.1&q=85',
title : '食材を引き立たせる器',
caption : 'いつも使う「食器」だからこそ、デザインだけじゃなく使い勝手にこだわる。',
category : 'Category 3',
date : '2021年5月5日',
year : '2020',
month : '9',
day : '25',
additionalClass : 'has-date has-cat title-back normal-weight txt-pos-top txt-pos-r txt-tr-none has-frame frame-bd no-left no-top no-right',
style : '--title-back-color:#efec79;--frame-color:#efec79;',
},
{
image : 'https://images.unsplash.com/photo-1598511796313-0a47bd0047ce?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxODgxMzY1OA&ixlib=rb-1.2.1&q=85',
title : '料理が映えるおすすめプレート',
caption : '色、形、材質、そして工程にまでこだわりを魅せる本物の器を見てみよう。',
category : 'おすすめの食器',
date : '2021年5月1日',
year : '2020',
month : '9',
day : '6',
additionalClass : 'has-date has-cat vertical-date txt-pos-btm rotate-title rotate-rev has-line-frame has-inner-frame frame-line line-dashed',
},
{
image : 'https://images.unsplash.com/photo-1493808655842-aa308811e178?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxODg3ODg2MQ&ixlib=rb-1.2.1&q=85',
title : '美味しい時間と器',
caption : 'いつもの手に馴染むあなただけの器をさがす',
category : 'カテゴリー1',
date : '2021年5月12日',
year : '2020',
month : '8',
day : '31',
additionalClass : 'has-date has-cat has-frame frame-bd no-top no-left vertical-cat title-back title-back__bd title-back__translucent frame-date frame-date__arc',
style : '--frame-color:#7eb1d0;',
},
{
image : 'https://images.unsplash.com/photo-1531819107804-b7cf36de8a19?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxODg3OTEzMQ&ixlib=rb-1.2.1&q=85',
title : 'Japanese Tea',
caption : '陶芸家たちが選ぶ日本茶に合う湯呑10選',
category : 'カテゴリー2',
date : '2021年5月10日',
year : '2021',
month : '10',
day : '12',
additionalClass : 'has-date has-cat vertical-date vertical-cat has-line-frame has-inner-frame frame-line line-double',
},
{
image : 'https://images.unsplash.com/photo-1605116728821-6a6e385a305e?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxODg3OTA3OQ&ixlib=rb-1.2.1&q=85',
title : 'この一杯にすべてが詰まっている',
caption : 'いつも使う「食器」だからこそ、デザインだけじゃなく使い勝手にこだわる。',
category : 'Category 3',
date : '2021年5月5日',
year : '2021',
month : '10',
day : '12',
additionalClass : 'has-date has-cat serif vertical-txt frame-date frame-date__bd',
},
{
image : 'https://images.unsplash.com/photo-1587560555570-4d3f84dcee05?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxODg3OTE5NA&ixlib=rb-1.2.1&q=85',
title : '職人が選ぶ一点物の器とは',
caption : '色、形、材質、そして工程にまでこだわりを魅せる本物の器を見てみよう。',
category : 'おすすめの食器',
date : '2021年5月1日',
year : '2021',
month : '10',
day : '12',
additionalClass : 'has-date has-cat serif vertical-date title-back has-inner-frame has-shape-bg',
style : '--frame-color:#000;'
},
{
image : 'https://images.unsplash.com/photo-1617196905100-216ffe128142?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxOTA5NDMxNw&ixlib=rb-1.2.1&q=85',
title : '漆黒の和の中で際立つ孤高の器',
caption : '最高の器がもてなす究極の和食をいただく。',
category : 'カテゴリー1',
date : '2021年5月12日',
year : '2021',
month : '5',
day : '12',
additionalClass : 'has-frame frame-bd no-left no-btm has-date has-cat serif vertical-date txt-pos-btm txt-pos-r has-inner-frame has-shape-bg shape__circle',
style : '--frame-color:#e40002;--frame-txt-color:#fff;',
},
{
image : 'https://images.unsplash.com/photo-1617093727343-374698b1b08d?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxOTA5MjA4MA&ixlib=rb-1.2.1&q=85',
title : '至極の一杯を最高の器で',
caption : '麺類を一層美味しくいただくための器にこだわる。',
category : 'カテゴリー4',
date : '2021年5月10日',
year : '2021',
month : '5',
day : '10',
additionalClass : 'has-date has-cat txt-pos-btm vertical-cat frame-date frame-date__bd has-inner-frame has-shape-bg shape__parallelogram',
style : '--frame-color:#fff;'
},
{
image : 'https://images.unsplash.com/photo-1550826679-1b8ba79f1c18?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxOTA5MjQ4Nw&ixlib=rb-1.2.1&q=85',
title : 'あなたの選択でお茶が美味しくなる湯呑',
caption : 'いつも使う「食器」だからこそ、デザインだけじゃなく使い勝手にこだわる。',
category : 'Category 3',
date : '2021年5月5日',
year : '2021',
month : '5',
day : '5',
additionalClass : 'has-date has-cat serif frame-date frame-date__arc has-inner-frame has-shape-bg shape__rhombus',
},
]
//- Display
.container
.content
section.loop-section
each item, key in panel_data
article(class=`item ${ item.additionalClass }` style=`${ item.style || '' }`)
a.item-link(href="#")
figure
img(src=`${ item.image }` alt="image")
.meta
.title-area
h2.title
span #{ item.title }
.caption
span #{ item.caption }
.date
.date-year
span #{ item.year }
.date-month-day
span #{ item.month }
span #{ item.day }
.cat
span #{ item.category }
// Extends
%backface_visibility_hidden{
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
.serif{
font-family:"HiraMinProN-W3","Hiragino Mincho Pro","Yu Mincho",YuMincho,"MS PMincho",serif;
}
.loop-section{
display:grid;
// grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
// grid-gap:20px; // 4カラム
grid-gap:30px; // 3カラム
.item{
position:relative;
// height:345px; // 4カラム
height:460px; // 3カラム
color:var(--meta-txt-color, #fff);
text-shadow:0 0 24px rgba(#000,.68);
box-shadow:0 0 9px -6px rgba(#000,.68);
transition:all .3s ease-out;
overflow:hidden;
a{
color:var(--meta-txt-color, #fff);
}
&:hover{
transform:translateY(-5px);
box-shadow:0 8px 30px -16px rgba(#000,.58);
figure{
img{
transform:scale(1.05);
}
}
}
figure{
position:relative;
width:100%;
height:100%;
overflow:hidden;
z-index:0;
&::before,
&::after{
z-index:1;
}
img{
width:100%;
height:100%;
object-fit:cover;
transition:all 1.4s ease;
z-index:0;
@extend %backface_visibility_hidden;
}
}
.meta{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:1;
.title-area,
.date,
.cat{
position:absolute;
display:inline-block;
margin:auto;
span{
display:inline-block;
}
}
// タイトルエリア
.title-area{
display:flex;
flex-direction:column;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:100%;
padding:24px 16px;
line-height:1.48;
// メインタイトル
.title{
font-size:var(--title-size, 22px);
font-weight:800;
span{
position:relative;
&::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;
}
}
}
// キャプション
.caption{
margin-top:20px;
font-size:var(--cap-size, 14.5px);
font-weight:400;
}
}
// 日付(デフォルト)
.date{
top:5px;
left:5px;
font-size:15px;
font-family:STHeiti, STXihei, Arial, sans-serif;
line-height:20px;
text-align:center;
color:var(--date-color, #fff);
line-height:1.4;
.date-month-day,
.date-year{
vertical-align:middle;
display:inline-block;
}
.date-month-day{
span:nth-child(2){
&::before{
content:'/';
}
}
}
}
.cat{
bottom:6px;
right:6px;
font-size:15px;
font-weight:600;
line-height:1;
&::before{
content:'#';
position:relative;
width:0;
display:inline-block;
margin-right:14px;
}
}
}
// タイトルが左上の場合
&.txt-pos-top{
&.txt-pos-l{
// 日付は左下に表示
.meta{
.date{
top:auto;
bottom:10px;
}
}
}
}
// 日付(フレーム加工ありの場合)
&.frame-date{
.meta{
.date{
display:flex;
flex-direction:column;
justify-content:center;
width:44px;
height:44px;
// color:var(--date-color, #222);
// background-color:var(--date-bg-color, #fff);
}
}
// ボーダー装飾
&.frame-date__bd{
.meta{
.date{
top:10px;
left:10px;
border-style:solid;
border-width:0 0 1px 1px;
}
}
}
// サークル
&.frame-date__arc{
.meta{
.date{
text-shadow:none;
width:52px;
height:52px;
color:var(--date-bg-color, #222);
background-color:var(--date-color, #fff);
border-radius:50%;
}
}
}
// 縦書きの場合
&.vertical-txt{
.meta{
.title-area{
.caption{
margin-top:32px;
}
}
}
}
}
// ボールド解除
&.normal-weight{
.title-area{
.title{
font-weight:400;
}
}
}
// テキストエリアの位置(縦書きは対象外)
&:not(.vertical-txt){
// 中央上
&.txt-pos-top{
.title-area{
top:0;
transform:translate(-50%, 0);
}
// 日付があるとき
&.has-date{
.title-area{
top:42px;
}
}
// 左右寄せの場合
&.txt-pos-l,
&.txt-pos-r{
.title-area{
transform:none
}
}
// 日付があるとき
&.has-date:not(.txt-pos-l){
.title-area{
padding-top:42px;
}
}
}
// 中央下
&.txt-pos-btm{
.title-area{
top:auto;
bottom:26px;
transform:translate(-50%, 0);
}
// 左右寄せの場合
&.txt-pos-l,
&.txt-pos-r{
.title-area{
transform:none
}
}
}
// 中央左
&.txt-pos-l{
.title-area{
left:0;
text-align:left;
transform:translate(0, -50%);
}
}
// 中央右
&.txt-pos-r{
.title-area{
left:auto;
right:0;
text-align:right;
transform:translate(0, -50%);
}
}
}
// 縦書き共通
&.vertical-txt .title-area,
&.vertical-date .meta .date,
&.vertical-cat .meta .cat{
writing-mode:vertical-rl;
justify-content:space-between;
text-align:left;
}
// 縦書き日付
&.vertical-date{
.meta{
.date{
top:10px;
left:2px;
.date-year{
margin-right:0;
}
}
}
}
// 縦書き
&.vertical-txt{
.meta{
.title-area{
height:calc(100% - 84px);
width:calc(100% - 84px);
padding:0;
.caption{
margin-top:10px;
}
}
}
}
&.vertical-cat{
&.has-frame.fm-bd.no-right{
.meta .cat{
bottom:32px;
color:var(--meta-txt-color, #fff);
}
}
&.has-frame.fm-bd:not(.no-right){
.meta .cat{
color:var(--bg-txt-color, #222);
text-shadow:none;
}
}
.meta{
.title-area{
padding-right:48px;
}
.cat{
&::before{
margin:0 0 4px 0;
}
}
}
}
// フレームあり
&.has-frame{
&.frame-bd{
figure{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border:30px solid var(--frame-color, #fff);
}
&.no-right{
figure{
border-right-width:0;
}
&:not(.vertical-txt){
.title-area{
padding-right:16px;
}
}
}
&.no-btm{
figure{
border-bottom-width:0;
}
&:not(.vertical-txt){
.title-area{
padding-bottom:24px;
}
}
}
&.no-top{
figure{
border-top-width:0;
}
&:not(.vertical-txt){
.title-area{
padding-top:24px;
}
}
}
&.no-left{
figure{
border-left-width:0;
}
&:not(.vertical-txt){
.title-area{
padding-left:16px;
}
}
}
&:not(.no-top) .date,
&:not(.no-btm) .cat{
color:var(--frame-txt-color, #222);
text-shadow:none;
}
// タイトルとボーダーを重ねる場合
&.title-ovlp{
// txt-pos-top とセットで指定
figure{
border-top-width:68px;
}
.meta{
.title-area{
padding-top:24px;
.title{
text-shadow:none;
color:var(--title-color,#222);
}
}
}
// 縦書きの場合
&.vertical-txt{
figure{
border-top-width:30px;
border-right-width:98px;
}
.meta{
.title-area{
padding-top:44px;
}
}
}
}
}
.title-area{
padding:42px;
}
}
// ラインフレームがあるとき
&.has-line-frame{
.title-area{
padding:28px;
}
.date,
.cat{
margin:12px;
}
}
// インナーフレーム
&.has-inner-frame{
figure{
&::after{
content:'';
position:absolute;
top:50%;
left:50%;
display:block;
width:calc(100% - 20px);
height:calc(100% - 20px);
transform:translate(-50%, -50%);
}
}
}
// ラインフレーム
&.frame-line{
figure{
&::after{
border:1px solid var(--frame-color, #fff);
}
}
&.frame-line__skew{
figure{
&::after{
transform:translate(-50%, -50%) skew(-45deg);
}
}
}
&.line-dashed{
figure{
&::after{
border-style:dashed;
}
}
}
&.line-double{
figure{
&::after{
border-width:4px;
border-style:double;
}
}
}
}
// 透かし図形があるとき
&.has-shape-bg{
figure{
&::after{
width:60%;
height:60%;
background-color:var(--frame-color, #fff);
opacity:0.3;
}
}
&.shape__triangle{
figure{
&::after{
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
}
}
&.shape__chevron{
figure{
&::after{
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
}
}
&.shape__parallelogram{
figure{
&::after{
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
}
}
&.shape__rhombus{
figure{
&::after{
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
}
}
&.shape__circle{
figure{
&::after{
clip-path: circle(50% at 50% 50%);
}
}
}
&.shape__pentagon{
figure{
&::after{
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
}
}
&.shape__star{
figure{
&::after{
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
}
}
}
// 回転タイトル
&.rotate-title{
.title-area{
.title{
transform:rotate(-15deg);
}
.caption{
margin-top:60px;
}
}
&.txt-pos-top{
.title-area{
margin-top:60px;
}
}
&.rotate-rev{
.title-area{
.title{
transform:rotate(15deg);
}
}
}
// 縦書きの場合
&.vertical-txt{
.title-area{
.title{
margin-right:42px;
}
}
}
}
// タイトル背景
&.title-back{
.title-area{
.title{
span{
padding:12px;
text-shadow:none;
color:var(--title-color, #222);
&::before{
background-color:var(--title-back-color, #fff);
}
}
}
}
&.title-back__translucent{
.title-area{
.title{
span{
&::before{
opacity:.5;
}
}
}
}
}
&.title-back__bd{
.title-area{
.title{
span{
border:1px solid;
}
}
}
}
}
}
}
// メディアクエリ
@media ( max-width : 1439px ){
.loop-section{
.item{
height:calc(33.33vw - 20px);
}
}
}
@media ( max-width : 980px ){
.loop-section{
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-gap: 20px;
.item{
height:calc(50vw - 10px);
}
}
}
@media ( max-width : 667px ){
.loop-section{
grid-template-columns: minmax(0, 1fr);
.item{
height:50vh;
}
}
}
Also see: Tab Triggers