Feature
02 - 罫線で区切る3列の特徴
アイコン・見出し・説明文と控えめなリンクを3列で並べ、カラム間を罫線で区切るセクションです。
index.astro
---
import { ArrowRightIcon } from '@lism-css/icons/astro';
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Container, Divider, Flex, Heading, Icon, Link, Stack, Text } from 'lism-css/astro';
const features = [
{
title: 'ブランドをかたちにする',
description: '大切にしている想いや事業の強みを整理。言葉やロゴ、色を通して、そのブランドらしさをかたちにします。',
icon: `<g fill="none" class="nc-icon-wrapper"> <path d="M10.4512 15.5982L6.05396 17.7307L6.21569 12.6863L7.87754 12.2303L9.65703 13.4951L10.4512 15.5982Z" fill="currentColor" fill-opacity=".3" data-color="color-2">
</path> <path d="M5.69019 17.9641L10.4065 15.606" stroke="currentColor">
</path> <path d="M15.5 22.8346V13L22 10V19.6669L15.5 22.8346Z" fill="currentColor" fill-opacity=".3" data-color="color-2">
</path> <path d="M22 9.92639L15.5 13.1764" stroke="currentColor">
</path> <path d="M15.5001 22.9999V12.9999L8.68273 3.96344L8.4571 3.66569" stroke="currentColor">
</path> <path d="M2 7.2643V15.713C2 16.0936 2.21603 16.4412 2.55729 16.6097L5.27864 17.9533C5.61094 18.1174 6 17.8756 6 17.505V13.8651C6 12.4844 6.99729 11.8732 8.22752 12.5001C9.45774 13.1269 10.455 14.7543 10.455 16.135V19.8876C10.455 20.2682 10.6711 20.6158 11.0123 20.7843L14.8347 22.6715C15.254 22.8785 15.7458 22.8782 16.1648 22.6706L21.444 20.0548C21.7845 19.8861 22 19.5388 22 19.1588V10.4172C22 10.2041 21.9319 9.99654 21.8057 9.82483L16.0013 1.93008C15.5982 1.38181 14.8765 1.1736 14.2433 1.42287L2.95053 5.86856C2.37703 6.09434 2 6.64795 2 7.2643Z" stroke="currentColor">
</path> </g>`,
},
{
title: 'Webで魅力を伝える',
description: '届けたい相手と伝えたい内容を整理。情報の構成から見た目まで、目的に合ったWebサイトをつくります。',
icon: `<g fill="none" class="nc-icon-wrapper"> <path d="M22 18V14.4301L12 19.4148V23L22 18Z" fill="currentColor" fill-opacity=".3" data-color="color-2">
</path> <path d="M16 13.5V10.5L14.0358 11.4832L12 11.7574V15L14.0358 14.6434L16 13.5Z" fill="currentColor" fill-opacity=".3" data-color="color-2">
</path> <path d="M12 19.4148V22.801" stroke="currentColor">
</path> <path d="M2 14.5L11.5528 19.2764C11.8343 19.4172 12.1657 19.4172 12.4472 19.2764L22 14.5" stroke="currentColor">
</path> <path d="M20 7L22 6" stroke="currentColor" stroke-linecap="round">
</path> <path d="M4 7L2 6" stroke="currentColor" stroke-linecap="round">
</path> <path d="M12 3V1" stroke="currentColor" stroke-linecap="round">
</path> <path d="M8 11L2.55279 13.7236C2.214 13.893 2 14.2393 2 14.618V17.382C2 17.7607 2.214 18.107 2.55279 18.2764L11.3292 22.6646C11.7515 22.8757 12.2485 22.8757 12.6708 22.6646L21.4472 18.2764C21.786 18.107 22 17.7607 22 17.382V14.618C22 14.2393 21.786 13.893 21.4472 13.7236L16 11" stroke="currentColor">
</path> <path d="M16 9.5V12.8546C16 14.0394 14.2091 15 12 15C9.79086 15 8 14.0394 8 12.8546V9.5" stroke="currentColor">
</path> <path d="M16 9.49994C16 10.6848 14.2091 11.6454 12 11.6454C9.79086 11.6454 8 10.6848 8 9.49994C8 8.31504 9.79086 7.35449 12 7.35449C14.2091 7.35449 16 8.31504 16 9.49994Z" stroke="currentColor">
</path> </g>`,
},
{
title: '公開後の成長を支える',
description: '公開後の反応を確かめ、課題を整理。日々の更新から内容やデザインの見直しまで、継続して支えます。',
icon: `<g fill="none" class="nc-icon-wrapper"> <path d="M12 22.5612C15.3137 22.5612 18 21.4099 18 19.9898V17.4183L16.9189 19.0102L13.8131 19.9898H10.8023L7.04547 19.0374L6 17.4183V19.9898C6 21.4099 8.68629 22.5612 12 22.5612Z" fill="currentColor" fill-opacity=".3" data-color="color-2">
</path> <path d="M18 17.4184C18 18.8385 15.3137 19.9898 12 19.9898C8.68629 19.9898 6 18.8385 6 17.4184C6 15.9982 8.68629 14.8469 12 14.8469C12.4449 14.8469 12.8786 14.8677 13.2959 14.9071C15.5766 15.1223 17.3706 15.8936 17.8645 16.8723C17.9532 17.0483 18 17.231 18 17.4184Z" stroke="currentColor">
</path> <path d="M6 17.4183V19.9898C6 21.4099 8.68629 22.5612 12 22.5612C15.3137 22.5612 18 21.4099 18 19.9898V17.4183" stroke="currentColor" >
</path> <path d="M12 17.1809V6.95525C12 6.62603 12.162 6.31791 12.4333 6.13134L12.9439 5.78012" stroke="currentColor" stroke-linecap="round" >
</path> <path d="M10 17.1809H14" stroke="currentColor" stroke-linecap="round">
</path> <path d="M17.676 2.24207C15.4389 2.64268 12.6687 2.73451 12.026 4.58081C11.9022 4.93638 12.1027 5.31282 12.4327 5.49409C16.4136 7.68083 16.5546 4.04422 17.7844 2.42969C17.8443 2.35098 17.7734 2.22463 17.676 2.24207Z" stroke="currentColor">
</path> <path d="M22.4614 13.6509C21.9387 7.38565 18.9957 7.01982 16.1747 8.66534C10.4042 12.0314 20.5262 13.0941 22.3055 13.7682C22.3814 13.7969 22.4681 13.7317 22.4614 13.6509Z" stroke="currentColor">
</path> <path d="M1.98466 11.5529C2.5073 5.28763 5.45035 4.92179 8.27133 6.56731C14.0419 9.93338 3.91983 10.996 2.1405 11.6701C2.06469 11.6989 1.97793 11.6336 1.98466 11.5529Z" stroke="currentColor">
</path> <path d="M12.0014 9.54758L13.5489 8.7657C14.1134 8.48048 14.7796 8.47909 15.3453 8.76194L18.4462 10.3124" stroke="currentColor" stroke-linecap="round">
</path> <path d="M12.0001 7.28928L10.4525 6.5074C9.88802 6.22218 9.22188 6.22079 8.65619 6.50363L5.5553 8.05408" stroke="currentColor" stroke-linecap="round">
</path> </g>`,
},
] as const;
---
<DemoLayout title="02 - 罫線で区切る3列の特徴">
<Container as="section" isWrapper="l" hasGutter bgc="base">
<Stack py="60" g={['40', null, '50']}>
<Stack max-sz="m">
<Text bd-t bdw="1px" bdc="current" p="5" fz="xs" c="brand" fw="bold" lts="l" hl="s" tt="uppercase" w="fit-content">Features</Text>
<Heading fz={['2xl', '3xl', '4xl']}>私たちにできること</Heading>
</Stack>
<Flex fxd={['column', null, 'row']} g={['30', null, '40']}>
{
features.map((feature, index) => (
<>
{index > 0 && <Divider bd bdw={['1px 0 0', null, '0 0 0 1px']} fxsh="0" />}
<Stack as="article" g={['30', null, '35']} p="5" fx={{ md: '1' }}>
<Flex fxd={{ md: 'column' }} ai={['center', null, 'start']} g="25">
<Icon size="2em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" set:html={feature.icon} />
<Heading level="3" fz="m">
{feature.title}
</Heading>
</Flex>
<Stack g="20">
<Text c="text-2" fz="s">
{feature.description}
</Text>
<Flex jc="end" mbs="auto">
<Link
class="u--trim"
ai="center"
g="10"
fz="s"
c="brand"
td="none"
hov="underline"
href="#"
aria-label={`${feature.title}について詳しく見る`}
>
詳しく見る
<Icon icon={ArrowRightIcon} weight="bold" fz="s" />
</Link>
</Flex>
</Stack>
</Stack>
</>
))
}
</Flex>
</Stack>
</Container>
</DemoLayout>