Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitb0473ec

Browse files
imklaujedrzejchalubek
authored andcommitted
feat(): Introduce Note component (#77)
1 parente1b3a9d commitb0473ec

File tree

5 files changed

+84
-2
lines changed

5 files changed

+84
-2
lines changed

‎src/_includes/components/note.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<divclass="note">
2+
{% if include.title %}
3+
<divclass="note__header">
4+
<spanclass="note__icon">
5+
{% include_relative assets/icons/alerts/info-note.svg %}
6+
</span>
7+
8+
<h4>{{ include.title }}</h4>
9+
</div>
10+
11+
<divclass="note__text">
12+
{{ include.content | markdownify }}
13+
{% include components/button-link.html text=include.buttonTitle href=include.buttonHref %}
14+
</div>
15+
{% else %}
16+
<divclass="note__content">
17+
<spanclass="note__icon">
18+
{% include_relative assets/icons/alerts/info-note.svg %}
19+
</span>
20+
21+
<divclass="note__text">
22+
<spanclass="note__heading">NOTE:</span> {{ include.content | markdownify }}
23+
{% include components/button-link.html text=include.buttonTitle href=include.buttonHref %}
24+
</div>
25+
</div>
26+
{% endif %}
27+
</div>

‎src/_sass/components/_note.scss‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
.note {
2+
padding:24px24px24px16px;
3+
background-color:color(gray-light);
4+
border-radius:8px;
5+
font-size:14px;
6+
line-height:22px;
7+
8+
& >* +* {
9+
margin-top:5px;
10+
}
11+
12+
&__header {
13+
display:flex;
14+
15+
& >* +* {
16+
margin-left:10px;
17+
}
18+
}
19+
20+
&__content {
21+
display:flex;
22+
23+
& >* +* {
24+
margin-left:20px;
25+
}
26+
}
27+
28+
&__text {
29+
& >* {
30+
display:inline;
31+
}
32+
}
33+
34+
&__heading {
35+
color:color(secondary);
36+
font-weight:700;
37+
}
38+
39+
&__icon {
40+
width:16px;
41+
height:16px;
42+
}
43+
}

‎src/_sass/segment.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
// =================================================
4141
@import"components/stage";
4242
@import"components/logo";
43+
@import"components/note";
4344
@import"components/button-link";
4445

4546
// Pages
Lines changed: 1 addition & 0 deletions
Loading

‎src/styleguide.md‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ hidden: true
55
layout:page
66
---
77

8-
{% include components/button-link.html text="Find out more" href="https://segment.com" %}
9-
108
#Heading 1
119
##Heading 2
1210
###Heading 3
@@ -27,3 +25,15 @@ layout: page
2725
- Subitem
2826
- Subitem
2927
* Item
28+
29+
{% include components/button-link.html text="Find out more" href="https://segment.com" %}
30+
31+
{% capture note %}
32+
Our[browser and mobile libraries](https://segment.com)**automatically** use Anonymous IDs under the covers to keep track of users as they navigate around your website or app, so you don’t need to worry about them when using those libraries.
33+
{% endcapture %}
34+
{% include components/note.html content=note %}
35+
36+
{% capture server_side_tracking %}
37+
Server-side data management is when tag sends data into your web server, then your web server passes that data to the destination system/server.
38+
{% endcapture %}
39+
{% include components/note.html title="Server-side tracking" content=server_side_tracking buttonTitle="Find out more" buttonHref="https://segment.com" %}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp